/* ============================================================
   Progress console (Insight · Radar · Rings · Ascent), chart motion,
   Life balance aura, The Ascent, Purpose Blueprint, Today fusion, feel strip.
   Intros key off [data-reveal].in-view:not(.no-intro) (once per tab
   visit, on scroll into view) or .screen.anim (tab entry).
   Continuous loops (comet, knob and ring glows, radar beats, halos) are few,
   small, paused while the console is off screen (.is-away) and off under
   reduced motion. The Mountain, Arc dial, day cells and Activity intros live
   in progress-dashboard.css.
   ============================================================ */

@property --aura-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sheen { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* animations that used to replay on every render are now driven by intros / JS */
.ember-fill, .ember-knob { animation: none !important; }
.ar-fill, .ar-point, .ar-ring-fill { animation: none; }
.ember-knob.at-zero { opacity: 0; }

@keyframes cmFadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes cmFade { from { opacity: 0; } }
@keyframes cmPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); } }
@keyframes cmGrowX { from { transform: scaleX(0); } }
@keyframes cmGrowY { from { transform: scaleY(0); } }

/* ---------------- Gauge score: centred ---------------- */
/* Today's gauge uses the same composition as the Progress console: digits alone, "out of 100"
   beneath, delta below, all on one centre line. */
.ember-gauge-center.is-stacked { margin-top: -80px; gap: 0; }
.ember-gauge-center.is-stacked strong { display: block; line-height: .92; font-variant-numeric: tabular-nums; }
.ember-gauge-center.is-stacked .ember-of { display: block; margin-top: 5px; color: var(--tx-3); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-indent: .1em; text-transform: uppercase; }
.ember-gauge-center.is-stacked .ember-delta { margin-top: 9px; }

/* ---------------- Progress console ---------------- */
/* One card, four views: Insight, Radar, Rings, Ascent. Scoped to .pc so Today is untouched. */
.pc { padding: 16px 18px 18px; }
.pc-head { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.pc-title-box { position: relative; flex: 1; min-width: 0; margin: 0; color: var(--tx); font-size: 15.5px; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
[data-skin="ember"] .pc-title-box { font-weight: 500; }
.pc-title { display: block; text-wrap: balance; }   /* wraps on a narrow phone rather than cutting the title (v246) */
.pc-title-ghost { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.pc-pill { flex: none; font-variant-numeric: tabular-nums; }
.pc-expand { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: color-mix(in srgb, var(--tx) 6%, transparent); color: var(--tx-2); font: inherit; font-size: 15px; cursor: pointer; }
.pc-expand::after { content: ''; position: absolute; inset: -3px; }
.pc-expand svg { width: 14px; height: 14px; }
[data-skin="ember"] .pc-expand { background: rgba(175, 195, 255, .07); border-color: var(--line); color: var(--tx); }
.pc-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc .pc-views { display: flex; width: 100%; box-sizing: border-box; gap: 2px; margin: 14px 0 0; }
.pc .pc-views button { position: relative; flex: 1 1 0; min-width: 0; min-height: 38px; padding: 0 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pc .pc-views button::after { content: ''; position: absolute; inset: -4px -1px; }   /* 46px tap target inside the track */
.pc .pc-views button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pc-stage { position: relative; margin-top: 16px; }
.pc-stage.pc-moving { overflow: clip; overflow-clip-margin: 14px; }
.pc-pane { position: relative; z-index: 1; min-width: 0; }
.pc-ghost { position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none; }
.pc .pd-next { margin-top: 14px; }
.pc .pa-grid { margin-top: 6px; }

/* Insight: digits centred on the arc, "out of 100" beneath, one shared centre line. */
.pc .pc-gauge { display: flex; flex-direction: column; align-items: center; padding: 0; text-align: center; }
.pc-dial { position: relative; width: min(100%, 272px); margin: 0 auto; }
.pc .pc-dial svg { display: block; width: 100%; max-width: none; height: auto; overflow: visible; }
.pc-score { position: absolute; left: 0; right: 0; top: 31%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pc-num { display: block; color: var(--tx); font-size: 52px; font-weight: 300; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
[data-skin="ember"] .pc-num { color: #fff; }
.pc-of { display: block; margin-top: 5px; text-indent: .1em; color: var(--tx-3); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.pc-delta { margin-top: 10px; white-space: nowrap; }
/* No comparison pill (e.g. the first week): sit the digits in the optical middle of the arc instead of up high. */
.pc-score.no-delta { top: 40%; }
.pc-copy { margin-top: 14px; }
.pc-copy h3 { margin: 0; color: var(--tx); font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.pc-copy p { margin: 6px auto 0; max-width: 270px; color: var(--tx-3); font-size: 12.5px; line-height: 1.45; }
.pc .ember-range { margin-top: 18px; }
/* green Light / Dark themes: same gauge, painted with the theme accent */
:root:not([data-skin="ember"]) .pc .ember-track { stroke: color-mix(in srgb, var(--tx) 8%, transparent); }
:root:not([data-skin="ember"]) .pc .ember-fill { stroke: var(--accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)); }
:root:not([data-skin="ember"]) .pc .ember-knob-start { fill: var(--card-2); stroke: var(--line-2); }
:root:not([data-skin="ember"]) .pc .ember-knob { fill: var(--card); stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .22)); }
:root:not([data-skin="ember"]) .pc .ember-delta { background: color-mix(in srgb, var(--tx) 6%, transparent); color: var(--tx-2); }
:root:not([data-skin="ember"]) .pc .ember-range-bar { background: color-mix(in srgb, var(--tx) 10%, transparent); }
:root:not([data-skin="ember"]) .pc .ember-range-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); }
:root:not([data-skin="ember"]) .pc .ember-range-bar em { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
:root:not([data-skin="ember"]) .pc .ember-range-top b { color: var(--accent); }
/* insight intro (the gauge sweep and count-up are driven by chart-motion.js).
   --land (set in the markup) is when the sweep and the digits have landed; the delta pill, the comet and
   the knob's breath wait for it. */
.pc-insight { --comet: color-mix(in srgb, var(--tx) 82%, var(--accent-3)); --pc-glow: var(--tx); }
[data-theme="light"] .pc-insight { --comet: color-mix(in srgb, var(--card) 90%, var(--accent)); }
:root:not([data-skin="ember"]) .pc-insight { --pc-glow: var(--accent); }
.pc-insight[data-reveal]:not(.in-view) :is(.ember-range-bar i, .ember-range-bar em, .pc-delta, .pc-of, .pc-copy) { opacity: 0; }
.pc-insight.in-view:not(.no-intro) .pc-of { animation: cmFade .5s .3s both; }
.pc-insight.in-view:not(.no-intro) .pc-delta { animation: pcDeltaIn .6s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--land, 1100ms); }
@keyframes pcDeltaIn { from { opacity: 0; transform: translateX(-16px) scale(.96); } }
.pc-insight.in-view:not(.no-intro) .pc-copy { animation: cmFadeUp .55s .45s cubic-bezier(.22,1,.36,1) both; }
.pc-insight.in-view:not(.no-intro) .ember-range-bar i { animation: cmRangeOpen 1s .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmRangeOpen { from { left: var(--a); right: calc(100% - var(--a)); opacity: .2; } }
/* the marker drops onto the bar, lands a touch squashed and settles */
.pc-insight.in-view:not(.no-intro) .ember-range-bar em { animation: pcMarkerLand .95s 1.05s both; }
@keyframes pcMarkerLand {
  0% { transform: translate(-50%, -190%) scale(.5); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .85, .4); }
  52% { transform: translate(-50%, -42%) scale(1.08, .9); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  76% { transform: translate(-50%, -54%) scale(.97, 1.04); animation-timing-function: ease-in-out; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
/* continuous, and only two things: a comet that runs along the kept arc (once the sweep has landed, then
   every seven seconds) and a soft halo behind the knob that breathes. The comet is three dashes of one path
   (tail, middle, head) sharing one head position; --l is a dash's length, --e where its offset ends (arc
   units, 0 to 100). The halo is a radial gradient (fill set in the markup) and only its opacity changes, so it
   costs nothing to run and no engine has to support a filter on svg shapes. */
.pc-comet { fill: none; stroke: var(--comet); stroke-linecap: round; stroke-dasharray: var(--l) 200; stroke-dashoffset: var(--l); opacity: 0; pointer-events: none; }
.pc-comet-tail { stroke-width: 15; stroke: color-mix(in srgb, var(--comet) 13%, transparent); }
.pc-comet-mid { stroke-width: 10; stroke: color-mix(in srgb, var(--comet) 30%, transparent); }
.pc-comet-head { stroke-width: 6; stroke: color-mix(in srgb, var(--comet) 92%, transparent); }
.pc-insight.in-view .pc-comet { animation: pcCometRun 7s cubic-bezier(.5, .05, .3, 1) infinite, pcCometFade 7s linear infinite; animation-delay: calc(var(--land, 1200ms) + .12s); }
@keyframes pcCometRun { 0% { stroke-dashoffset: var(--l); } 23%, 100% { stroke-dashoffset: var(--e); } }
@keyframes pcCometFade { 0% { opacity: 0; } 4% { opacity: 1; } 17% { opacity: 1; } 23%, 100% { opacity: 0; } }
.pc-knob-halo { opacity: 0; pointer-events: none; }
.pc-insight.in-view .pc-knob-halo { animation: pcKnobHalo 4.8s ease-in-out infinite; animation-delay: var(--land, 1200ms); }
@keyframes pcKnobHalo { 0%, 100% { opacity: 0; } 42% { opacity: .62; } }

/* Radar and Rings inside the console */
.pc .pd-radar-wrap { margin-top: 2px; }
:is(.pc, .pd-focus) .ar-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.pc, .pd-focus) .ar-ring-card { min-width: 0; gap: 12px; padding: 10px 12px; }
:is(.pc, .pd-focus) .ar-ring-card svg { width: 48px; height: 48px; overflow: visible; }   /* visible: the ring's glow is not cut at the svg's box */
:is(.pc, .pd-focus) .ar-ring-card small { white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.pc, .pd-focus) .ar-ring-fill { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ring-tone, var(--accent)) 55%, transparent)); }
.area-stroke-mind { --ring-tone: var(--area-mind); } .area-stroke-career { --ring-tone: var(--area-career); } .area-stroke-health { --ring-tone: var(--area-health); } .area-stroke-money { --ring-tone: var(--area-money); }
[data-skin="ember"] :is(.pc, .pd-focus) .ar-ring-card { border-radius: 18px; background: linear-gradient(180deg, rgba(175, 195, 255, .06), rgba(175, 195, 255, .025)); }
[data-skin="ember"] :is(.pc, .pd-focus) .ar-ring-track { stroke: rgba(175, 195, 255, .09); }
@media (max-width: 360px) {
  :is(.pc, .pd-focus) .ar-ring-card { gap: 8px; padding: 10px 9px; }
  :is(.pc, .pd-focus) .ar-ring-card svg { width: 38px; height: 38px; }
  :is(.pc, .pd-focus) .ar-ring-card small { white-space: normal; }
}

/* Purpose Blueprint: the next console, header in the same voice as the console's */
.pd-signature.pc-next { padding: 10px 0 0; border-top: 0; }
.pc-next > header { padding: 0 2px; }
.pc-next > header h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
[data-skin="ember"] .pc-next > header h2 { font-weight: 500; }
.pc-next .pb2 { margin-top: 12px; }

/* ---------------- Life balance: radar intro + morph ---------------- */
.pd-radar-wrap[data-reveal]:not(.in-view) .ar-fill,
.pd-radar-wrap[data-reveal]:not(.in-view) .ar-point,
.pd-radar-wrap[data-reveal]:not(.in-view) .ar-radar text,
.pd-radar-wrap[data-reveal]:not(.in-view) .ar-aura { opacity: 0; }
.pd-radar-wrap.in-view:not(.no-intro) .ar-ring { transform-box: view-box; animation: cmRingIn .7s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes cmRingIn { from { transform: scale(.35) rotate(-20deg); opacity: 0; } }
.pd-radar-wrap.in-view:not(.no-intro) .ar-spoke { stroke-dasharray: 1 1; animation: cmSpoke .55s ease-out both; animation-delay: calc(.12s + var(--i) * 70ms); }
@keyframes cmSpoke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pd-radar-wrap.in-view:not(.no-intro) .ar-fill { stroke-dasharray: 100 100; animation: cmRadarGrow .95s .3s cubic-bezier(.3,1.25,.5,1) both, cmRadarDraw 1.2s .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmRadarGrow { from { transform: scale(0); fill-opacity: 0; } }
@keyframes cmRadarDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.pd-radar-wrap.in-view:not(.no-intro) .ar-point { transform-box: view-box; animation: cmPop .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.85s + var(--i) * 90ms); }
.pd-radar-wrap.in-view:not(.no-intro) .ar-radar text { animation: cmFade .5s both; animation-delay: calc(.55s + var(--i) * 80ms); }
.pd-radar-wrap.in-view:not(.no-intro) .ar-prev { animation: cmFade .6s 1.3s both; }
/* continuous: a soft flare behind each point takes a beat in turn, one every 1.6 s. Each is a disc with a radial gradient
   in the area's colour (fill set in the markup); only its opacity changes. */
.ar-beat { opacity: 0; pointer-events: none; }
.pd-radar-wrap.ar-aura-host.in-view .ar-beat { animation: cmPointBeat 6.4s ease-in-out infinite; animation-delay: calc(1.4s + var(--i) * 1.6s); }
.pd-radar-wrap.ar-aura-host.in-view:not(.no-intro) .ar-beat { animation-delay: calc(2.4s + var(--i) * 1.6s); }
@keyframes cmPointBeat { 0%, 26%, 100% { opacity: 0; } 11% { opacity: .9; } }

/* ---------------- Life balance: the aura ---------------- */
.ar-aura-host { position: relative; isolation: isolate; }
.ar-aura-host > .ar-radar { position: relative; z-index: 1; }
.ar-aura { position: absolute; left: 50%; top: 0; z-index: 0; width: min(100%, 320px); aspect-ratio: 240 / 220; transform: translateX(-50%); pointer-events: none; opacity: var(--strength, .8); }
.pd-radar-wrap.in-view:not(.no-intro) .ar-aura { animation: cmAuraIn 1.4s .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmAuraIn { from { opacity: 0; transform: translateX(-50%) scale(.6); filter: blur(6px); } }
.ar-aura-glow, .ar-aura-core, .ar-aura-sheen { position: absolute; inset: 0; }
.ar-aura-glow i, .ar-aura-core i { position: absolute; inset: 0; }
.ar-aura-glow { filter: blur(20px); transform-origin: 50% 50%; animation: cmAuraBreathe 5.2s ease-in-out infinite; }
.ar-aura-glow i {
  clip-path: var(--clip-big);
  background: conic-gradient(from var(--aura-turn) at 50% 50%, var(--area-mind) 0deg, var(--area-career) 90deg, var(--area-health) 180deg, var(--area-money) 270deg, var(--area-mind) 360deg);
  animation: cmAuraTurn 11s ease-in-out infinite;
}
.ar-aura-core { filter: blur(7px); mix-blend-mode: screen; animation: cmAuraCore 5.2s ease-in-out infinite; }
.ar-aura-core i {
  clip-path: var(--clip);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%),
    conic-gradient(from var(--aura-turn) at 50% 50%, var(--area-mind) 0deg, var(--area-career) 90deg, var(--area-health) 180deg, var(--area-money) 270deg, var(--area-mind) 360deg);
  animation: cmAuraTurn 11s ease-in-out infinite reverse;
}
.ar-aura-sheen {
  clip-path: var(--clip-grid);
  background: conic-gradient(from var(--sheen) at 50% 50%, transparent 0deg 285deg, rgba(255, 236, 220, .16) 340deg, rgba(255, 236, 220, 0) 360deg);
  animation: cmAuraSheen 7.5s linear infinite;
}
.ar-orb {
  position: absolute; width: calc(14px + var(--v, .5) * 26px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--area-c) 0, color-mix(in srgb, var(--area-c) 45%, transparent) 34%, transparent 70%);
  opacity: calc(.4 + var(--v, .5) * .55); mix-blend-mode: screen;
  animation: cmOrbPulse 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.85s);
}
@keyframes cmAuraBreathe { 0%, 100% { transform: scale(1); opacity: .62; } 50% { transform: scale(1.09); opacity: .92; } }
@keyframes cmAuraCore { 0%, 100% { opacity: .32; } 50% { opacity: .62; } }
@keyframes cmAuraTurn { 0%, 100% { --aura-turn: -20deg; } 50% { --aura-turn: 20deg; } }
@keyframes cmAuraSheen { to { --sheen: 360deg; } }
@keyframes cmOrbPulse { 0%, 100% { transform: translate(-50%, -50%) scale(.82); } 50% { transform: translate(-50%, -50%) scale(1.28); } }
/* period change: the aura reshapes with the radar */
.ar-aura.ar-morph .ar-aura-glow i { animation: cmAuraTurn 11s ease-in-out infinite, cmClipBig .75s cubic-bezier(.22,1,.36,1) both; }
.ar-aura.ar-morph .ar-aura-core i { animation: cmAuraTurn 11s ease-in-out infinite reverse, cmClip .75s cubic-bezier(.22,1,.36,1) both; }
.ar-aura.ar-morph .ar-orb { animation: cmOrbPulse 3.4s ease-in-out infinite, cmOrbMove .75s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * -.85s), 0s; }
@keyframes cmClipBig { from { clip-path: var(--clip-big-from); } }
@keyframes cmClip { from { clip-path: var(--clip-from); } }
@keyframes cmOrbMove { from { left: var(--from-x); top: var(--from-y); } }
/* light theme: softer, no screen blending */
[data-theme="light"] .ar-aura { opacity: calc(var(--strength, .8) * .7); }
[data-theme="light"] .ar-aura-core, [data-theme="light"] .ar-orb { mix-blend-mode: normal; }
[data-theme="light"] .ar-aura-sheen { background: conic-gradient(from var(--sheen) at 50% 50%, transparent 0deg 285deg, color-mix(in srgb, var(--accent) 16%, transparent) 340deg, transparent 360deg); }
[data-skin="ember"] .ar-fill { fill: rgba(255, 140, 70, .16); }

/* ---------------- Life balance: rings view ---------------- */
.ar-rings[data-reveal]:not(.in-view) .ar-ring-card { opacity: 0; }
.ar-rings.in-view:not(.no-intro) .ar-ring-card { animation: cmFadeUp .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 75ms); }
.ar-rings.in-view:not(.no-intro) .ar-ring-fill { animation: cmRingSweep 1.1s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.15s + var(--i) * 90ms); }
.ar-ring-fill.ar-ring-morph { animation: cmRingMorph .75s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmRingSweep { from { stroke-dashoffset: var(--ring-c); } }
@keyframes cmRingMorph { from { stroke-dashoffset: var(--ring-from); } }
/* continuous: a soft glow behind each ring breathes, the four a quarter of a breath apart (console only). The glow is
   the ring's own arc stroked wide with a radial gradient (stroke set in the markup) that fades off either side; only its
   opacity changes, so it costs nothing to run, and it sweeps and morphs with its ring. */
.ar-ring-card .ar-ring-glow { stroke-width: 11; stroke-linecap: round; opacity: 0; pointer-events: none; }
.pc .ar-rings.in-view .ar-ring-glow { animation: cmRingGlow 5.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
.pc .ar-rings.in-view:not(.no-intro) .ar-ring-glow { animation: cmRingSweep 1.1s cubic-bezier(.22,1,.36,1) both, cmRingGlow 5.6s ease-in-out infinite; animation-delay: calc(.15s + var(--i) * 90ms), calc(var(--i) * -1.4s); }
.pc .ar-rings.in-view .ar-ring-glow.ar-ring-morph { animation: cmRingMorph .75s cubic-bezier(.22,1,.36,1) both, cmRingGlow 5.6s ease-in-out infinite; animation-delay: 0s, calc(var(--i) * -1.4s); }
@keyframes cmRingGlow { 0%, 100% { opacity: .1; } 50% { opacity: .55; } }
/* once, when a ring's sweep has landed: a thin shine runs along its kept arc */
.ar-ring-card .ar-ring-shine { fill: none; stroke: color-mix(in srgb, var(--tx) 94%, transparent); stroke-width: 2.2; stroke-linecap: round; stroke-dashoffset: var(--l); opacity: 0; pointer-events: none; }
.ar-rings.in-view:not(.no-intro) .ar-ring-shine { animation: cmRingShine 1.05s cubic-bezier(.45, .05, .25, 1) both; animation-delay: calc(1.2s + var(--i) * 90ms); }
@keyframes cmRingShine { 0% { stroke-dashoffset: var(--l); opacity: 0; } 12% { opacity: .95; } 82% { opacity: .95; } 100% { stroke-dashoffset: var(--e); opacity: 0; } }

/* ---------------- The Ascent: six stages, Blueprint language ---------------- */
.pa2 {
  --t0: var(--accent); --t1: var(--accent); --t2: var(--accent); --t3: var(--accent); --t4: var(--accent);
  --t5: color-mix(in srgb, var(--accent) 55%, #d9a13a); --gold: color-mix(in srgb, var(--accent) 40%, #d9a13a);
  --grid: color-mix(in srgb, var(--tx) 5%, transparent); --node: 32px; --gap: 10px; --seg-dur: .34s;
  position: relative;
}
[data-skin="ember"] .pa2 { --t0: #ff5a14; --t1: #ff6c26; --t2: #ff8038; --t3: #ff9a58; --t4: #ffb47c; --t5: #ffd27a; --gold: #ffd27a; --grid: rgba(255, 190, 150, .05); }
.pa2::before {
  content: ''; position: absolute; inset: -16px -18px -4px; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.pa2 > * { position: relative; z-index: 1; }
.pa2-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 14px; padding: 0 2px 12px; border-bottom: 1px solid var(--line); }
.pa2-summary > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pa2-summary b { color: var(--tx); font-size: 20px; font-weight: 400; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-skin="ember"] .pa2-summary b { color: var(--accent-3); }
.pa2-summary b i { color: var(--tx-3); font-size: 13px; font-style: normal; }
.pa2-summary small { color: var(--tx-3); font-size: 10.5px; line-height: 1.25; }

/* the climb: summit on top, base camp at the bottom, a spine in the left gutter */
.pa2-climb { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: 0; padding: 0 0 0 24px; list-style: none; }
.pa2-stage { position: relative; min-width: 0; }
.pa2-node { position: absolute; z-index: 2; left: -22px; top: calc(var(--node) - 6px); width: 12px; height: 12px; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--tx) 22%, transparent); border-radius: 50%; background: var(--bg); }
.pa2-node.is-past { border-color: var(--tone); background: var(--tone); box-shadow: 0 0 8px color-mix(in srgb, var(--tone) 60%, transparent); }
.pa2-node.is-now { left: -24px; top: calc(var(--node) - 8px); width: 16px; height: 16px; border: 3px solid var(--bg); background: var(--tone); box-shadow: 0 0 0 1.5px var(--tone), 0 0 16px color-mix(in srgb, var(--tone) 85%, transparent); }
.pa2-node.is-now::before, .pa2-node.is-now::after { content: ''; position: absolute; inset: -6px; border: 1.5px solid var(--tone); border-radius: inherit; opacity: 0; animation: cmBeaconRing 2.6s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: var(--land, 0s); }
.pa2-node.is-now::after { animation-delay: calc(var(--land, 0s) + 1.3s); }
@keyframes cmBeaconRing { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(2.5); opacity: 0; } }
.pa2-node.is-summit { border-radius: 3px; transform: rotate(45deg); }
.pa2-node.is-summit.is-future { border-color: color-mix(in srgb, var(--gold) 60%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 40%, transparent); }
.pa2-stage.is-reached .pa2-node { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.pa2-seg { position: absolute; z-index: 1; left: -17px; top: var(--node); bottom: calc(-1 * (var(--gap) + var(--node))); width: 2px; border-radius: 2px; background: repeating-linear-gradient(to top, color-mix(in srgb, var(--tx) 20%, transparent) 0 3px, transparent 3px 8px); animation: cmSegFlow 1.4s linear infinite; }
@keyframes cmSegFlow { to { background-position: 0 -8px; } }
.pa2-seg.is-lit { background: linear-gradient(to top, var(--below), var(--tone)); box-shadow: 0 0 10px color-mix(in srgb, var(--tone) 45%, transparent); transform-origin: bottom; animation: none; }
.pa2-seg b { position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 14px var(--tone); opacity: 0; }
[data-theme="light"] .pa2-seg b { background: var(--tone); box-shadow: 0 0 8px var(--tone); }

/* stage cards: Blueprint goal cards with a tone bar, ring, strip and meta */
.pa2-card { position: relative; min-width: 0; padding: 10px 12px 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
[data-skin="ember"] .pa2-card { background: linear-gradient(180deg, rgba(175, 195, 255, .06), rgba(175, 195, 255, .025)); }
.pa2-card::before { content: ''; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--tone); box-shadow: 0 0 12px color-mix(in srgb, var(--tone) 60%, transparent); }
.pa2-stage.is-now .pa2-card { border-color: color-mix(in srgb, var(--tone) 42%, var(--line)); background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--tone) 13%, transparent), transparent 58%), var(--card); box-shadow: 0 16px 36px -20px color-mix(in srgb, var(--tone) 75%, transparent); }
[data-skin="ember"] .pa2-stage.is-now .pa2-card { background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 58%), linear-gradient(180deg, rgba(175, 195, 255, .075), rgba(175, 195, 255, .03)); }
.pa2-stage.is-future .pa2-card { border-style: dashed; border-color: var(--line-2); background: transparent; }
.pa2-stage.is-future .pa2-card::before { display: none; }
.pa2-stage.is-future .pa2-head { opacity: .6; }
.pa2-stage.is-summit .pa2-card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 62%); pointer-events: none; animation: cmSummitGlow 3.6s ease-in-out infinite; }
@keyframes cmSummitGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.pa2-stage.is-reached .pa2-card { border-color: color-mix(in srgb, var(--gold) 48%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 16%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--gold) 70%, transparent); }
.pa2-head { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; }
.pa2-stage.is-compact .pa2-head { align-items: center; }
.pa2-ring { position: relative; flex: none; width: 44px; height: 44px; color: var(--tx); }
.pa2-stage.is-compact .pa2-ring { width: 30px; height: 30px; margin: 0 7px; }
.pa2-ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.pa2-ring circle { fill: none; stroke-width: 3.5; }
.pa2-ring-track { stroke: color-mix(in srgb, var(--tx) 9%, transparent); }
[data-skin="ember"] .pa2-ring-track { stroke: rgba(175, 195, 255, .08); }
.pa2-ring-fill { stroke: var(--tone); stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tone) 55%, transparent)); }
.pa2-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pa2-ring b small { margin-left: 1px; color: var(--tx-3); font-size: 8.5px; font-weight: 600; }
.pa2-stage.is-compact .pa2-ring b { color: var(--tx-3); font-size: 11px; }
.pa2-ring b .pa2-peak { width: 15px; height: 15px; overflow: visible; transform: none; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pa2-titles { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.pa2-titles small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 16px; }
.pa2-titles small i { color: var(--tone); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pa2-titles b { color: var(--tx); font-size: 16px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pa2-stage.is-compact .pa2-titles b { color: var(--tx-2); font-size: 14px; }
.pa2-titles em { overflow: hidden; color: var(--tx-3); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa2-titles small .pa2-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); border-radius: 999px; letter-spacing: .05em; }
.pa2-titles small .pa2-chip-now { background: color-mix(in srgb, var(--tone) 14%, transparent); }
.pa2-titles small .pa2-chip-gold { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); }
.pa2-beacon { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 6px var(--tone); }
.pa2-beacon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--tone); animation: cmBeaconDot 1.8s ease-out infinite; }
@keyframes cmBeaconDot { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
.pa2-titles small .pa2-when { margin-left: auto; color: var(--tx-3); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 15-day strip: each bar fills with the share of planned reps kept */
.pa2-days { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); margin: 12px -2px 0; }
.pa2-day { position: relative; display: block; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
span.pa2-day { cursor: default; }
.pa2-day i { position: absolute; left: 0; right: 0; bottom: 7px; width: min(10px, calc(100% - 5px)); height: 26px; margin: 0 auto; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--tx) 8%, transparent); transform-origin: bottom; }
.pa2-day i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--tone); transform-origin: bottom; }
.pa2-day.is-kept i { background: color-mix(in srgb, var(--tone) 22%, transparent); box-shadow: 0 0 9px color-mix(in srgb, var(--tone) 55%, transparent); }
.pa2-day.is-partial i::after { background: color-mix(in srgb, var(--tone) 68%, transparent); }
.pa2-day.is-missed i, .pa2-day.is-open i { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 22%, transparent); }
.pa2-day.is-rest i { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--tx) 24%, transparent); }
.pa2-day.is-future i { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 11%, transparent); }
.pa2-day.is-today i { box-shadow: 0 0 0 1.5px var(--tx), 0 0 12px color-mix(in srgb, var(--tone) 50%, transparent); }
.pa2-day.is-today::before { content: ''; position: absolute; left: 50%; top: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 6px var(--tone); }
.pa2-day[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--tone); }
.pa2-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pa2-meta { margin: 6px 0 0; color: var(--tx-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.pa2-stage.is-compact .pa2-meta { display: none; }
.pa2-today { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tone) 10%, transparent); font-size: 12.5px; }
.pa2-today span { color: var(--tx); font-weight: 600; }
.pa2-today i { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--tx) 10%, transparent); }
.pa2-today i b { display: block; height: 100%; border-radius: inherit; background: var(--tone); box-shadow: 0 0 8px var(--tone); transform-origin: left; }
.pa2-today em { color: var(--tx-2); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa2 .pd-day-detail { margin-top: 10px; }
/* summit reached: a crown of sparks around the ring */
.pa2-sparks { position: absolute; left: 36px; top: 32px; width: 0; height: 0; pointer-events: none; }
.pa2-sparks i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); transform: rotate(var(--a)) translateX(30px); opacity: .85; animation: cmTwinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--n) * -.4s); }
.pa2-sparks i:nth-child(1) { --a: -150deg; --n: 0; } .pa2-sparks i:nth-child(2) { --a: -110deg; --n: 1; } .pa2-sparks i:nth-child(3) { --a: -70deg; --n: 2; }
.pa2-sparks i:nth-child(4) { --a: -30deg; --n: 3; } .pa2-sparks i:nth-child(5) { --a: 150deg; --n: 4; } .pa2-sparks i:nth-child(6) { --a: 30deg; --n: 5; }
@keyframes cmTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ascent intro: cards cascade up from base camp, the spine lights stage by stage with a
   light riding it, rings fill, day bars pop in order, then the Now beacon lands */
.pa2[data-reveal]:not(.in-view) :is(.pa2-summary > div, .pa2-card, .pa2-node, .pa2-seg.is-lit) { opacity: 0; }
.pa2.in-view:not(.no-intro) .pa2-summary > div { animation: cmFadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.pa2.in-view:not(.no-intro) .pa2-summary > div:nth-child(2) { animation-delay: .06s; }
.pa2.in-view:not(.no-intro) .pa2-summary > div:nth-child(3) { animation-delay: .12s; }
.pa2.in-view:not(.no-intro) .pa2-summary > div:nth-child(4) { animation-delay: .18s; }
.pa2.in-view:not(.no-intro) .pa2-card { animation: cmFadeUp .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.06s + (5 - var(--i)) * 50ms); }
.pa2.in-view:not(.no-intro) .pa2-node { animation: cmPop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(.35s + var(--i) * var(--seg-dur)); }
.pa2.in-view:not(.no-intro) .pa2-node.is-summit { animation-name: cmPopDiamond; }
.pa2.in-view:not(.no-intro) .pa2-stage.is-future .pa2-node { animation-delay: calc(.3s + var(--i) * 60ms); }
@keyframes cmPopDiamond { 0% { transform: rotate(45deg) scale(0); opacity: 0; } 60% { transform: rotate(45deg) scale(1.5); opacity: 1; } 100% { transform: rotate(45deg) scale(1); } }
.pa2.in-view:not(.no-intro) .pa2-seg.is-lit { animation: cmGrowY var(--seg-dur) linear both; animation-delay: calc(.35s + var(--seg) * var(--seg-dur)); }
.pa2.in-view:not(.no-intro) .pa2-seg.is-lit b { animation: cmClimbSeg var(--seg-dur) linear backwards; animation-delay: calc(.35s + var(--seg) * var(--seg-dur)); }
.pa2.in-view:not(.no-intro) .pa2-seg.is-last b { animation: cmClimbLast calc(var(--seg-dur) + .3s) cubic-bezier(.3,.6,.3,1) both; animation-delay: calc(.35s + var(--seg) * var(--seg-dur)); }
@keyframes cmClimbSeg { 0% { bottom: 0; opacity: 1; } 100% { bottom: calc(100% - 8px); opacity: 1; } }
@keyframes cmClimbLast { 0% { bottom: 0; opacity: 1; transform: scale(1); } 70% { bottom: calc(100% - 8px); opacity: 1; transform: scale(1); } 100% { bottom: calc(100% - 8px); opacity: 0; transform: scale(2.4); } }
.pa2.in-view:not(.no-intro) .pa2-ring-fill { animation: cmBpRing 1.15s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.3s + var(--i) * 70ms); }
.pa2.in-view:not(.no-intro) .pa2-day i { animation: cmCellPop .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(.32s + var(--i) * 70ms + var(--k) * 26ms); }
.pa2.in-view:not(.no-intro) .pa2-day i::after { animation: cmGrowY .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.45s + var(--i) * 70ms + var(--k) * 26ms); }
.pa2.in-view:not(.no-intro) .pa2-today i b { animation: cmGrowX .9s cubic-bezier(.22,1,.36,1) both; animation-delay: .7s; }
.pa2.in-view:not(.no-intro) .pa2-sparks i { animation: cmSparkOut .8s cubic-bezier(.2,.9,.3,1.2) both, cmTwinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--land) + var(--n) * 50ms), calc(var(--land) + .8s + var(--n) * -.4s); }
@keyframes cmSparkOut { from { transform: rotate(var(--a)) translateX(6px); opacity: 0; } }
.pa2.no-intro .pa2-node.is-now::before { animation-delay: 0s; }
.pa2.no-intro .pa2-node.is-now::after { animation-delay: 1.3s; }
.pa-grid summary { padding-left: 2px; }
.pa-grid[open] .pd-cell { transform-box: fill-box; transform-origin: center; animation: cmCellIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--cell-step, 0) * 16ms); }
@keyframes cmCellIn { from { transform: scale(.2); opacity: 0; } }

/* ---------------- Purpose Blueprint ---------------- */
.pb2 {
  --grid: color-mix(in srgb, var(--tx) 5%, transparent);
  position: relative; margin-top: 16px; padding: 14px; border-radius: 22px; border: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--card) 65%, transparent);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
[data-skin="ember"] .pb2 { --grid: rgba(255, 190, 150, .05); background-color: rgba(175, 195, 255, .025); }
.pb2-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 14px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); }
.pb2-summary > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb2-summary b { font-size: 20px; font-weight: 400; letter-spacing: -.02em; color: var(--tx); font-variant-numeric: tabular-nums; }
[data-skin="ember"] .pb2-summary b { color: var(--accent-3); }
.pb2-summary b i { font-style: normal; font-size: 13px; color: var(--tx-3); }
.pb2-summary small { font-size: 10.5px; line-height: 1.25; color: var(--tx-3); }
.pb2-goals, .pb2-subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pb2-goal { position: relative; padding: 14px 14px 14px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
[data-skin="ember"] .pb2-goal { background: linear-gradient(180deg, rgba(175, 195, 255, .06), rgba(175, 195, 255, .025)); }
.pb2-goal::before { content: ''; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--tone); box-shadow: 0 0 12px color-mix(in srgb, var(--tone) 60%, transparent); }
.pb2-depth-1 { padding: 10px 10px 10px 10px; border-radius: 14px; background: color-mix(in srgb, var(--tone) 7%, transparent) !important; }
.pb2-depth-1::before { display: none; }
.pb2-head { display: flex; align-items: center; gap: 12px; }
.pb2-ring { position: relative; flex: none; width: 50px; height: 50px; padding: 0; border: 0; background: none; color: var(--tx); cursor: pointer; }
.pb2-depth-1 .pb2-ring { width: 36px; height: 36px; }
.pb2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pb2-ring circle { fill: none; stroke-width: 4; }
.pb2-ring-track { stroke: var(--card-2); }
[data-skin="ember"] .pb2-ring-track { stroke: rgba(175, 195, 255, .08); }
.pb2-ring-fill { stroke: var(--tone); stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tone) 55%, transparent)); }
.pb2-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pb2-depth-1 .pb2-ring b { font-size: 10.5px; }
.pb2-ring b small { font-size: 9px; font-weight: 600; color: var(--tx-3); }
.pb2-ring b > span + small { margin-left: 1px; }
.pb2-ring b { grid-auto-flow: column; justify-content: center; align-items: center; }
.pb2-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.pb2-titles small { display: flex; gap: 6px; flex-wrap: wrap; }
.pb2-titles small i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tone); }
.pb2-titles small i.pb2-arc { padding: 0 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); letter-spacing: .04em; }
.pb2-titles b { font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pb2-depth-1 .pb2-titles b { font-size: 14px; }
.pb2-titles em { font-style: normal; font-size: 12px; color: var(--tx-3); }
.pb2-body { position: relative; margin: 10px 0 0 24px; padding-left: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pb2-depth-1 .pb2-body { margin: 8px 0 0 17px; padding-left: 16px; }
.pb2-body::before { content: ''; position: absolute; left: 0; top: -8px; bottom: 8px; width: 2px; border-radius: 2px; transform-origin: top; background: linear-gradient(var(--tone), color-mix(in srgb, var(--tone) 12%, transparent)); }
.pb2-body::after { content: ''; position: absolute; left: -1px; top: -8px; width: 4px; height: 26px; border-radius: 4px; background: linear-gradient(transparent, rgba(255, 255, 255, .85), transparent); opacity: 0; animation: cmSpineFlow 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); pointer-events: none; }
@keyframes cmSpineFlow { 0% { top: -8px; opacity: 0; } 15% { opacity: .6; } 80% { opacity: .5; } 100% { top: calc(100% - 22px); opacity: 0; } }
[data-theme="light"] .pb2-body::after { background: linear-gradient(transparent, color-mix(in srgb, var(--tone) 80%, #fff), transparent); }
.pb2-block, .pb2-subs > li { position: relative; }
.pb2-block::before, .pb2-subs > li::after { content: ''; position: absolute; left: -25px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); border: 2px solid var(--tone); }
.pb2-depth-1 .pb2-block::before { left: -21px; }
.pb2-subs > li::after { top: 16px; }
.pb2-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.pb2-label b { letter-spacing: 0; font-weight: 700; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.pb2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb2-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--tx) 3%, transparent); color: var(--tx); font: inherit; font-size: 13px; cursor: pointer; }
.pb2-chip-name { min-width: 0; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2-week { display: inline-flex; gap: 2px; }
.pb2-week em { width: 4px; height: 11px; border-radius: 2px; background: color-mix(in srgb, var(--tx) 14%, transparent); }
.pb2-week em.on { background: var(--tone); box-shadow: 0 0 5px color-mix(in srgb, var(--tone) 70%, transparent); }
.pb2-week em.off { opacity: .35; }
.pb2-chip b { font-size: 12px; font-weight: 700; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.pb2-chip b small { font-size: 10px; color: var(--tx-3); }
.pb2-chip-ghost { border-style: dashed; background: none; }
.pb2-chip-ghost b { color: var(--accent); }
.pb2-bar { height: 4px; margin-bottom: 6px; border-radius: 2px; background: var(--card-2); overflow: hidden; }
[data-skin="ember"] .pb2-bar { background: rgba(175, 195, 255, .08); }
.pb2-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tone); transform-origin: left; }
.pb2-tasks { list-style: none; margin: 0; padding: 0; }
.pb2-tasks li { display: flex; align-items: center; min-height: 40px; }
.pb2-check { flex: none; width: 36px; height: 40px; margin-left: -8px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.pb2-check svg { width: 20px; height: 20px; }
.pb2-check rect { fill: none; stroke: var(--tx-3); stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.pb2-check path { fill: none; stroke: var(--on-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.pb2-check:hover rect { stroke: var(--tone); }
.pb2-task { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; color: var(--tx); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pb2-task span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2-task small { flex: none; font-size: 12px; color: var(--tx-3); }
.pb2-task small.late { color: #e0604f; }
.pb2-more { min-height: 32px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pb2-alldone { margin: 2px 0 0; font-size: 12.5px; color: var(--tx-3); }
.pb2-empty { margin: 8px 0 0 62px; font-size: 12.5px; color: var(--tx-3); }
.pb2-empty button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.pb2-unlinked { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
/* blueprint intro */
.pb2[data-reveal]:not(.in-view) :is(.pb2-goal, .pb2-summary > div, .pb2-unlinked) { opacity: 0; }
.pb2.in-view:not(.no-intro) .pb2-summary > div { animation: cmFadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.pb2.in-view:not(.no-intro) .pb2-summary > div:nth-child(2) { animation-delay: .06s; }
.pb2.in-view:not(.no-intro) .pb2-summary > div:nth-child(3) { animation-delay: .12s; }
.pb2.in-view:not(.no-intro) .pb2-summary > div:nth-child(4) { animation-delay: .18s; }
.pb2.in-view:not(.no-intro) .pb2-goal { animation: cmFadeUp .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.15s + var(--i) * 90ms); }
.pb2.in-view:not(.no-intro) .pb2-body::before { animation: cmGrowY .8s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.4s + var(--i) * 90ms); }
.pb2.in-view:not(.no-intro) .pb2-ring-fill { animation: cmBpRing 1.15s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.3s + var(--i) * 90ms); }
@keyframes cmBpRing { from { stroke-dashoffset: var(--c); } }
.pb2.in-view:not(.no-intro) .pb2-chip { animation: cmChipIn .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(.55s + var(--i) * 90ms + var(--k, 0) * 45ms); }
@keyframes cmChipIn { from { opacity: 0; transform: scale(.85) translateY(6px); } }
.pb2.in-view:not(.no-intro) .pb2-bar i { animation: cmGrowX .9s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.6s + var(--i) * 90ms); }
.pb2.in-view:not(.no-intro) .pb2-tasks li { animation: cmTaskIn .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.65s + var(--i) * 90ms + var(--k, 0) * 60ms); }
@keyframes cmTaskIn { from { opacity: 0; transform: translateX(-8px); } }
.pb2.in-view:not(.no-intro) .pb2-unlinked { animation: cmFadeUp .5s .7s both; }

/* ---------------- Purpose Blueprint (pb3) ---------------- */
/* The numbers count up (chart-motion.js), each goal card rises (v171.css), its ring draws in turn, its habit
   chips pop 40 ms apart and the next-task row fades in last. The host is [data-reveal="pb-blueprint"]. */
.pb3[data-reveal]:not(.in-view) :is(.pb3-stats > div, .pb3-goal, .pb3-unlinked) { opacity: 0; }
.pb3.in-view:not(.no-intro) .pb3-ring-fill { animation-delay: calc(.4s + var(--i, 0) * 70ms); }
.pb3.in-view:not(.no-intro) .pb3-chip { animation: cmChipIn .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(.6s + var(--i, 0) * 70ms + var(--k, 0) * 40ms); }
.pb3.in-view:not(.no-intro) .pb3-next { animation: cmFade .55s ease both; animation-delay: calc(.95s + var(--i, 0) * 70ms); }
.pb3.in-view:not(.no-intro) .pb3-unlinked { animation: cmFadeUp .5s cubic-bezier(.22,1,.36,1) 1.15s both; }
.pb3.in-view:not(.no-intro) .pb3-unlinked .pb3-chip { animation-delay: calc(1.2s + var(--k, 0) * 40ms); }

/* ---------------- Habits: activity wave ---------------- */
.ember-activity[data-reveal]:not(.in-view) .ember-col i { opacity: 0; }
.ember-activity.in-view:not(.no-intro) .ember-col i { animation: cmCellPop .45s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--c, 0) * 55ms + var(--r, 0) * 30ms); }
@keyframes cmCellPop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
.ember-col.today i.on { animation: cmTodayCell 2.8s ease-in-out infinite; }
@keyframes cmTodayCell { 0%, 100% { box-shadow: 0 0 6px rgba(255, 255, 255, .25); } 50% { box-shadow: 0 0 14px rgba(255, 200, 160, .55); } }

/* ---------------- Today: entry choreography ---------------- */
.screen.anim .ember-day { animation: cmFadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.screen.anim .ember-day-ring circle.fill { animation: cmDaySweep 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmDaySweep { from { stroke-dashoffset: 100.5; } }
.screen.anim .ember-day:nth-child(2), .screen.anim .ember-day:nth-child(2) circle.fill { animation-delay: .04s; }
.screen.anim .ember-day:nth-child(3), .screen.anim .ember-day:nth-child(3) circle.fill { animation-delay: .08s; }
.screen.anim .ember-day:nth-child(4), .screen.anim .ember-day:nth-child(4) circle.fill { animation-delay: .12s; }
.screen.anim .ember-day:nth-child(5), .screen.anim .ember-day:nth-child(5) circle.fill { animation-delay: .16s; }
.screen.anim .ember-day:nth-child(6), .screen.anim .ember-day:nth-child(6) circle.fill { animation-delay: .2s; }
.screen.anim .ember-day:nth-child(7), .screen.anim .ember-day:nth-child(7) circle.fill { animation-delay: .24s; }
.ember-day.today .ember-day-ring { animation: cmTodayGlow 3.2s ease-in-out infinite; }
@keyframes cmTodayGlow { 0%, 100% { box-shadow: 0 0 14px rgba(255, 106, 26, .35); } 50% { box-shadow: 0 0 26px rgba(255, 106, 26, .7); } }
.screen.anim .tr-tile { animation: cmFadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.screen.anim .tr-ring-fill { animation: cmTrSweep 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmTrSweep { from { stroke-dashoffset: 94.25; } }
.screen.anim .tr-tile:nth-child(2), .screen.anim .tr-tile:nth-child(2) .tr-ring-fill { animation-delay: .06s; }
.screen.anim .tr-tile:nth-child(3), .screen.anim .tr-tile:nth-child(3) .tr-ring-fill { animation-delay: .12s; }
.screen.anim .tr-tile:nth-child(4), .screen.anim .tr-tile:nth-child(4) .tr-ring-fill { animation-delay: .18s; }
.screen.anim .tr-tile:nth-child(5), .screen.anim .tr-tile:nth-child(5) .tr-ring-fill { animation-delay: .24s; }
.screen.anim .tr-tile:nth-child(n + 6), .screen.anim .tr-tile:nth-child(n + 6) .tr-ring-fill { animation-delay: .3s; }
.screen.anim .arc-progress i { transform-origin: left; animation: cmGrowX 1.2s .35s cubic-bezier(.22,1,.36,1) both; }
.screen.anim .hr-group { animation: cmFadeUp .55s cubic-bezier(.22,1,.36,1) both; animation-delay: .25s; }
.screen.anim .hr-group + .hr-group { animation-delay: .33s; }
.screen.anim .hr-group + .hr-group + .hr-group { animation-delay: .41s; }
.tr-value[data-len="5"] { font-size: 11.5px; }
.tr-value[data-len="6"], .tr-value[data-len="7"] { font-size: 10.5px; }

/* ---------------- Arc map: living ribbons ---------------- */
.brain-map-flow .brain-ribbon { animation: cmRibbon 5.5s ease-in-out infinite; }
.brain-map-flow .brain-ribbon:nth-of-type(3n + 2) { animation-delay: -1.8s; }
.brain-map-flow .brain-ribbon:nth-of-type(3n) { animation-delay: -3.6s; }
@keyframes cmRibbon { 0%, 100% { fill-opacity: calc(var(--flow-ribbon, .85) * .72); } 50% { fill-opacity: var(--flow-ribbon, .85); } }

/* ---------------- Today: fused list ---------------- */
.hr-head-actions { display: inline-flex; align-items: center; gap: 6px; }
.hr-add-btn { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--accent); font: inherit; font-size: 21px; font-weight: 300; line-height: 1; cursor: pointer; transition: transform .28s cubic-bezier(.3,1.4,.5,1), background .2s, border-color .2s; }
.hr-add-btn.open { transform: rotate(45deg); background: var(--accent-soft); border-color: var(--accent-line); }
.hr-today-add { overflow: hidden; margin: 0 0 4px; animation: cmAddIn .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes cmAddIn { from { opacity: 0; max-height: 0; transform: translateY(-6px); } to { max-height: 140px; } }
.tk-inline { min-height: 56px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tk-inline .tk-body b { font-size: 15px; font-weight: 600; }
.tk-inline.done > * { opacity: .5; }
.tk-inline.done .tk-check { opacity: .7; }
.tk-check rect { fill: none; stroke: var(--tx-3); stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.tk-check[aria-pressed="true"] rect, .tk-row.completing .tk-check rect { fill: var(--accent); stroke: var(--accent); }
[data-skin="ember"] .tk-check[aria-pressed="true"] rect, [data-skin="ember"] .tk-row.completing .tk-check rect { filter: drop-shadow(0 0 6px rgba(255, 106, 26, .55)); }
.tk-check:hover rect { stroke: var(--accent); }
.tk-inline .tk-star { width: 34px; color: var(--accent); font-size: 15px; }
.tk-inline-due { flex: none; margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--tx-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-inline-due.late { color: #e0604f; }
[data-theme="light"] .tk-inline-due.late { color: #b8402f; }

/* ---------------- "How'd it feel?" strip ---------------- */
.hr-feel { position: relative; display: flex; align-items: center; gap: 4px; margin: 6px 0 8px; padding: 3px 3px 3px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
[data-skin="ember"] .hr-feel { background: rgba(175, 195, 255, .06); border-color: rgba(160, 185, 255, .14); box-shadow: 0 6px 22px rgba(0, 0, 0, .25); }
.hr-feel.enter { animation: cmFeelIn .4s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes cmFeelIn { from { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; transform: translateY(-8px) scale(.96); } to { max-height: 60px; } }
.hr-feel-q { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-feel-opts { display: flex; }
.hr-feel-opts button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 19px; line-height: 1; cursor: pointer; transition: transform .15s; }
.hr-feel-opts button:active { transform: scale(1.3); }
.hr-feel.enter .hr-feel-opts button { animation: cmFeelPop .45s cubic-bezier(.3,1.6,.5,1) both; }
.hr-feel.enter .hr-feel-opts button:nth-child(2) { animation-delay: .05s; }
.hr-feel.enter .hr-feel-opts button:nth-child(3) { animation-delay: .1s; }
.hr-feel.enter .hr-feel-opts button:nth-child(4) { animation-delay: .15s; }
.hr-feel.enter .hr-feel-opts button:nth-child(5) { animation-delay: .2s; }
@keyframes cmFeelPop { from { opacity: 0; transform: scale(.4) translateY(6px); } }
.hr-feel-x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tx-3); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.hr-feel::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); opacity: .45; transform-origin: left; animation: cmFeelTimer var(--feel-ms, 7000ms) linear forwards; }
@keyframes cmFeelTimer { to { transform: scaleX(0); } }
.hr-feel.answered { justify-content: center; padding-left: 3px; }
.hr-feel.answered::after { display: none; }
.hr-feel-done { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-size: 13px; font-weight: 600; color: var(--tx); animation: cmFade .3s both; }
.hr-feel-done i { font-style: normal; font-size: 20px; animation: cmFeelEmoji .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes cmFeelEmoji { 0% { transform: scale(.4); } 50% { transform: scale(1.55) rotate(-10deg); } 100% { transform: none; } }

/* ---------------- continuous motion only runs on screen ---------------- */
/* chart-motion.js marks a [data-live] host .is-away while it is off screen; everything inside holds its frame. */
.is-away, .is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .ar-aura *, .ar-aura, .pb2-body::after, .brain-map-flow .brain-ribbon,
  .ember-day.today .ember-day-ring, .ember-col.today i.on, .hr-feel::after, [data-reveal] *, .screen.anim *,
  .pa2-seg, .pa2-node::before, .pa2-node::after, .pa2-beacon::after, .pa2-card::after, .pa2-sparks i { animation: none !important; }
}
[data-motion="reduced"] :is(.ar-aura, .ar-aura *, .brain-map-flow .brain-ribbon, .ember-day.today .ember-day-ring, .ember-col.today i.on, [data-reveal] *, .screen.anim *, .pa2-seg, .pa2-sparks i) { animation: none !important; }
[data-motion="reduced"] :is(.pa2-node, .pa2-beacon, .pa2-card)::before, [data-motion="reduced"] :is(.pa2-node, .pa2-beacon, .pa2-card)::after { animation: none !important; }
[data-motion="reduced"] .pb2-body::after, [data-motion="reduced"] .hr-feel::after { animation: none !important; opacity: 0; }
/* the Progress hosts: nothing inside the console, Activity or the Blueprint animates, pseudo-elements included */
@media (prefers-reduced-motion: reduce) {
  .pc *, .pc *::before, .pc *::after, .pl-activity *, .pl-activity *::before, .pl-activity *::after, .pb3 *, .pb3 *::before, .pb3 *::after { animation: none !important; }
}
[data-motion="reduced"] :is(.pc, .pl-activity, .pb3) *, [data-motion="reduced"] :is(.pc, .pl-activity, .pb3) *::before, [data-motion="reduced"] :is(.pc, .pl-activity, .pb3) *::after { animation: none !important; }

/* Device matrix 2026-10-19, touch targets: the "+" is 34px; the halo makes it 44px. */
.hr-add-btn { position: relative; }
.hr-add-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }