/* Projex visual pass 2026-09-24 (pxm-*). Builds on the shared CRYO-MOTION-KIT
   (cryo-unified.css + /assets/js/cryo-anim.js). Scoped; light theme only (Projex has no dark mode). */
:root{--pxm-accent:#0d7a73;--pxm-accent2:#0da7a0}

/* ── Living hero (dashboard + signed-out landing) ── */
.pxm-hero{--app-accent:#0d7a73;display:flex;gap:22px;align-items:center;margin:12px 0 4px;padding:20px 22px;box-shadow:0 14px 34px rgba(13,122,115,.22)}
.pxm-hero-copy{flex:1;min-width:0}
.pxm-kicker{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.pxm-hero h2{margin:0 0 10px;font-size:clamp(20px,2.6vw,26px);line-height:1.2;color:#fff}
.pxm-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pxm-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);font-size:14px;font-weight:700;color:#fff}
.pxm-chip.is-warn{background:#fff;color:#991b1b;border-color:#fff}
.pxm-hero .cryo-streak{min-height:32px}
.pxm-hero .cryo-ring-label{color:#fff}
@media (max-width:560px){.pxm-hero{flex-direction:column;align-items:flex-start;padding:18px}}

/* Tip card under the hero */
.pxm-tip{margin:10px 0 0;--app-accent:#0d7a73;background:#eef8f7}

/* ── Project / category cards: ring + lift ── */
.tess-card,.cat-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}
.tess-card:hover,.cat-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,52,78,.12)}
.pxm-card-ring{position:absolute;top:12px;right:12px}
.pxm-card-ring .cryo-ring-label b{color:#0f172a}
.tess-card.has-ring .tess-card-name,.cat-card.has-ring h3{padding-right:62px}
.cat-card.has-ring .meta{padding-right:62px}
.pxm-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:13px;font-weight:700;margin-right:6px}
.pxm-pill.is-warn{background:rgba(239,68,68,.12);color:#991b1b}
.pxm-pill.is-today{background:rgba(245,158,11,.16);color:#92400e}
.pxm-pill.is-done{background:rgba(34,197,94,.14);color:#166534}

/* ── Empty states (kit .cryo-empty) tuned to Projex ── */
.pxm-empty{margin-top:20px;--app-accent:#0d7a73}
.pxm-empty .cryo-empty-ic{background:rgba(13,167,160,.12)}
.pxm-empty .cryo-empty-cta{background:#0d7a73;color:#fff;text-decoration:none;font-weight:700}
.pxm-empty .cryo-empty-cta.is-soft{background:#fff;color:#0d7a73;border:1px solid rgba(13,122,115,.35);margin-left:8px}
.pxm-empty p{margin:0 auto;max-width:48ch;color:#475569;font-size:15px;line-height:1.55}

/* ── Project page: progress ring beside the % label ── */
.pxm-proj-ring{flex:none}
.tess-progress.pxm-has-ring .tess-progress-track{display:none}
.pxm-proj-ring .cryo-ring-label b{color:#0d7a73}

/* ── Gantt bar grow-in (class added once by motion.js, removed after) ── */
@keyframes pxm-grow{from{clip-path:inset(0 100% 0 0 round 4px)}to{clip-path:inset(0 0 0 0 round 4px)}}
.gt-bar.pxm-grow{animation:pxm-grow .55s cubic-bezier(.22,.61,.36,1) both}

/* ── Completion moment ── */
.tess-flash[data-pxm-complete]{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tess-flash[data-pxm-complete]::before{content:"\2713";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#16a34a;color:#fff;font-weight:900;flex:none}
.pxm-flash-streak{font-weight:700;color:#92400e}
#pxm-done-share .pxg-share{margin-top:10px}

/* ── Signed-out landing hero ── */
.pxm-land{margin:6px 0 22px;padding:28px 26px}
.pxm-land-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}
body.cryo-app .pxm-land h1{color:#fff;font-size:clamp(26px,3.4vw,36px);line-height:1.15;margin:0 0 12px}
.pxm-land .lead{color:rgba(255,255,255,.92)!important;font-size:16.5px!important;max-width:58ch}
.pxm-land .lead strong{color:#fff}
.pxm-land .kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px}
.pxm-land .b2-btn-demo{background:#fff;color:#4c1d95;border-color:#fff;box-shadow:0 8px 20px rgba(4,40,38,.25)}
.pxm-land .b2-btn-primary{background:#fbbf24;color:#3b2604}
.pxm-land .b2-btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.pxm-land .b2-cta{margin-bottom:0}
@media (max-width:820px){.pxm-land-grid{grid-template-columns:1fr}.pxm-land{padding:22px 18px}}

/* Mini Gantt (real demo-project bars) */
.pxm-mini{background:#fff;color:#0f172a;border-radius:18px;padding:16px 16px 14px;box-shadow:0 22px 44px rgba(4,40,38,.28)}
.pxm-mini-head{display:flex;align-items:center;gap:8px;font-size:15px}
.pxm-mini-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#0da7a0,#31bfd8);font-size:14px}
.pxm-mini-stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 8px;font-size:13px;color:#475569}
.pxm-mini-stats b{font-size:18px;color:#0d7a73;font-variant-numeric:tabular-nums;margin-right:2px}
.pxm-mini-scale{display:flex;justify-content:space-between;margin-left:38%;font-size:11px;font-weight:700;color:#64748b;padding:0 2px 4px;border-bottom:1px solid rgba(16,52,78,.08)}
.pxm-mini-row{display:grid;grid-template-columns:38% 1fr;align-items:center;min-height:30px}
.pxm-mini-name{font-size:12.5px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.pxm-mini-track{position:relative;height:30px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(16,52,78,.07) calc(25% - 1px) 25%)}
.pxm-bar{position:absolute;top:8px;height:14px;border-radius:5px;animation:pxm-grow .7s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 110ms + 200ms)}
.pxm-bar.is-open,.pxm-dot.is-open{background:#64748b}
.pxm-bar.is-prog,.pxm-dot.is-prog{background:#f59e0b}
.pxm-bar.is-done,.pxm-dot.is-done{background:#22c55e}
.pxm-mini-legend{display:flex;gap:14px;margin-top:8px;font-size:12px;color:#475569}
.pxm-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.pxm-mini-link{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:#5b3fd9;font-weight:700;font-size:14px;text-decoration:none}
.pxm-mini-link:hover{text-decoration:underline}

/* Landing feature cards: icon pop on hover */
.b2-card{transition:transform .2s ease,box-shadow .2s ease}
.b2-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,52,78,.1)}

/* ── Guide: illustrated timeline + step badges ── */
.pxm-fig{margin:6px 0 12px;padding:14px 14px 10px;border-radius:14px;background:#f8fafc;border:1px solid rgba(16,52,78,.08)}
.pxm-fig-cap{font-size:13px;color:#64748b;margin:6px 0 0}
.pxm-fig-grid{position:relative;display:grid;grid-template-columns:30% 1fr;row-gap:4px}
.pxm-fig-grid .pxm-mini-name{font-size:13px}
.pxm-fig-track{position:relative;height:28px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(16,52,78,.06) calc(10% - 1px) 10%)}
.pxm-fig-track .pxm-bar{top:7px}
.pxm-bar.is-late{background:#dc2626}
.pxm-bar.is-done{opacity:.55}
.pxm-fig-today{position:absolute;top:0;bottom:0;width:2px;background:#7c5cff;left:calc(30% + 70% * .55)}
.pxm-fig-today::after{content:"today";position:absolute;top:-2px;left:4px;font-size:10px;font-weight:800;color:#5b3fd9;text-transform:uppercase}
.pxm-steps{counter-reset:pxs;list-style:none;padding-left:0!important}
.pxm-steps>li{position:relative;padding-left:42px;counter-increment:pxs}
.pxm-steps>li::before{content:counter(pxs);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0da7a0,#31bfd8);color:#04181d;font-weight:800;font-size:14px}

@media (prefers-reduced-motion:reduce){
  .gt-bar.pxm-grow,.pxm-bar{animation:none!important}
  .tess-card,.cat-card,.b2-card{transition:none}
  .tess-card:hover,.cat-card:hover,.b2-card:hover{transform:none}
}