/* ============================================================
   cdn/demo_weekly_analysis.css
   ENGINE STYLESHEET — loaded async via <link rel="preload">,
   then promoted to a real stylesheet once downloaded, so it
   simply cascades OVER demo_weekly_analysis.css (same class
   names, later in source order = wins). This file owns every
   painted texture, 3D tilt, spring-physics entrance, and the
   hand-drawn discipline visuals. Nothing here should be load-
   bearing for legibility — if it fails to load, the light CSS
   already left the page usable.

   Motion model:
   - html[data-input="touch"]  → ambient physics animations run
     automatically (no hover exists on touch, so motion has to
     announce itself). Set by inline JS via a pointer/hover query.
   - html[data-input="fine"]   → components stay calm at rest and
     only escalate into full 3D on :hover.
   - html.reduced-motion       → every animation above is stripped.
   ============================================================ */

:root{
    --paper:#f4ecd8;
    --ink:#1c1408;
    --gold:#f59e0b;
    --good:#22c55e;
    --bad:#ef4444;
    --spring:cubic-bezier(0.34,1.56,0.64,1);
    --spring-soft:cubic-bezier(0.22,1,0.36,1);
}

/* ===== TYPE UPGRADE ===== */
h1,h2,h3,h4,.nav-logo-text,.stat-big,.ring-value,.week-switcher-label span:first-of-type{
    font-family:"Space Grotesk",var(--font-sans);
}
.ink-highlight{
    position:relative;color:var(--accent-light);
    background:linear-gradient(120deg,rgba(59,130,246,.22),rgba(59,130,246,0) 90%);
    padding:0 .15em;border-radius:4px;
}

/* ===== AMBIENT BACKGROUND WASH ===== */
body{
    background:
        radial-gradient(ellipse 900px 500px at 12% 0%, rgba(59,130,246,.09), transparent 60%),
        radial-gradient(ellipse 700px 500px at 90% 20%, rgba(96,165,250,.06), transparent 55%),
        var(--bg);
}

/* ===== SCROLL PROGRESS UPGRADE ===== */
.scroll-progress{
    background:linear-gradient(90deg,var(--accent),var(--gold));
    box-shadow:0 0 10px var(--accent-glow);
}

/* ===== NAVBAR: floating pill on desktop ===== */
@media(min-width:1024px){
    .site-header{
        top:10px;left:50%;transform:translateX(-50%);
        width:calc(100% - 20px);max-width:calc(var(--max-width) + 20px);
        border-radius:18px;background:rgba(10,14,23,.72);
        backdrop-filter:blur(18px) saturate(140%);
        -webkit-backdrop-filter:blur(18px) saturate(140%);
        box-shadow:0 15px 40px rgba(0,0,0,.35);
    }
    main{padding-top:calc(var(--nav-h) + 2.2rem)}
}
.nav-links a{position:relative;overflow:hidden}
.nav-links a::before{
    content:'';position:absolute;inset:0;background:rgba(59,130,246,.08);
    transform:scaleX(0);transform-origin:left;transition:transform .25s var(--spring-soft);
    border-radius:inherit;z-index:-1;
}
.nav-links a:hover::before,.nav-links a:focus-visible::before{transform:scaleX(1)}
.nav-links a.current{
    box-shadow:inset 0 0 0 1px rgba(59,130,246,.35);
}
.profile-chip{transition:transform .3s var(--spring),box-shadow .3s}
.profile-chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(59,130,246,.25)}
.profile-avatar{
    background:conic-gradient(from 200deg,var(--accent),var(--accent-light),var(--gold),var(--accent));
    box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(59,130,246,.4);
}

/* ===== COOKIE BANNER: painted paper edge ===== */
.cookie-banner{
    background:linear-gradient(180deg,var(--surface),#0d1420);
    box-shadow:0 25px 60px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.03);
}

/* ===== REPORT HERO ===== */
.report-hero-top{
    display:flex;flex-direction:column;gap:1.2rem;
    justify-content:space-between;align-items:flex-start;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.week-switcher{
    margin-top:1.6rem;display:flex;align-items:center;justify-content:center;gap:1rem;
    background:var(--surface);border:1px solid var(--border);border-radius:100px;
    padding:.5rem .8rem;width:fit-content;max-width:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.week-nav-btn{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--border-light);
    background:var(--bg);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;
    transition:transform .25s var(--spring),background .2s,color .2s;flex-shrink:0;
}
.week-nav-btn:not(:disabled):hover{background:var(--accent);color:#fff;transform:scale(1.12) rotate(-8deg)}
.week-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.week-switcher-label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;white-space:nowrap}
.week-switcher-label i{color:var(--accent-light)}
.week-badge{
    background:rgba(59,130,246,.12);color:var(--accent-light);
    padding:.15rem .55rem;border-radius:50px;font-size:.68rem;font-weight:700;
}

@media(min-width:768px){
    .report-hero-top{flex-direction:row;align-items:center}
    .week-switcher{margin-left:0}
}

/* ===== STAT CARDS: 3D + painted meters ===== */
.stat-card{
    text-align:center;position:relative;
    transform-style:preserve-3d;perspective:800px;
    transition:transform .45s var(--spring),box-shadow .45s var(--spring-soft),border-color .3s;
    display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
html[data-input="fine"] .stat-card:hover{
    transform:translateY(-8px) rotateX(6deg) rotateY(-6deg) scale(1.02);
    box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 1px rgba(59,130,246,.25);
    border-color:var(--accent);
}
html[data-input="touch"] .stat-card{
    animation:cardDrift 5.5s var(--spring-soft) infinite;
}
html[data-input="touch"] .stat-card:nth-child(2){animation-delay:-1.2s}
html[data-input="touch"] .stat-card:nth-child(3){animation-delay:-2.6s}
html[data-input="touch"] .stat-card:nth-child(4){animation-delay:-3.9s}
@keyframes cardDrift{
    0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}
    50%{transform:translateY(-6px) rotateX(2deg) rotateY(-2deg)}
}
.stat-big{font-size:1.5rem;font-weight:700;color:var(--text)}
.stat-icon-big{font-size:2rem;color:var(--accent);margin-bottom:.2rem}
.stat-note{font-size:.75rem;display:flex;align-items:center;gap:.3rem;justify-content:center;color:var(--text-secondary)}
.stat-note .fa-arrow-trend-up{color:var(--good)}
.stat-note .fa-circle-exclamation{color:var(--gold)}
.stat-note .fa-fire{color:var(--gold)}

/* --- Consistency ring: hand-painted conic meter --- */
.ring-meter{
    --deg:0deg;
    width:128px;height:128px;border-radius:50%;
    background:
        radial-gradient(closest-side,var(--surface) 76%,transparent 77% 100%),
        conic-gradient(var(--accent-light) var(--deg), rgba(255,255,255,.05) 0deg);
    display:flex;align-items:center;justify-content:center;position:relative;
    box-shadow:0 0 0 1px var(--border),0 15px 35px rgba(59,130,246,.15);
    transition:filter .4s;
    animation:ringPaint 1.4s var(--spring-soft) both;
}
@keyframes ringPaint{from{filter:saturate(0) brightness(1.4)}to{filter:saturate(1) brightness(1)}}
.ring-meter::after{
    content:'';position:absolute;inset:-6px;border-radius:50%;
    background:conic-gradient(var(--accent) var(--deg), transparent 0deg);
    filter:blur(10px);opacity:.45;z-index:-1;
}
.ring-center{display:flex;align-items:baseline;gap:.1rem}
.ring-value{font-size:1.9rem;font-weight:700;color:var(--text)}
.ring-unit{font-size:.9rem;color:var(--text-secondary)}
html[data-input="touch"] .ring-meter{animation:ringPaint 1.4s var(--spring-soft) both,ringPulse 4s ease-in-out 1.4s infinite}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 1px var(--border),0 15px 35px rgba(59,130,246,.15)}50%{box-shadow:0 0 0 1px var(--border),0 20px 50px rgba(59,130,246,.32)}}

/* --- Flame meter: layered painted flame, no SVG, with rising embers --- */
.flame-meter{
    width:72px;height:92px;position:relative;margin:0 auto .4rem;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.flame-glow{
    position:absolute;left:50%;bottom:6px;translate:-50% 0;
    width:90px;height:90px;border-radius:50%;
    background:radial-gradient(circle,rgba(245,158,11,.35),rgba(245,158,11,0) 70%);
    animation:flameGlowPulse 2.4s ease-in-out infinite;z-index:0;
}
.flame-bed{
    position:absolute;left:50%;bottom:0;translate:-50% 0;
    width:38px;height:8px;border-radius:50%;
    background:radial-gradient(closest-side,#78350f,#451a03 80%,transparent 100%);
    filter:blur(1px);opacity:.8;z-index:1;
}
.flame-core{
    position:absolute;left:50%;bottom:4px;translate:-50% 0;
    transform-origin:50% 100%;z-index:2;
    /* asymmetric teardrop, hand-painted via mismatched corner radii */
    border-radius:50% 50% 50% 50% / 68% 68% 32% 32%;
}
.flame-core-outer{
    width:50px;height:78px;
    background:
        radial-gradient(circle at 46% 82%, #fef3c7 0%, transparent 22%),
        radial-gradient(ellipse at 50% 68%, #f97316 0%, #c2410c 55%, #7c2d12 85%, #431407 100%);
    animation:flameSwayOuter 2.8s ease-in-out infinite;
    opacity:.92;
}
.flame-core-mid{
    width:34px;height:56px;bottom:5px;
    background:radial-gradient(ellipse at 50% 65%, #fde68a 0%, #f59e0b 45%, #ea580c 80%, #9a3412 100%);
    animation:flameSwayMid 2.1s ease-in-out infinite reverse;
}
.flame-core-inner{
    width:16px;height:30px;bottom:6px;
    background:radial-gradient(ellipse at 50% 60%, #ffffff 0%, #fef9c3 40%, #fde047 75%, #f59e0b 100%);
    mix-blend-mode:screen;opacity:.95;
    animation:flameSwayInner 1.5s ease-in-out infinite;
}
@keyframes flameGlowPulse{0%,100%{opacity:.6;scale:1}50%{opacity:1;scale:1.12}}
@keyframes flameSwayOuter{
    0%,100%{transform:scaleY(1) scaleX(1) skewX(0deg) rotate(0deg)}
    30%{transform:scaleY(1.05) scaleX(.94) skewX(-3deg) rotate(-1.5deg)}
    60%{transform:scaleY(.95) scaleX(1.05) skewX(3deg) rotate(1.5deg)}
    80%{transform:scaleY(1.08) scaleX(.96) skewX(-2deg) rotate(-.5deg)}
}
@keyframes flameSwayMid{
    0%,100%{transform:scaleY(1) skewX(0deg)}
    40%{transform:scaleY(1.08) skewX(4deg)}
    75%{transform:scaleY(.92) skewX(-4deg)}
}
@keyframes flameSwayInner{
    0%,100%{transform:scaleY(1) translateY(0)}
    50%{transform:scaleY(1.15) translateY(-2px)}
}
.flame-ember{
    position:absolute;left:50%;bottom:20px;--tx:0px;
    width:3px;height:3px;border-radius:50%;z-index:3;
    background:radial-gradient(circle,#fef3c7,#f59e0b 70%,transparent 100%);
    box-shadow:0 0 4px rgba(245,158,11,.8);
    opacity:0;animation:emberRise 2.6s ease-in infinite;
}
.flame-ember-1{--tx:-14px;animation-delay:.1s}
.flame-ember-2{--tx:6px;animation-delay:.9s}
.flame-ember-3{--tx:-4px;animation-delay:1.6s;width:2px;height:2px}
.flame-ember-4{--tx:12px;animation-delay:2.1s;width:2px;height:2px}
@keyframes emberRise{
    0%{opacity:0;transform:translate(var(--tx),0) scale(.6)}
    15%{opacity:1}
    85%{opacity:.5}
    100%{opacity:0;transform:translate(var(--tx),-58px) scale(.2)}
}
html[data-input="fine"] .flame-card:hover .flame-meter{
    filter:drop-shadow(0 8px 20px rgba(245,158,11,.55));
}
html[data-input="fine"] .flame-card:hover .flame-core-outer{animation-duration:1.3s}
html[data-input="fine"] .flame-card:hover .flame-core-inner{animation-duration:.8s}

/* --- Entry dots (mini calendar pips) --- */
.mini-dots{display:flex;gap:5px;margin-bottom:.2rem}
.mini-dot{
    width:10px;height:10px;border-radius:50%;background:var(--border-light);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.mini-dot.filled{
    background:radial-gradient(circle at 35% 30%,var(--accent-light),var(--accent) 70%);
    box-shadow:0 0 8px var(--accent-glow);
}

/* ===== LIVE DISCIPLINE PULSE: continuous ambient "video-like" analysis =====
   Unlike every other chart on this page, this one never finishes playing —
   it's meant to read as a live monitor rather than a rendered snapshot. */
.pulse-monitor{position:relative;overflow:hidden}
.pulse-monitor::before{
    content:'';position:absolute;top:0;bottom:0;left:-140px;width:140px;z-index:0;
    background:linear-gradient(90deg,transparent,rgba(59,130,246,.14),transparent);
    animation:pulseScan 4.5s linear infinite;
}
@keyframes pulseScan{to{left:calc(100% + 140px)}}
.pulse-bars{position:relative;z-index:1}
.pulse-bars span{
    background:linear-gradient(180deg,var(--accent-light),var(--accent));
    box-shadow:0 0 10px var(--accent-glow);border-radius:3px 3px 0 0;
    transform-origin:bottom;animation:pulseBeat 1.6s ease-in-out infinite;
}
@keyframes pulseBeat{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
.pulse-bars span:nth-child(4n+1){animation-delay:0s;animation-duration:1.35s}
.pulse-bars span:nth-child(4n+2){animation-delay:.15s;animation-duration:1.7s}
.pulse-bars span:nth-child(4n+3){animation-delay:.3s;animation-duration:1.25s}
.pulse-bars span:nth-child(4n){animation-delay:.45s;animation-duration:1.9s}
.pulse-dot{box-shadow:0 0 10px rgba(34,197,94,.65);animation:pulseDot 1.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.25}}
html[data-input="fine"] .pulse-monitor:hover .pulse-bars span{animation-duration:.75s}

/* ===== CONSTELLATION: signature painted component ===== */
.constellation-section{position:relative}
.constellation{
    position:relative;display:flex;justify-content:space-between;align-items:flex-end;
    padding:2.2rem .5rem 1rem;background:
        radial-gradient(ellipse at 50% 120%,rgba(59,130,246,.08),transparent 65%);
    border-radius:var(--radius-lg);
    min-height:160px;
}
.constellation-line{
    position:absolute;left:4%;right:4%;top:50%;height:0;
    border-top:2px dashed rgba(148,163,184,.25);
    z-index:0;
}
.const-node{
    position:relative;z-index:1;background:none;border:none;color:var(--text-secondary);
    display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.4rem;
    flex:1;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.const-star{
    --size:14px;
    width:var(--size);height:var(--size);border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff,var(--mood) 55%,transparent 100%);
    box-shadow:0 0 10px 2px var(--mood);
    transition:transform .35s var(--spring),box-shadow .35s;
    position:relative;
}
.const-star::before{
    content:'';position:absolute;inset:-8px;border-radius:50%;
    background:radial-gradient(circle,var(--mood),transparent 70%);
    opacity:.35;animation:twinkle 3s ease-in-out infinite;
}
.const-strong .const-star{--size:20px}
.const-mid .const-star{--size:15px;opacity:.85}
.const-missed .const-star{--size:10px;opacity:.4;box-shadow:none}
.const-missed .const-star::before{display:none}
.const-label{font-size:.72rem;font-weight:600}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.9)}50%{opacity:.55;transform:scale(1.25)}}
html[data-input="touch"] .const-strong .const-star{animation:starOrbit 3.2s ease-in-out infinite}
@keyframes starOrbit{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
html[data-input="fine"] .const-node:hover .const-star,
.const-node:focus-visible .const-star{transform:scale(1.4);box-shadow:0 0 22px 5px var(--mood)}
.const-tooltip{
    margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--radius);
    background:var(--surface);border:1px solid var(--border);
    opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;
    max-width:420px;
}
.const-tooltip.visible{opacity:1;transform:translateY(0)}
.const-tooltip strong{color:var(--accent-light);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.const-tooltip p{margin-top:.3rem;font-size:.86rem;color:var(--text)}

/* ===== DAILY BREAKDOWN: expandable, paper-textured notes ===== */
/* Staggered "brick" layout instead of one flat vertical stack — each card
   sits in its own column-independent row so heights vary naturally, and
   the missed day breaks the rhythm by spanning full width to stand out. */
.day-list{
    display:grid;grid-template-columns:1fr;gap:.85rem;align-items:start;
}
.day-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
    overflow:hidden;transition:border-color .3s,transform .35s var(--spring-soft),box-shadow .35s,margin-top .35s var(--spring-soft);
}
html[data-input="fine"] .day-card:hover{transform:translateY(-5px) rotate(0deg)!important;border-color:var(--border-light);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.day-card.is-open{border-color:var(--accent);transform:rotate(0deg)!important}
.day-card-missed{border-style:dashed}
.day-card-head{
    width:100%;display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;
    background:none;border:none;color:var(--text);text-align:left;
}
.day-status{
    width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:.78rem;
}
.day-status.good{background:radial-gradient(circle at 35% 30%,#4ade80,var(--good) 70%);color:#052e12;box-shadow:0 0 12px rgba(34,197,94,.4)}
.day-status.ok{background:radial-gradient(circle at 35% 30%,#fcd34d,var(--gold) 70%);color:#3f2400;box-shadow:0 0 12px rgba(245,158,11,.35)}
.day-status.missed{background:var(--border-light);color:var(--text-secondary)}
.day-meta{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}
.day-name{font-weight:700;font-size:.9rem}
.day-name em{font-style:normal;color:var(--text-secondary);font-weight:500;margin-left:.3rem;font-size:.78rem}
.day-time{font-size:.72rem;color:var(--text-secondary);display:flex;align-items:center;gap:.3rem}
.day-mood{font-size:1.2rem;flex-shrink:0}
.day-words{font-size:.72rem;color:var(--text-secondary);flex-shrink:0;white-space:nowrap}
.day-caret{color:var(--text-secondary);transition:transform .3s var(--spring-soft);flex-shrink:0}
.day-card.is-open .day-caret{transform:rotate(180deg);color:var(--accent-light)}
.day-card-body{
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--spring-soft);
}
.day-card-body > *{overflow:hidden}
.day-card.is-open .day-card-body{grid-template-rows:1fr}
.note-paper{
    font-family:"Kalam",cursive;font-size:1rem;line-height:1.7;color:var(--paper);
    padding:1rem 1.2rem 1.3rem;margin:0 1.1rem 1.1rem;border-radius:0 0 8px 8px;
    background:
        repeating-linear-gradient(var(--paper) 0 1px,transparent 1px 100%) 0 0/100% 1.7em,
        linear-gradient(180deg,#2a2013,#1c1408);
    border:1px solid #3a2c15;position:relative;
}
.note-paper::before{
    content:'';position:absolute;left:1.4rem;top:0;bottom:0;width:1px;background:rgba(239,68,68,.35);
}
.note-paper-empty{font-style:normal;font-family:var(--font-sans);color:var(--text-secondary);font-size:.85rem;background:none;border:1px dashed var(--border-light)}

/* ===== REFLECTIONS: pinned handwritten paper ===== */
.pin-board{align-items:start}
.pin-note{
    font-family:"Kalam",cursive;font-size:1.15rem;line-height:1.6;color:#2a2013;
    background:linear-gradient(180deg,#f8f1de,#ece0c2);
    padding:1.6rem 1.3rem 1.2rem;border-radius:4px;position:relative;
    box-shadow:0 15px 30px rgba(0,0,0,.35),inset 0 0 25px rgba(0,0,0,.06);
    transition:transform .4s var(--spring);
}
.pin-note::before{ /* torn top edge */
    content:'';position:absolute;top:-1px;left:0;right:0;height:8px;
    background:repeating-linear-gradient(115deg,var(--bg) 0 6px,transparent 6px 12px);
}
.pin-note::after{ /* pin */
    content:'';position:absolute;top:-9px;left:50%;translate:-50% 0;
    width:16px;height:16px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fca5a5,#dc2626 70%);
    box-shadow:0 3px 6px rgba(0,0,0,.5);
}
.pin-note footer{margin-top:.8rem;font-family:var(--font-sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#7c6a45;font-weight:700}
/* Wipe reveal instead of a plain fade — the line "writes itself" in once
   the card enters view, rather than appearing fully formed. */
.pin-note p{clip-path:inset(0 100% 0 0)}
.pin-note.revealed p{animation:pinWipe 1.1s var(--spring-soft) .25s forwards}
@keyframes pinWipe{to{clip-path:inset(0 0% 0 0)}}
.pin-note-1{transform:rotate(-3deg)}
.pin-note-2{transform:rotate(2deg)}
.pin-note-3{transform:rotate(-1.5deg)}
html[data-input="fine"] .pin-note:hover{transform:rotate(0deg) translateY(-6px) scale(1.03);box-shadow:0 25px 50px rgba(0,0,0,.45)}
html[data-input="touch"] .pin-note{animation:pinSway 5s ease-in-out infinite}
html[data-input="touch"] .pin-note-1{animation-delay:-1s}
html[data-input="touch"] .pin-note-3{animation-delay:-2.4s}
@keyframes pinSway{
    0%,100%{transform:rotate(var(--r,-3deg))}
    50%{transform:rotate(calc(var(--r,-3deg) * -1))}
}
.pin-note-1{--r:-3deg}.pin-note-2{--r:2deg}.pin-note-3{--r:-1.5deg}

/* ===== TREND: compare bars + sparkline ===== */
.chart-card,.sparkline-card{position:relative}
.compare-chart{display:flex;align-items:flex-end;gap:8px;height:180px;padding-top:1rem}
.compare-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:0;height:100%;justify-content:flex-end}
.compare-bars{display:flex;align-items:flex-end;gap:3px;height:100%;width:100%;justify-content:center}
.bar{
    --h:0%;width:38%;max-width:16px;border-radius:4px 4px 0 0;position:relative;
    height:var(--h);transition:height .9s var(--spring-soft);
    animation:barRise 1s var(--spring-soft) both;
}
@keyframes barRise{from{height:0}to{height:var(--h)}}
.bar-last{background:linear-gradient(180deg,var(--border-light),var(--border))}
.bar-now{background:linear-gradient(180deg,var(--accent-light),var(--accent));box-shadow:0 0 12px var(--accent-glow)}
.bar::after{
    content:attr(data-value);position:absolute;top:-24px;left:50%;translate:-50% 0;
    background:var(--bg);border:1px solid var(--border);padding:2px 6px;border-radius:5px;
    font-size:.62rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;
}
.bar:hover::after{opacity:1}
.compare-label{font-size:.68rem;color:var(--text-secondary)}
.chart-legend{display:flex;gap:1.2rem;margin-top:1rem;font-size:.72rem;color:var(--text-secondary)}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.3rem}
.legend-dot-last{background:var(--border-light)}
.legend-dot-now{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}

.sparkline{
    position:relative;height:150px;margin:1rem 0;
    clip-path:inset(0 0 0 0);
}
.sparkline::before{ /* painted area fill, hand-computed to match the demo data set */
    content:'';position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(59,130,246,.35),rgba(59,130,246,0) 85%);
    clip-path:polygon(
        0% 42%,14.29% 36%,28.57% 48%,42.86% 30%,
        57.14% 34%,71.43% 23%,85.71% 29%,100% 14%,
        100% 100%,0% 100%
    );
    animation:fillPaint 1.2s var(--spring-soft) both;
}
@keyframes fillPaint{from{clip-path:polygon(0% 100%,14.29% 100%,28.57% 100%,42.86% 100%,57.14% 100%,71.43% 100%,85.71% 100%,100% 100%,100% 100%,0% 100%)}}
.spark-point{
    position:absolute;z-index:1;
    left:calc(var(--x) * (100% / 7));bottom:calc(var(--y) * 1%);
    translate:-50% 50%;
    width:8px;height:8px;border-radius:50%;
    background:var(--accent-light);box-shadow:0 0 0 3px rgba(10,14,23,1),0 0 10px var(--accent-glow);
}
.spark-point-current{
    width:14px;height:14px;background:var(--gold);
    box-shadow:0 0 0 4px rgba(10,14,23,1),0 0 16px rgba(245,158,11,.6);
    animation:sparkPulse 1.8s ease-in-out infinite;
}
@keyframes sparkPulse{0%,100%{scale:1}50%{scale:1.25}}
/* Traveling signal dot: continuously scrubs the same path the fill traces,
   so the trend reads as a live feed instead of a rendered-once shape. */
.sparkline::after{
    content:'';position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;
    background:#fff;box-shadow:0 0 10px 3px var(--accent-light);
    translate:-50% 50%;
    animation:sparkTravel 5s linear infinite;
}
@keyframes sparkTravel{
    0%{left:0%;bottom:58%}
    14.29%{left:14.29%;bottom:64%}
    28.57%{left:28.57%;bottom:52%}
    42.86%{left:42.86%;bottom:70%}
    57.14%{left:57.14%;bottom:66%}
    71.43%{left:71.43%;bottom:77%}
    85.71%{left:85.71%;bottom:71%}
    100%{left:100%;bottom:86%}
}

/* ===== BEST/TOUGHEST HIGHLIGHTS ===== */
.highlight-card{position:relative;overflow:hidden}
.highlight-tag{
    display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;padding:.25rem .7rem;border-radius:50px;margin-bottom:.6rem;
}
.highlight-best{border-color:rgba(34,197,94,.35)}
.highlight-best .highlight-tag{background:rgba(34,197,94,.14);color:#4ade80}
.highlight-best::before{
    content:'';position:absolute;top:-40%;right:-20%;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(34,197,94,.18),transparent 70%);z-index:0;
}
.highlight-tough{border-color:rgba(96,165,250,.3)}
.highlight-tough .highlight-tag{background:rgba(96,165,250,.14);color:var(--accent-light)}
.highlight-tough::before{
    content:'';position:absolute;top:-40%;right:-20%;width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle,rgba(96,165,250,.16),transparent 70%);z-index:0;
}
.highlight-card h3,.highlight-card p{position:relative;z-index:1}
html[data-input="fine"] .highlight-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(0,0,0,.35)}

/* ===== COMMITMENTS ===== */
.commitment-list{display:flex;flex-direction:column;gap:.8rem}
.commitment-row{
    display:grid;grid-template-columns:1fr 3fr auto;align-items:center;gap:.9rem;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:.8rem 1rem;
}
.commitment-name{font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:.5rem;min-width:0}
.commitment-name i{color:var(--accent-light);width:16px;text-align:center;flex-shrink:0}
.commitment-bar{height:8px;border-radius:6px;background:var(--border);overflow:hidden;position:relative}
.commitment-bar span{
    display:block;height:100%;width:var(--pct,0%);border-radius:6px;
    background:linear-gradient(90deg,var(--accent),var(--accent-light));
    box-shadow:0 0 10px var(--accent-glow);
    transition:width 1s var(--spring-soft);
    animation:commitGrow 1.1s var(--spring-soft) both;
}
@keyframes commitGrow{from{width:0}to{width:var(--pct)}}
.commitment-frac{font-size:.78rem;font-weight:700;color:var(--text-secondary);white-space:nowrap}

/* ===== MOOD DISTRIBUTION ===== */
.mood-list{display:flex;flex-direction:column;gap:.6rem}
.mood-row{
    display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:.8rem;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:.6rem .9rem;
}
.mood-emoji{font-size:1.3rem}
.mood-label{font-size:.8rem;font-weight:600;width:80px}
.mood-bar{height:6px;border-radius:5px;background:var(--border);overflow:hidden}
.mood-bar span{
    display:block;height:100%;width:var(--pct,0%);border-radius:5px;
    background:linear-gradient(90deg,var(--gold),#fbbf24);
    animation:commitGrow 1s var(--spring-soft) both;
}
.mood-count{font-size:.72rem;color:var(--text-secondary);white-space:nowrap}

/* ===== INSIGHTS ===== */
.insight-card{transition:transform .4s var(--spring),border-color .3s}
.insight-icon{font-size:1.5rem;color:var(--accent);margin-bottom:.6rem;display:block}
html[data-input="fine"] .insight-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--accent)}
html[data-input="touch"] .insight-card{animation:cardDrift 6s var(--spring-soft) infinite}
html[data-input="touch"] .insight-card:nth-child(2){animation-delay:-2s}
html[data-input="touch"] .insight-card:nth-child(3){animation-delay:-4s}

/* ===== PHONE NOTIFICATION MOCK: painted glass + slide-in ===== */
.phone-mock{
    background:linear-gradient(160deg,#141c2b,#0b1018);
    box-shadow:0 25px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-notif{
    box-shadow:0 10px 25px rgba(0,0,0,.35);
    animation:notifSlide 1s var(--spring-soft) both;
}
@keyframes notifSlide{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.phone-notif-icon{box-shadow:0 0 12px var(--accent-glow)}
html[data-input="touch"] .phone-notif{animation:notifSlide 1s var(--spring-soft) both,notifBob 4s ease-in-out 1s infinite}
@keyframes notifBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ===== WORD CLOUD: weighted, painted, ambient float ===== */
.word-cloud{justify-content:center}
.word-chip{
    font-family:"Space Grotesk",var(--font-sans);font-weight:600;
    font-size:calc(.68rem + (var(--w,1) * .11rem));
    color:hsl(213 90% calc(65% + var(--w,1) * 1%));
    background:linear-gradient(180deg,var(--surface),rgba(59,130,246,calc(var(--w,1) * .012)));
    border-color:rgba(59,130,246,calc(.15 + var(--w,1) * .03));
    transition:transform .3s var(--spring),box-shadow .3s;
}
html[data-input="fine"] .word-chip:hover{
    transform:translateY(-4px) scale(1.08);box-shadow:0 10px 22px rgba(59,130,246,.25);color:#fff;
}
html[data-input="touch"] .word-chip{animation:wordFloat 4.5s ease-in-out infinite}
.word-chip:nth-child(odd){animation-delay:-1.5s}
.word-chip:nth-child(3n){animation-delay:-3s}
@keyframes wordFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ===== ACCORDION: painted, spring-hinge open ===== */
.accordion-item{
    transition:border-color .3s,box-shadow .3s,transform .3s var(--spring-soft);
    overflow:hidden;
}
.accordion-item.is-open{border-color:var(--accent);box-shadow:0 12px 30px rgba(59,130,246,.12)}
html[data-input="fine"] .accordion-item:hover{transform:translateX(3px)}
.accordion-trigger i:first-child{color:var(--accent-light);margin-right:.5rem}
.accordion-caret{transition:transform .35s var(--spring-soft);color:var(--text-secondary)}
.accordion-item.is-open .accordion-caret{transform:rotate(180deg);color:var(--accent-light)}
.accordion-panel{
    display:grid!important;grid-template-rows:0fr;transition:grid-template-rows .4s var(--spring-soft);
}
.accordion-panel > p{overflow:hidden;padding-bottom:.2rem}
.accordion-item:not(.is-open) .accordion-panel > p{opacity:0}
.accordion-item.is-open .accordion-panel{grid-template-rows:1fr}
.accordion-item.is-open .accordion-panel > p{opacity:1;transition:opacity .3s .1s}
.accordion-panel{padding:0 1rem}
.accordion-item.is-open .accordion-panel{padding-bottom:1rem}

/* ===== GROUP COMPARE: painted, "you" row glows ===== */
.group-compare-row{transition:transform .3s var(--spring-soft),border-color .3s}
html[data-input="fine"] .group-compare-row:hover{transform:translateX(6px);border-color:var(--border-light)}
.group-compare-you{
    border-color:rgba(59,130,246,.4)!important;
    background:linear-gradient(90deg,rgba(59,130,246,.1),var(--surface) 40%)!important;
}
.gc-avatar{
    background:conic-gradient(from 200deg,var(--accent),var(--accent-light),var(--gold),var(--accent));
    box-shadow:0 0 10px var(--accent-glow);
}
.gc-bar span{
    background:linear-gradient(90deg,var(--accent),var(--accent-light));
    box-shadow:0 0 8px var(--accent-glow);width:0;animation:commitGrow 1s var(--spring-soft) forwards;
}
.gc-rank{position:relative}
.group-compare-row:nth-child(1) .gc-rank::after{content:'🥇';margin-left:2px}
.group-compare-row:nth-child(2) .gc-rank::after{content:'🥈';margin-left:2px}
.group-compare-row:nth-child(3) .gc-rank::after{content:'🥉';margin-left:2px}

/* ===== PRIVACY NOTE ===== */
.privacy-note{
    background:linear-gradient(135deg,rgba(59,130,246,.06),var(--surface));
    position:relative;overflow:hidden;
}
.privacy-note::before{
    content:'';position:absolute;top:-30%;right:-8%;width:140px;height:140px;border-radius:50%;
    background:radial-gradient(circle,rgba(59,130,246,.15),transparent 70%);
}

/* ===== CTA ===== */
.cta-card{
    text-align:center;padding:3rem 1.5rem;border-radius:var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%,rgba(59,130,246,.18),transparent 70%),
        var(--surface);
    border:1px solid var(--border);
}
.cta-card .hero-actions{justify-content:center;margin-top:1rem}

/* ===== SCATTER / REVEAL ENTRANCE ===== */
[data-scatter],.lazy-reveal{
    opacity:0;transform:translateY(28px) scale(.97);
    transition:opacity .7s var(--spring-soft),transform .7s var(--spring-soft);
}
[data-scatter].revealed,.lazy-reveal.revealed{opacity:1;transform:translateY(0) scale(1)}
.day-list .day-card:nth-child(1){transition-delay:.02s}
.day-list .day-card:nth-child(2){transition-delay:.06s}
.day-list .day-card:nth-child(3){transition-delay:.1s}
.day-list .day-card:nth-child(4){transition-delay:.14s}
.day-list .day-card:nth-child(5){transition-delay:.18s}
.day-list .day-card:nth-child(6){transition-delay:.22s}
.day-list .day-card:nth-child(7){transition-delay:.26s}

/* ===== FOOTER polish ===== */
.site-footer{
    padding:3rem 0 1.6rem;border-top:1px solid var(--border);background:var(--surface);font-size:.82rem;margin-top:2rem;
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-bottom:1.5rem}
.footer-brand p{margin-top:.6rem;color:var(--text-secondary)}
.footer-links h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.7rem;color:var(--text)}
.footer-links a{display:flex;align-items:center;gap:.4rem;color:var(--text-secondary);text-decoration:none;margin-bottom:.45rem;font-size:.78rem;transition:color .2s}
.footer-links a:hover{color:var(--accent-light)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1rem;color:var(--text-secondary);font-size:.72rem}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}

/* ===== BACK TO TOP polish ===== */
.back-to-top{background:var(--accent);color:#fff;border:none;box-shadow:0 10px 25px rgba(59,130,246,.4)}
.back-to-top:hover{transform:translateY(-3px) scale(1.06)}

/* ===== PRINT ===== */
@media print{
    .site-header,.mobile-overlay,.cookie-banner,.back-to-top,.page-loader,
    .scroll-progress,.hero-actions,.week-switcher,.const-tooltip{display:none!important}
    body{background:#fff;color:#111}
    .card,.day-card,.pin-note{box-shadow:none!important;break-inside:avoid}
    main{padding-top:0}
}

/* ===== REDUCED MOTION: strip every animation defined above ===== */
.reduced-motion *{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
}
.reduced-motion [data-scatter],.reduced-motion .lazy-reveal{opacity:1;transform:none}

/* ===== MOBILE-SPECIFIC OVERRIDES (<640px) ===== */
@media(max-width:639px){
    .report-hero-top{gap:1rem}
    .hero-actions{width:100%}
    .hero-actions .btn{flex:1;justify-content:center}
    .week-switcher{width:100%;justify-content:space-between}
    .ring-meter{width:108px;height:108px}
    .ring-value{font-size:1.5rem}
    .constellation{padding:1.6rem .2rem .8rem;flex-wrap:nowrap;overflow-x:auto}
    .const-label{font-size:.62rem}
    .day-card-head{padding:.8rem}
    .day-words{display:none} /* trimmed on small screens, still in DOM for the reader/expanded view */
    .commitment-row{grid-template-columns:1fr;gap:.5rem;text-align:left}
    .commitment-frac{justify-self:flex-end}
    .mood-row{grid-template-columns:auto 1fr auto;grid-template-areas:"emoji bar count" "emoji label count"}
    .mood-label{grid-area:label;width:auto}
    .mood-emoji{grid-area:emoji}
    .mood-bar{grid-area:bar}
    .mood-count{grid-area:count}

    /* Day notes: gentle alternating drift instead of a flat stack — subtle
       enough to stay readable, resets to upright the moment a card opens. */
    .day-list .day-card:nth-child(odd){transform:translateX(-3px) rotate(-.6deg)}
    .day-list .day-card:nth-child(even){transform:translateX(3px) rotate(.6deg)}
    .day-list .day-card.is-open,
    .day-list .day-card:active{transform:translateX(0) rotate(0deg)!important}
}

/* ===== TABLET (640–1023px) ===== */
@media(min-width:640px) and (max-width:1023px){
    .pin-board{grid-template-columns:1fr 1fr}
    .pin-note-3{grid-column:span 2;max-width:340px;margin:0 auto}

    .day-list{grid-template-columns:1fr 1fr;column-gap:1rem}
    .day-list .day-card:nth-child(even){margin-top:1.8rem}
    .day-card-missed{grid-column:1 / -1;margin-top:0!important}
}

/* ===== DESKTOP (1024px+) ===== */
@media(min-width:1024px){
    .desktop-only-flex{display:inline-flex!important}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .pin-board{grid-template-columns:repeat(3,1fr)}
    .compare-chart{height:220px}
    .sparkline{height:190px}

    .day-list{grid-template-columns:1fr 1fr;column-gap:1.2rem}
    .day-list .day-card:nth-child(even){margin-top:2.4rem}
    .day-card-missed{grid-column:1 / -1;margin-top:0!important}
}
@media(max-width:1023px){
    .desktop-only-flex{display:none!important}
}