:root{font-family:Inter,ui-sans-serif,system-ui;color:#26332f;background:#edf2ee}*{box-sizing:border-box}body{margin:0}
/* iOS Safari zooms the whole page in when a focused text input's
   effective font-size is under 16px—every typeable field gets an
   explicit 16px floor so tapping in on an iPhone never triggers that. */
input,select,textarea{font-size:16px}.app-shell{max-width:1040px;margin:auto;min-height:100vh;background:#fbfcfa;box-shadow:0 0 40px #24352b18;display:flex;align-items:stretch}main{flex:1;min-width:0}main.app-loading{visibility:hidden}header{padding:28px 32px 14px;border-bottom:1px solid #dce5de;display:flex;justify-content:space-between;gap:20px;align-items:end}h1{margin:0;font-size:30px;color:#315d4c}header p,.muted{color:#6d7c75;margin:5px 0;font-size:14px}nav{display:flex;gap:5px;flex-wrap:wrap}button{border:1px solid var(--sun-line);border-radius:999px;background:var(--sun-100);color:var(--sun-ink);padding:10px 15px;cursor:pointer;font-weight:650;box-shadow:0 1px 2px #6b5a2a14;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}:where(button:hover,button.active){background:var(--sun-200);color:var(--sun-ink)}.view{display:none;padding:25px 32px}.view.active{display:block}#messages{height:52vh;height:52dvh;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:5px}.message{max-width:76%;padding:12px 15px;border-radius:18px;white-space:pre-wrap;line-height:1.45}.message.vito{align-self:flex-start;background:#e8f0ea}.message.user{align-self:flex-end;background:#3f735f;color:white}.checkin{margin:15px 0;display:flex;gap:12px;align-items:center}.checkin input{flex:1}form{display:flex;gap:10px}textarea{flex:1;resize:none;padding:13px;border:1px solid #cad7cf;border-radius:14px;font:inherit;background:white}#primaryAction{white-space:nowrap;min-width:92px}#primaryAction[disabled]{opacity:.55;cursor:wait}#listeningIndicator{display:flex;align-items:center;gap:8px;margin-top:11px;color:#9c3434;font-size:14px}#listeningIndicator[hidden]{display:none}.listen-dot{width:10px;height:10px;border-radius:50%;background:#d94848;box-shadow:0 0 0 0 #d9484866;animation:pulse 1.3s infinite}.levels{height:16px;display:flex;gap:2px;align-items:center}.levels i{width:3px;height:6px;background:#d94848;border-radius:3px;animation:level .8s infinite alternate}.levels i:nth-child(2){animation-delay:.2s;height:13px}.levels i:nth-child(3){animation-delay:.4s;height:9px}.levels i:nth-child(4){animation-delay:.1s;height:4px}@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}}@keyframes level{to{height:15px}}.panel{background:white;padding:22px;border-radius:18px;border:1px solid #dde7df}.learn-group{margin:22px 0}.chip{display:inline-block;background:#edf4ef;border-radius:99px;padding:7px 10px;margin:4px}.privacy{margin-top:30px;display:flex;gap:8px;flex-wrap:wrap}.danger{background:#f5dddd;color:#853737}pre{white-space:pre-wrap;word-break:break-word;background:#15231e;color:#d8eadf;padding:15px;border-radius:12px;max-height:500px;overflow:auto}.profile-form{display:grid;gap:14px;margin-top:18px}.profile-form label{display:grid;gap:6px;font-weight:650;font-size:14px}.profile-form input,.profile-form select,.profile-form textarea{width:100%;border:1px solid #cad7cf;border-radius:12px;padding:11px;font:inherit;background:white}.profile-form textarea{resize:vertical}.profile-form button{justify-self:start}.save-status{color:#4f7566;align-self:center}hr{border:0;border-top:1px solid #e0e8e2;margin:28px 0}@media(max-width:650px){header{align-items:start;flex-direction:column}.view,header{padding-left:18px;padding-right:18px}.message{max-width:90%}form{flex-wrap:wrap;justify-content:flex-end}textarea{flex-basis:100%}
  /* The Send/Speak button wraps onto its own line here and would
     otherwise start flush left—exactly where the fixed settings gear
     sits—so on a real phone the two overlap and the button becomes
     partly untappable. Pushing it to the right, and giving the chat
     form a little breathing room above the gear's own footprint,
     keeps them apart. */
  #chat form{margin-bottom:60px}}
.dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.dashboard article{background:#f6f9f6;border:1px solid #dce7df;border-radius:16px;padding:15px}.dashboard article h3{margin-top:0}.dash-card{display:grid;gap:4px;background:white;border-radius:12px;padding:11px;margin:9px 0;border:1px solid #e2e9e4}.dash-card span,.dash-card small{color:#68766f}.activation-scale button.active{background:#3f735f;color:white}@media(max-width:760px){.dashboard{grid-template-columns:1fr}}
.welcome{padding:4px 5px 14px;position:relative}

.chat-vito-btn{position:absolute;top:2px;left:2px}
.welcome h2{font-size:24px;margin:0 0 12px;padding-left:62px}.welcome>p.muted{padding-left:62px}.quick-actions,.decision-buttons{display:flex;gap:8px;flex-wrap:wrap}.quick-actions button{background:white;border:1px solid #cfddd4}.memory-card{border:1px solid #dce7df;border-radius:14px;padding:13px;margin:10px 0;display:grid;gap:7px}.memory-card .status{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#64766e}.memory-card .actions{display:flex;gap:6px;flex-wrap:wrap}.memory-card .actions button{font-size:12px;padding:7px 10px}.teach-candidate{margin-top:20px;background:#f3f7f4;padding:16px;border-radius:14px}.teach-candidate textarea{width:100%}.back{margin-bottom:10px}.fact-alarm{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fact-alarm div{padding:10px;background:#fff;border:1px solid #dce7df;border-radius:10px}@media(max-width:650px){.fact-alarm{grid-template-columns:1fr}}
.settings-form{display:grid;gap:12px}.settings-form label{display:flex;gap:8px;align-items:center}.settings-form select{padding:8px;border:1px solid #cad7cf;border-radius:9px}.settings-form button{justify-self:start}.voice-note{margin:-7px 0 2px 25px;color:#738078;font-size:13px}
.insights-panel{background:#fbfcfa}.insights-head{display:flex;justify-content:space-between;align-items:start;gap:18px}.insights-head h2{margin:0}.range-filter{display:flex;gap:5px;flex-wrap:wrap}.range-filter button{font-size:12px;padding:8px 11px}.insights-empty{text-align:center;padding:70px 18px}.insights-empty p{max-width:520px;margin:12px auto 22px;color:#66766e}.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.summary-cards article{background:#f0f5f1;border-radius:14px;padding:15px;display:grid;gap:9px}.summary-cards span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#687970}.summary-cards strong{font-size:22px;color:#315d4c}.insight-section{background:white;border:1px solid #e0e8e2;border-radius:17px;padding:18px;margin:14px 0}.insight-section h3{margin:0 0 5px}.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.chart{overflow-x:auto}.chart svg{display:block;width:100%;min-width:520px;max-height:280px}.chart svg line{stroke:#dce5df;stroke-width:1}.chart svg polyline{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.before-line{stroke:#b37a62}.after-line{stroke:#3f735f}.episode-point{cursor:pointer;stroke:white;stroke-width:2}.episode-point.before{fill:#b37a62}.episode-point.after{fill:#3f735f}.chart-legend{display:flex;gap:20px;font-size:12px;color:#63736b}.chart-legend span:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.before-dot:before{background:#b37a62}.after-dot:before{background:#3f735f}.detail-panel{margin-top:12px;background:#f2f6f3;border-radius:12px;padding:13px;display:grid;gap:5px;font-size:13px}.detail-panel[hidden]{display:none}.bars{display:grid;gap:9px}.bar-row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr auto;gap:9px;align-items:center;background:transparent;color:#33433d;padding:3px;text-align:left;border-radius:5px}.bar-row:hover{background:#f2f6f3;color:#33433d}.bar-row i{display:block;height:9px;background:#e8eee9;border-radius:9px;overflow:hidden}.bar-row b{display:block;height:100%;background:#56836f;border-radius:9px}.bar-row em{font-size:11px;font-style:normal;color:#66766e}.pattern-card{padding:14px;border:1px solid #dfe8e1;border-radius:14px;margin:10px 0}
.functional-pattern-card{padding:14px;border:1px solid #dfe8e1;border-radius:14px;margin:10px 0;display:grid;gap:4px}.functional-pattern-card strong{font-size:14px}.functional-pattern-card small{color:#6c7a73}.functional-pattern-card .actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.functional-pattern-card button{font-size:11px;padding:6px 9px}
/* Compact icon-only Confirm/Edit/Reject, reused wherever that exact
   three-action set appears—the text label moves to title/aria-label so
   it's still available on hover and to screen readers, just not printed
   on the card itself. */
.icon-actions button{font-size:15px;padding:4px 7px;background:transparent;line-height:1}.icon-actions button:hover{background:#eef3ef}.icon-actions button.active{background:#e4efed;border-radius:6px}
.ghost-button{display:block;margin:12px 0 0;background:transparent;border:1px dashed #c7d3cc;color:#3f735f;font-size:12px;padding:8px;border-radius:10px;width:100%}.ghost-button:hover{background:#f2f6f3}.ghost-button:disabled{opacity:.6}.pattern-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}.pattern-flow span{color:#8da298}.pattern-card small{color:#6c7a73}.pattern-card .actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.pattern-card button{font-size:11px;padding:6px 9px}@media(max-width:760px){.summary-cards{grid-template-columns:repeat(2,1fr)}.insight-grid{grid-template-columns:1fr}.insights-head{display:grid}.bar-row{grid-template-columns:1fr}.bar-row i{height:8px}}
.message.vito{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}.message.vito>span{flex:1}.message .replay{padding:2px;background:transparent;opacity:.58;font-size:14px;flex:none}.message .replay:hover{background:transparent;color:inherit;opacity:1}
.solution-rating-offer{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid #dce7df;font-size:12px;color:#3a463f}.solution-rating-offer button:disabled{opacity:.5}
.solution-rating-offer .activation-scale{justify-content:flex-start;gap:4px}
.solution-rating-offer .activation-scale button{width:26px;height:26px;font-size:11px}
.message.thinking{align-items:center;gap:8px}
.vito-pet{animation:pet-bob 1.8s ease-in-out infinite}
.vito-pet .pet-body{fill:#2c4c3f}
.vito-pet .pet-eye-white{fill:#fff}
.vito-pet .pet-pupil{fill:#1f3a2f}
.vito-pet .pet-glint{fill:#fff}
.vito-pet .pet-cheeks ellipse{fill:#ff9d80;opacity:.5}
.vito-pet .pet-mouth{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:pet-smile 6.5s ease-in-out infinite}
.vito-pet .pet-arm{stroke-linejoin:round}
/* A superhero badge on the belly—small on purpose, it's a wink, not the
   focal point—plus a cape that hangs behind everything else (painted
   first, so later elements draw over it) and sways on its own timer. */
.vito-pet .pet-emblem-badge{fill:#f4d35e}
.vito-pet .pet-emblem-text{font-family:Inter,ui-sans-serif,system-ui;font-weight:800;font-size:11px;fill:#1f3a2f}
.vito-pet .pet-cape{fill:#d94848;transform-box:view-box;transform-origin:50px 68px;animation:pet-cape-flutter 3.2s ease-in-out infinite}
/* Two arm poses stacked in the same spot, crossfaded by whichever class
   is active—default resting arms, or a double-bicep flex during the
   click trick (see .trick-now below)—rather than trying to animate an
   arm's own path shape, which CSS can't tween. */
.vito-pet .pet-arms-normal{opacity:1;transition:opacity .15s ease}
.vito-pet .pet-flex-arms{opacity:0;transition:opacity .15s ease}
.vito-pet .pet-eyes{transform-box:fill-box;transform-origin:center;animation:pet-blink 3.6s ease-in-out infinite}
/* Pupils and glints drift together (same animation/timing keeps the
   highlight glued to its pupil) so the character looks around now and
   then instead of staring dead ahead the whole time. */
.vito-pet .pet-pupil,.vito-pet .pet-glint{animation:pet-look 7s ease-in-out infinite}
/* A small, occasional hello-wave on the right arm only—not a constant
   flap—so the character reads as glad to see you without being manic. */
.vito-pet .pet-wave{transform-box:view-box;transform-origin:83px 72px;animation:pet-wave 5s ease-in-out infinite}
/* Whole body does a quick, rare wiggle—separate group from .vito-pet's
   own bob (a single element can't run two independent `transform`
   animations at once; nesting keeps them from fighting each other). */
.vito-pet .pet-trick{transform-box:view-box;transform-origin:50px 66px;animation:pet-trick 11s ease-in-out infinite}
/* Toggled by JS in sync with actual audio playback (see setSpeakBtnState
   in app.js)—higher specificity than the idle pet-smile animation above
   so it cleanly takes over the same element instead of the two competing. */
.vito-pet.talking .pet-mouth{animation:pet-talk .32s ease-in-out infinite}
/* One-shot versions of the ambient trick/wave, played immediately on
   click (see playVitoTrick in app.js) instead of waiting out however
   much of the slow idle loop is left. Higher specificity than the base
   .pet-trick/.pet-wave rules above so they take over cleanly while
   present, then JS removes the class once the animation ends so the
   next click can retrigger it (adding the same class twice is a no-op). */
.vito-pet .pet-trick.trick-now{animation:pet-trick-once .6s ease-in-out}
.vito-pet .pet-wave.wave-now{animation:pet-wave-once .6s ease-in-out}
.vito-pet .pet-trick.trick-now .pet-arms-normal{opacity:0}
.vito-pet .pet-trick.trick-now .pet-flex-arms{opacity:1}
/* More ways to poke Vito and get a different reaction back—same one-shot
   pattern as trick-now/wave-now above (a class toggled on, removed on
   animationend), just on different parts of the face/body so tapping him
   doesn't always look like the exact same trick. */
.vito-pet .pet-trick.spin-now{animation:pet-spin-once .7s ease-in-out}
.vito-pet .pet-eyes.laugh-now{animation:pet-laugh-once .6s ease-in-out}
.vito-pet .pet-mouth.laugh-now{animation:pet-mouth-laugh-once .6s ease-in-out}
.vito-pet .pet-eyes.surprised-now{animation:pet-eyes-wide-once .6s ease-in-out}
.vito-pet .pet-mouth.surprised-now{animation:pet-mouth-round-once .6s ease-in-out}
@keyframes pet-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pet-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes pet-wave{0%,80%,100%{transform:rotate(0deg)}84%{transform:rotate(-16deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(4deg)}}
@keyframes pet-look{0%,10%,100%{transform:translate(0,0)}18%,28%{transform:translate(-1.8px,.6px)}36%{transform:translate(0,0)}55%,66%{transform:translate(1.8px,.6px)}74%{transform:translate(0,0)}86%,92%{transform:translate(0,-1.2px)}}
@keyframes pet-smile{0%,85%,100%{transform:scaleY(1)}90%{transform:scaleY(1.2)}}
@keyframes pet-trick{0%,86%,100%{transform:rotate(0deg) scale(1)}89%{transform:rotate(-10deg) scale(1.06)}92%{transform:rotate(8deg) scale(1.06)}95%{transform:rotate(-4deg) scale(1.02)}98%{transform:rotate(0deg) scale(1)}}
@keyframes pet-trick-once{0%,100%{transform:rotate(0deg) scale(1)}25%{transform:rotate(-12deg) scale(1.08)}50%{transform:rotate(10deg) scale(1.08)}75%{transform:rotate(-5deg) scale(1.02)}}
@keyframes pet-cape-flutter{0%,100%{transform:skewX(0deg) rotate(0deg)}50%{transform:skewX(-4deg) rotate(-2deg)}}
@keyframes pet-wave-once{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-16deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}}
@keyframes pet-talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes pet-spin-once{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}
@keyframes pet-laugh-once{0%,100%{transform:scaleY(1)}30%,70%{transform:scaleY(.12)}}
@keyframes pet-mouth-laugh-once{0%,100%{transform:scaleY(1) scaleX(1)}30%,70%{transform:scaleY(1.9) scaleX(1.15)}}
@keyframes pet-eyes-wide-once{0%,100%{transform:scale(1)}40%,60%{transform:scale(1.4)}}
@keyframes pet-mouth-round-once{0%,100%{transform:scaleY(1) scaleX(1)}40%,60%{transform:scaleY(1.4) scaleX(.55)}}
/* One-off celebration burst, positioned per-piece by JS via --dx/--dy/
   --rot custom properties (see burstConfetti in app.js); the layer and
   its pieces remove themselves from the DOM once the animation ends. */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:999}
.confetti-layer i{position:fixed;width:7px;height:10px;border-radius:2px;margin:-5px 0 0 -3.5px;animation:confetti-burst .85s cubic-bezier(.25,.8,.35,1) forwards}
@keyframes confetti-burst{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.pet-dots{display:inline-flex;gap:4px}
.pet-dots i{width:6px;height:6px;border-radius:50%;background:#7fa593;display:inline-block;animation:pet-dot 1.2s ease-in-out infinite}
.pet-dots i:nth-child(2){animation-delay:.15s}
.pet-dots i:nth-child(3){animation-delay:.3s}
@keyframes pet-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.side-nav{width:176px;flex-shrink:0;display:flex;flex-direction:column;padding:28px 14px;border-right:1px solid #e0e8e2;box-sizing:border-box}
.side-nav-bottom{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.side-nav .side-link{display:block;text-align:left;background:transparent;color:#294a3e;padding:11px 14px;border-radius:11px;font-weight:650;font-size:14px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;width:100%}
.side-nav .side-link:hover{background:#edf4ef}
.side-nav .side-link.active{background:#3f735f;color:white}
/* Real reported problem: Home looked exactly like Admin/Settings/About—
   plain text, easy to miss when actually looking for a fast way back—so
   it gets its own permanent colored-pill treatment (same look .active
   already used, just not conditional on being the current view) instead
   of blending into the rest of the list. */
.side-nav .side-link.danger-link{color:#a3453c}
.side-nav .side-link.danger-link:hover{background:#f5dddd}
@media(max-width:820px){
  .app-shell{flex-direction:column}
  .side-nav{flex-direction:row;flex-wrap:wrap;width:auto;border-right:0;border-bottom:1px solid #e0e8e2;gap:4px;padding:12px 16px}
  .side-nav-bottom{flex-direction:row;flex-wrap:wrap;gap:4px;margin-top:0}
  .side-nav .side-link{width:auto;padding:8px 13px;font-size:13px}
}
.narrative-header{display:flex;justify-content:flex-end;align-items:center;gap:12px}.narrative-header button{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid #3f735f;background:#3f735f;color:white;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}.narrative-header button:disabled{opacity:.6;cursor:default}.narrative-header button.spinning{animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.narrative-content{margin-top:10px;line-height:1.6}.narrative-content p{margin:0 0 12px}.narrative-content strong{display:inline-block;margin-bottom:2px}
.star{background:transparent;padding:4px;font-size:20px;color:#9aa59f}.star.on{color:#d29b20;background:transparent}.technique-meta{font-size:11px;color:#6d7c75}
.item-cards{display:grid;gap:10px}
.item-card-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.item-card-head strong{font-size:15px}
.item-status{font-size:11px;color:#6d7c75;white-space:nowrap}
.freq-bar{flex:0 0 70px;height:6px;border-radius:99px;background:#e7ede9;overflow:hidden}
.freq-bar i{display:block;height:100%;background:#3f735f;border-radius:99px}
.pattern-summary{margin:0 0 8px;line-height:1.5}
.pattern-gap{margin:-4px 0 8px;font-size:13px}
.item-explanation{margin:8px 0 0;font-size:13px;line-height:1.5;color:#3a463f;min-height:1em}
.item-card-actions{display:flex;gap:6px;margin-top:8px}
.item-card-actions button{padding:5px 8px;font-size:11px}
.journal-entries{display:grid;gap:12px;margin-top:20px}.journal-day{border:1px solid #dfe8e1;border-radius:15px;background:#fbfcfa;overflow:hidden}.journal-day summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:15px;list-style:none}.journal-day summary::-webkit-details-marker{display:none}.journal-day summary span{font-size:12px;color:#6d7c75}.journal-conversation-group{padding:0 15px}.journal-conversation-group:not(:last-child){border-bottom:1px solid #e7ede9;padding-bottom:4px}
/* Closed by default (see loadJournal in dashboard.js)—the head row is now
   the <summary> itself, so it needs its own cursor/marker treatment
   instead of inheriting the plain flex row it used to be. */
.journal-conv-head{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:10px 0 8px;flex-wrap:wrap}.journal-conv-head::-webkit-details-marker{display:none}.journal-conv-time{margin:0;font-size:12px;font-weight:700;color:#3f735f;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}.journal-conv-time::after{content:'▾';margin-left:4px;font-size:9px;color:#8a9691}.journal-conversation-group[open] .journal-conv-time::after{content:'▴'}.journal-conv-preview{flex:1;min-width:80px;font-size:13px;color:#5c6b64;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.journal-conv-delete{background:transparent;border:none;padding:2px 4px;font-size:13px;color:#8a746f;cursor:pointer;opacity:.7;flex-shrink:0}.journal-conv-delete:hover{opacity:1;color:#a3453c}.journal-conversation{display:grid;gap:8px;padding:2px 0 16px}.journal-message{max-width:78%;border-radius:14px;padding:8px 12px}.journal-message.user{justify-self:end;background:#3f735f;color:white}.journal-message.vito{justify-self:start;background:#e8f0ea}.journal-message small{opacity:.75;font-size:11px}.journal-message p{margin:4px 0 0;white-space:pre-wrap;line-height:1.4;font-size:14px}.journal-empty{text-align:center;padding:55px 15px;color:#66766e}@media(max-width:650px){.journal-message{max-width:92%}}
.journal-conv-activation{font-size:11px;color:#6d7c75;flex-shrink:0}
.journal-actions{display:flex;gap:6px;margin-top:6px;justify-content:flex-end}.journal-actions button{background:transparent;border:none;padding:2px 4px;font-size:13px;cursor:pointer;opacity:.65;line-height:1}.journal-actions button:hover{opacity:1}
.journal-edit-box{width:100%;min-height:60px;margin-top:4px;padding:8px;border-radius:8px;border:1px solid #c7d3cc;font:inherit;line-height:1.45;resize:vertical;color:#1c2620}
.journal-edit-actions{display:flex;gap:8px;margin-top:6px;justify-content:flex-end}.journal-edit-actions button{padding:4px 10px;border-radius:8px;border:1px solid #c7d3cc;background:white;font-size:12px;cursor:pointer}.journal-edit-actions button:first-child{background:#3f735f;color:white;border-color:#3f735f}
.dash-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.dash-summary .dash-card{background:#f0f5f1;border:1px solid #dce7df;border-radius:14px;padding:14px;display:grid;gap:6px}.dash-summary .dash-card span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#687970}.dash-summary .dash-card strong{font-size:15px;color:#315d4c;line-height:1.4}
.ghost-open{background:transparent;border:1px dashed #c7d3cc;color:#3f735f}
.feedback-label{font-size:12px;align-self:center;margin-right:2px}
@media(max-width:760px){.dash-summary{grid-template-columns:repeat(2,1fr)}}
.function-card{cursor:default}.function-actions{margin:4px 0 10px;padding-left:20px}.function-actions li{font-size:14px;line-height:1.6;color:#33433d}
.activation-card{display:grid;gap:6px}.activation-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;margin:4px 0}.activation-flow small{color:#8da298;text-transform:uppercase;letter-spacing:.03em;font-size:10px}.activation-flow span:not(.arrow){background:#f2f6f3;border-radius:8px;padding:4px 8px}.activation-flow .arrow{color:#8da298}
.response-group{margin:14px 0}.response-group h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#556b60}.response-chips{display:flex;flex-wrap:wrap;gap:6px}
.trigger-card{padding:14px;border:1px solid #dfe8e1;border-radius:14px;margin:10px 0}
.trigger-card p{margin:0 0 4px;line-height:1.5}
.trigger-card ul{margin:2px 0 8px;padding-left:20px}
.trigger-card li{font-size:13px;line-height:1.6;color:#33433d}
.domain-tag{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:99px;background:#edf4ef;color:#4f7566;vertical-align:middle}
.helps-card{background:#f0f5f1;border:1px solid #dce7df;border-radius:14px;margin:8px 0;overflow:hidden}
.helps-card summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 15px}
.helps-card summary::-webkit-details-marker{display:none}
.helps-card summary::after{content:'+';font-size:18px;color:#5c8a76;flex-shrink:0}
.helps-card[open] summary::after{content:'–'}
.helps-card .helps-name{font-weight:650}
.helps-card .helps-ratio{font-size:13px;color:#5c8a76;white-space:nowrap}
.helps-card .helps-detail{padding:0 15px 15px}
.technique-theme{background:#fbfcfa}
.technique-list{display:flex;flex-direction:column;gap:2px}
.technique-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid #eef2ef}
.technique-row:last-child{border-bottom:none}
.technique-row strong{font-size:13px;display:block}
.technique-row p{margin:2px 0 0}
.technique-row .ghost-open{white-space:nowrap;font-size:11px;padding:6px 9px;flex-shrink:0}
.course-promo{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:#eaf2ec;border-radius:14px;padding:16px}
.course-promo strong{display:block;font-size:16px;color:#1f3c30}
.course-button{background:#3f735f;color:white;padding:10px 16px;border-radius:99px;font-weight:650;text-decoration:none;white-space:nowrap;display:inline-block}
.course-button:hover{background:#325e4d}
.change-card strong{display:flex;align-items:center;gap:6px}
.dash-header-row{display:flex;justify-content:space-between;align-items:start;gap:14px}.dash-header-row h2{margin:0}#refreshDashboard{white-space:nowrap;flex-shrink:0}
@media(max-width:650px){.dash-header-row{flex-direction:column;align-items:stretch}}
/* Keep pattern/insight summary cards short: clamp any longer sentence to
   two lines instead of letting it sprawl—full text still reachable via
   the pattern's own detail page, this is the summary, not the record. */
.short-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:4px 0}
.pattern-back{margin-bottom:10px}
.helps-headline{background:#f0f5f1;border:1px solid #dce7df;border-radius:14px;padding:14px;display:grid;gap:6px;margin:10px 0}
.helps-headline span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#687970}
.helps-headline strong{font-size:15px;color:#315d4c;line-height:1.5;font-weight:600}
.activation-gate{background:#eaf5ee;border:2px solid #3f735f;border-radius:16px;padding:18px 16px;margin:0 0 14px;text-align:center;box-shadow:0 0 0 4px #3f735f1f;animation:activationPulse 1.8s ease-in-out 3}
.activation-gate p{margin:0 0 12px;font-weight:700;font-size:15px;color:#1f3c30}
@keyframes activationPulse{0%,100%{box-shadow:0 0 0 4px #3f735f1f}50%{box-shadow:0 0 0 9px #3f735f36}}
@media(prefers-reduced-motion:reduce){.activation-gate{animation:none}}
/* The rating gate rendered inline as a chat message (see showActivationGate
   in app.js)—reads as Vito asking a question in the flow, not a separate
   popup card pinned above the conversation. #resumePrompt keeps the plain
   standalone-card look above; only .message.activation-gate gets these. */
/* Reported too large on a phone—this whole card was sized like the old
   standalone gate, not like the chat bubble it now sits next to. Smaller
   text, tighter padding, and a smaller/denser number grid so it reads as
   part of the conversation instead of a big form taking over the screen. */
.message.activation-gate{max-width:90%;text-align:left;margin-bottom:12px;padding:12px 14px}
.message.activation-gate p{margin:0 0 8px;font-size:13px;font-weight:650}
.message.activation-gate .activation-scale{justify-content:flex-start;gap:4px}
.message.activation-gate .activation-scale button{width:26px;height:26px;font-size:12px}
.message.activation-gate .ghost-button{margin-top:8px;width:auto;display:inline-block;padding:4px 12px;font-size:11px}
.activation-gate.answered{opacity:.55;animation:none;box-shadow:none}
.activation-gate.answered button{cursor:default}
#resumePrompt .quick-actions{justify-content:center}
.activation-scale{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.activation-scale button{width:34px;height:34px;padding:0;border-radius:50%;font-weight:650}
.activation-scale .scale-end{font-size:11px;color:#6d7c75;width:44px}
#activationSkip{margin:12px auto 0;width:auto;display:inline-block;padding:6px 16px}
@media(max-width:480px){.activation-scale .scale-end{display:none}}
/* The dashboard (Journal/My Patterns/My Insights) is a genuinely separate
   page from the chat app, not just another tab—a solid header band, rather
   than reusing the chat's light header, is what actually signals "you've
   left Talk and arrived somewhere else" at a glance. */
.dashboard-header{background:#2c4c3f;border-bottom:1px solid #1f3b30}
.dashboard-header h1,.dashboard-header p{color:#fff}
.dashboard-header p{color:#a9c9ba}
.talk-cta{display:flex;align-items:center;gap:10px;width:auto;height:auto;background:#fff;color:#2c4c3f;border:0;border-radius:999px;padding:7px 24px 7px 8px;font-size:17px;font-weight:750;box-shadow:0 3px 12px rgba(0,0,0,.22);flex-shrink:0}
.talk-cta:hover{background:#f2f6f3}
.talk-cta .vito-pet{width:42px;height:42px;flex-shrink:0}
.talk-cta .vito-pet .pet-body{fill:#2c4c3f}
.dash-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:14px 32px;background:#fbfcfa;border-bottom:1px solid #e3ece5}
.dash-tabs button{background:#eaf1ec;color:#1f3c30}
.dash-tabs button:hover,.dash-tabs button.active{background:#3f735f;color:#fff}
@media(max-width:650px){.dash-tabs{padding-left:18px;padding-right:18px}}
/* The at-a-glance My Patterns redesign: one headline pattern card (open
   by default—it's the single most important thing, unlike a list), a
   chain-style trigger→meaning→emotion→response display reused in both
   the strongest-pattern card and each collapsed trigger row, and a
   weekly-recap stat grid mirroring .dash-summary's existing look. */
.trigger-explained{font-size:13px;line-height:1.6;margin:10px 0 0;color:#33433d}
.named-pattern-line{font-size:13px;line-height:1.6;margin:8px 0 0}
.named-pattern-line strong{color:#33433d}
.chain-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:#4b5a53;line-height:1.7}
.chain-tag{font-weight:650;padding:3px 9px;border-radius:8px}
.chain-tag.trigger{background:#eaf1ec;color:#1f3c30}
.chain-tag.emotion{background:#fdeeea;color:#8a3f30}
.trigger-row{border-top:1px solid #eef2ef;padding:0}
.trigger-row:first-child{border-top:none}
.trigger-row>summary{padding:11px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}
.trigger-row>summary .count::after{content:' ▾'}
.trigger-row[open]>summary .count::after{content:' ▴'}
.trigger-row-detail{padding:2px 0 14px}
.trigger-row-detail .helps-hint{margin-top:8px;font-size:12px}
.recap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:center;margin-top:4px}
.recap-grid strong{display:block;font-size:26px;font-weight:800;color:#1f3c30}
.recap-grid span{display:block;font-size:12px;color:#6d7c75;margin-top:2px}
.recovery-note{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid #eef2ef;font-size:14px}
.recovery-note .arrow{font-size:16px;color:#3f735f}
.recovery-note.declining .arrow{color:#a3453c}
.helps-checklist{display:flex;flex-direction:column;gap:10px}
.check-item{font-size:14px;display:flex;align-items:center;gap:10px}
.check-mark{color:#3f735f;font-weight:800}
.most-helpful{margin-top:14px;padding-top:12px;border-top:1px solid #eef2ef;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.most-helpful strong{font-size:14px;color:#1f3c30}
.admin-gate{max-width:420px;margin:0 auto}
.admin-gate h2{margin:0 0 4px;font-size:22px;color:#315d4c}
.admin-gate input{width:100%;border:1px solid #cad7cf;border-radius:12px;padding:11px;font:inherit;background:white;margin:14px 0}
.admin-gate button[type=submit]{width:100%;padding:12px;background:#3f735f;color:white;font-size:15px}
.admin-error{color:#a3453c;font-size:13px;min-height:1.2em}
.add-person-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:white;border:1px solid #dde7df;border-radius:14px;padding:14px 16px;margin:16px 0}
.add-person-form input{border:1px solid #cad7cf;border-radius:10px;padding:9px 11px;font:inherit}
.add-person-form input[name=name]{width:160px}
.add-person-form input[name=email]{flex:1;min-width:180px}
.invite-banner{background:#eaf5ee;border:2px solid #3f735f;border-radius:14px;padding:14px 16px;margin:10px 0;display:grid;gap:8px}
.invite-banner pre{white-space:pre-wrap;word-break:break-word;background:white;border-radius:8px;padding:10px;margin:0;font-size:13px}
.invite-banner div{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.button-link{display:inline-block;background:#3f735f;color:white;text-decoration:none;font-weight:650;font-size:13px;padding:8px 14px;border-radius:10px}
.button-link:hover{background:#345f4f}
.person-card{border:1px solid #dfe8e1;border-radius:14px;background:#fbfcfa;overflow:hidden;margin:10px 0}
.person-card summary{cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;list-style:none}
.person-card summary::-webkit-details-marker{display:none}
.person-card summary::after{content:'▾';margin-left:auto;color:#8a9691;font-size:12px}
.person-card[open] summary::after{content:'▴'}
.person-name{font-weight:650;font-size:15px}
.person-gender{font-size:12px;background:#edf4ef;color:#4f7566;border-radius:99px;padding:3px 9px;text-transform:uppercase;letter-spacing:.03em}
.person-detail{padding:0 16px 16px;display:grid;gap:8px;font-size:13px}
.person-detail .row{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #eef2ef;padding-top:8px}
.person-detail .row span:first-child{color:#687970;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.person-detail .row span:last-child{text-align:right}
.person-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.person-actions button{font-size:12px;padding:7px 11px}
.admin-wrap{max-width:520px;margin:9vh auto;padding:0 18px}
.admin-overview{max-width:760px;margin:5vh auto;padding:0 18px}
.admin-overview h1{color:#315d4c;margin:0}
.welcome-chat-btn{position:relative;width:236px;height:236px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#528970,#2c4c3f 78%);border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;box-shadow:0 20px 44px #24352b3d,inset 0 -6px 14px #17281f4d;transition:transform .25s ease,box-shadow .25s ease}
.welcome-chat-btn:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 26px 54px #24352b45,inset 0 -6px 14px #17281f4d}
.welcome-chat-btn:active{transform:translateY(-1px) scale(.99)}
/* A soft ground shadow that breathes opposite the character's own bob
   (see pet-bob in the .vito-pet block)—smallest/faintest right when
   Vito is at the top of its bounce, so the two together read as
   floating rather than the character and its shadow moving in lockstep. */
.welcome-chat-btn::after{content:'';position:absolute;left:50%;bottom:-16px;width:66%;height:20px;background:radial-gradient(ellipse at center,#24352b80,transparent 72%);border-radius:50%;transform:translateX(-50%);animation:vito-shadow 1.8s ease-in-out infinite}
@keyframes vito-shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.76);opacity:.45}}
.welcome-face{width:104px;height:104px}
.welcome-face .pet-eye-white{fill:#fdfdfb}
.welcome-face .pet-mouth{fill:none;stroke:#fdfdfb;stroke-width:3.4;stroke-linecap:round}
.welcome-face .pet-arm{fill:none;stroke:#fdfdfb;stroke-width:5;stroke-linecap:round;opacity:.92}
.welcome-face .pet-hand{fill:#fdfdfb;opacity:.92}
.header-vito-btn{width:52px;height:52px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#528970,#2c4c3f 78%);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #24352b30;transition:transform .2s ease}
.header-vito-btn:hover{transform:translateY(-2px)}
.header-vito-btn .welcome-face{width:34px;height:34px}
@media(max-width:480px){.welcome-chat-btn{width:200px;height:200px}.welcome-face{width:90px;height:90px}}
.end-screen-wrap{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px;gap:18px}
.end-screen-wrap h2{margin:0 0 8px;color:#315d4c;font-size:22px}
.start-btn{background:#3f735f;color:#fff;font-size:16px;font-weight:700;padding:13px 40px;border-radius:999px;box-shadow:0 10px 22px #24352b30}
.start-btn:hover{background:#345f4e}
#helpfulPrompt .hub-cta{justify-content:center}
#helpfulPrompt .start-btn{background:#3f735f;color:#fff;border:0;padding:12px 26px}
#helpfulPrompt .onboarding-hub-form{justify-content:center;margin-top:4px}
#helpfulPrompt .onboarding-hub-form input{flex:1;min-width:140px;max-width:220px;border:1px solid #cad7cf;border-radius:10px;padding:10px 12px;font:inherit;background:white}
#helpfulPrompt .start-btn:hover{background:#345f4e}
.end-screen-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.end-screen-actions button{font-size:15px;padding:12px 22px}
/* Click-reaction flourishes (see playVitoFun in app.js)—a speech-bubble
   "sign" and star-shaped confetti pieces, alternatives to the plain
   colored confetti so the same click doesn't feel identical every time. */
.vito-sign{position:fixed;transform:translate(-50%,-100%);background:#fdfdfb;color:#294a3e;font-weight:650;font-size:13px;padding:8px 14px;border-radius:12px;box-shadow:0 8px 20px #24352b30;pointer-events:none;z-index:999;white-space:nowrap;animation:vito-sign-pop 1.8s ease forwards}
.vito-sign::after{content:'';position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fdfdfb}
@keyframes vito-sign-pop{0%{opacity:0;transform:translate(-50%,-88%) scale(.8)}15%{opacity:1;transform:translate(-50%,-102%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-118%) scale(.95)}}
.vito-star-piece{position:fixed;font-size:16px;pointer-events:none;animation:confetti-burst 1s cubic-bezier(.25,.8,.35,1) forwards}
.face-scale{display:flex;align-items:flex-start;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.face-btn{display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;padding:6px;border-radius:14px;font-size:12px;font-weight:650;color:#4a5b53}
.face-btn:hover{background:#edf4ef}
.face-btn .rating-face{width:40px;height:40px}
.face-btn .face-bg{fill:#e4ede6}
.face-btn .face-eyes circle{fill:#3a463f}
.face-btn .face-mouth{fill:none;stroke:#3a463f;stroke-width:5;stroke-linecap:round}
.solution-rating-offer .face-scale{justify-content:flex-start;gap:8px}
.solution-rating-offer .face-btn .rating-face{width:30px;height:30px}
.message.activation-gate .face-scale{justify-content:flex-start;gap:8px}
.message.activation-gate .face-btn .rating-face{width:30px;height:30px}
.message.activation-gate .face-btn{font-size:11px}

/* My Patterns page: one consistent, softly-lifted section style so the
   page reads as a single calm sequence (This week, the trend, triggers,
   patterns, what helps) rather than five unrelated boxes. Scoped to
   #myPatterns—the Insights tab shares .insight-section and keeps its own
   look. */
#myPatterns .dash-header-row h2{font-size:26px;letter-spacing:-.01em;color:#1f3c30}
#myPatterns .insight-section{background:#fff;border:1px solid #e3ebe5;border-radius:20px;padding:22px 24px;margin:18px 0;box-shadow:0 1px 2px #24352b0a,0 10px 28px #24352b0a}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.sec-head h3{margin:0;font-size:18px;color:#1f3c30}
.sec-sub{margin:3px 0 0;font-size:13px;color:#6d7c75;line-height:1.5}
.sec-meta{font-size:12px;font-weight:650;color:#4f7566;background:#eef4f0;border-radius:99px;padding:4px 11px;white-space:nowrap}
#myPatterns .recap-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;text-align:left;margin-top:0}
#myPatterns .recap-grid>div{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:16px;background:linear-gradient(160deg,#f5faf6,#e7f1ea)}
.recap-grid .recap-ico{display:grid;place-items:center;width:34px;height:34px;margin:0 0 10px;border-radius:11px;background:#fff;color:#3f735f;box-shadow:0 1px 3px #24352b14}
#myPatterns .recap-grid strong{font-size:32px;line-height:1.1;letter-spacing:-.02em}
#myPatterns .recap-grid span:not(.recap-ico){font-size:13px;color:#4b5a53;margin-top:2px}
#myPatterns .recovery-note{background:#f3f8f5;border-top:0;border-radius:12px;padding:11px 14px;margin-top:16px}
#myPatterns .recovery-note .arrow{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#dcebe1;font-size:14px}
#myPatterns .recovery-note.declining .arrow{background:#f6e0dc}
#myPatterns .trigger-row{border:1px solid #e6eee8;border-radius:14px;padding:0 16px;margin-top:10px;background:#fbfdfb;transition:border-color .15s,box-shadow .15s}
#myPatterns .trigger-row:first-child{border-top:1px solid #e6eee8;margin-top:0}
#myPatterns .trigger-row:hover{border-color:#cfe0d4}
#myPatterns .trigger-row[open]{background:#fff;border-color:#cfe0d4;box-shadow:0 4px 16px #24352b0d}
#myPatterns .trigger-row>summary{padding:14px 0;font-weight:650;color:#1f3c30}
#myPatterns .trigger-row>summary .count{font-weight:600;font-size:12px;color:#4f7566;background:#eef4f0;border-radius:99px;padding:3px 10px}
#myPatterns .trigger-row>summary .count:empty{display:none}
#myPatterns .trigger-row-detail{border-top:1px solid #eef2ef;padding:4px 0 16px}
#myPatterns .helps-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
#myPatterns .check-item{background:#f3f8f5;border-radius:12px;padding:12px 14px;font-weight:600;color:#1f3c30}
#myPatterns .check-mark{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#3f735f;color:#fff;font-size:12px}
#myPatterns .most-helpful{margin-top:14px;padding:14px 16px;border:0;border-radius:14px;background:linear-gradient(135deg,#f5faf6,#e7f1ea)}
#myPatterns .pattern-head{display:flex;flex-direction:column;gap:3px;min-width:0}
#myPatterns .pattern-title{font-size:16px;font-weight:700;color:#1f3c30}
#myPatterns .pattern-desc{font-size:13px;font-weight:400;line-height:1.5;color:#5f6f67}
#myPatterns .trigger-row-static{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;font-weight:650;color:#1f3c30}
#myPatterns .trigger-row-static .count{font-weight:600;font-size:12px;color:#4f7566;background:#eef4f0;border-radius:99px;padding:3px 10px}
#myPatterns .trigger-row>summary{gap:10px}
#myPatterns .trigger-row>summary>:first-child{flex:1;min-width:0}
#myPatterns .trigger-row>summary::after{content:'▾';flex:none;color:#4f7566;font-size:12px}
#myPatterns .trigger-row[open]>summary::after{content:'▴'}
#myPatterns .trigger-row>summary .count{flex:none;white-space:nowrap}
#myPatterns .trigger-row>summary .count::after{content:none}
#myPatterns .story-line{font-size:14px;line-height:1.7;margin:12px 0 0;color:#33433d}
#myPatterns .story-line strong{color:#1f3c30}

/* "Learning" meters: replace the bare "Still learning" with exactly how much
   Vito still needs, as a bar, so it's clear what talking more will unlock. */
.learn-meter{padding:16px 18px;border-radius:16px;background:linear-gradient(160deg,#f5faf6,#e9f2ec);border:1px solid #d9e7dd}
.learn-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:#33433d}
.learn-top strong{font-size:22px;color:#1f3c30}
.learn-pct{font-size:12px;font-weight:700;color:#4f7566}
.learn-bar{height:10px;margin:10px 0 12px;border-radius:99px;background:#dbe8df;overflow:hidden}
.learn-bar i{display:block;height:100%;min-width:0;border-radius:99px;background:linear-gradient(90deg,#6f9a86,#3f735f);transition:width .4s ease}
.learn-note{margin:0 0 6px;font-size:14px;line-height:1.5;color:#1f3c30;font-weight:600}
.learn-ask{margin:0;font-size:13px;line-height:1.5;color:#5f6f67}
.learn-ask a{color:#3f735f;font-weight:700;white-space:nowrap}
.needs{font-style:normal;font-size:13px;font-weight:600;line-height:1.4;color:#6d7c75}
.summary-cards .needs{display:block}
#myPatterns .cards-label{margin:18px 0 4px}
@media(prefers-reduced-motion:reduce){.learn-bar i{transition:none}}

/* Areas of life: one row per area, with a share-of-conversations bar. */
.area-row{padding:12px 0;border-top:1px solid #eef2ef}
.area-row:first-child{border-top:0;padding-top:0}
.area-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.area-top strong{font-size:15px;color:#1f3c30}
.area-count{font-size:12px;font-weight:600;color:#4f7566;background:#eef4f0;border-radius:99px;padding:3px 10px;white-space:nowrap}
.area-bar{height:8px;margin:8px 0 6px;border-radius:99px;background:#e6eee8;overflow:hidden}
.area-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#6f9a86,#3f735f)}
.area-includes{margin:0;font-size:12.5px;line-height:1.5}

/* "How you've been doing" chart: entering vs leaving over a chosen period.
   Prefixed with .chart svg so these win over the older generic .chart svg
   line/polyline rules above. */
.insight-section svg.how-chart{display:block;width:100%;height:auto;min-width:560px;max-height:300px}
.insight-section svg.how-chart .hw-grid{stroke:#e6eee8;stroke-width:1}
.insight-section svg.how-chart .hw-label{font-size:11px;fill:#6d7c75}
.insight-section svg.how-chart .hw-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.insight-section svg.how-chart .hw-line.hw-b{stroke:#b37a62}
.insight-section svg.how-chart .hw-line.hw-a{stroke:#3f735f}
.insight-section svg.how-chart .hw-band{stroke-width:9;stroke-linecap:round;opacity:.22}
.insight-section svg.how-chart .hw-band.calmer{stroke:#3f735f}
.insight-section svg.how-chart .hw-band.higher{stroke:#c0605a}
.insight-section svg.how-chart .hw-dot{stroke:#fff;stroke-width:2}
.insight-section svg.how-chart .hw-dot.hw-b{fill:#b37a62}
.insight-section svg.how-chart .hw-dot.hw-a{fill:#3f735f}
.hw-legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#4b5a53;margin-top:6px}
.hw-key{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.hw-key.hw-b{background:#b37a62}
.hw-key.hw-a{background:#3f735f}
.hw-note{margin-left:auto;color:#6d7c75}
#howSection .range-filter{margin:0 0 14px}
#howSection .summary-cards{margin:0 0 16px}

/* Insights: Changes over time (four sections) */
svg.how-chart{display:block;width:100%;height:auto;min-width:560px;max-height:300px}
.insight-section svg.how-chart .hw-zero{stroke:#b9c7be;stroke-width:1.5}
.insight-section svg.how-chart .ch-raw{fill:#3f735f;opacity:.28}
.insight-section svg.how-chart .ch-bar.up{fill:#3f735f}
.insight-section svg.how-chart .ch-bar.down{fill:#c0605a}
.insight-section svg.how-chart .ch-bar.flat{fill:#b8c4bd}
.insight-section svg.how-chart .ch-bar.yes{fill:#3f735f}
.insight-section svg.how-chart .ch-bar.bit{fill:#d8b26e}
.insight-section svg.how-chart .ch-bar.no{fill:#c0876f}
#feelingBody,#progressBody,#vitoBody,#helpsBody{overflow-x:auto}
.hw-key.up,.hw-key.yes{background:#3f735f}
.hw-key.flat{background:#b8c4bd}
.hw-key.down{background:#c0605a}
.hw-key.bit{background:#d8b26e}
.hw-key.no{background:#c0876f}
.ch-sum{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#33433d}
.ch-sum strong{color:#1f3c30}
.trend-pill{display:inline-block;margin-right:8px;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.02em;background:#eef4f0;color:#3f735f}
.trend-pill.improving{background:#e1f0e6;color:#2f6a4c}
.trend-pill.declining{background:#f7e3df;color:#a3453c}
.trend-pill.fluctuating{background:#f6ecd7;color:#8a6a1f}
.trend-pill.stable{background:#e8eef2;color:#4a6172}
.share-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:#e6eee8;margin:6px 0 10px}
.share-bar i{display:block;height:100%}
.share-bar i.up,.share-bar i.yes{background:#3f735f}
.share-bar i.flat{background:#b8c4bd}
.share-bar i.down{background:#c0605a}
.share-bar i.bit{background:#d8b26e}
.share-bar i.no{background:#c0876f}
.ch-moves{margin:8px 0 14px;font-size:13px;color:#4b5a53}
.move-chip{display:inline-block;margin:3px 6px 3px 0;padding:3px 10px;border-radius:99px;background:#f3f7f4;border:1px solid #dfe9e2;font-weight:600;color:#1f3c30}
.move-chip em{font-style:normal;color:#6d7c75;font-weight:500}
.app-row{padding:12px 0;border-top:1px solid #eef2ef}
.app-row:first-of-type{border-top:0}
.app-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.app-top strong{font-size:14.5px;color:#1f3c30}
.app-count{font-size:12px;font-weight:600;color:#4f7566;white-space:nowrap}
.app-trend{margin-left:6px;font-size:14px;color:#6d7c75}
.app-trend.up{color:#2f6a4c}
.app-trend.down{color:#a3453c}

/* ---- Warm yellow: the four-question path and every face rating scale ---- */
:root{--sun-50:#fdfaf1;--sun-100:#faf6e8;--sun-200:#f4ecd0;--sun-300:#ecdfb2;--sun-400:#dcc574;--sun-line:#e6dcb4;--sun-ink:#4a3d1c;--sun-arrow:#c9a23f}

.face-scale{gap:12px}
.face-btn{background:var(--sun-50);border:1px solid var(--sun-line);padding:9px 12px 8px;border-radius:18px;color:var(--sun-ink);min-width:64px;box-shadow:0 2px 6px #c8961a1f;transition:transform .15s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease}
.face-btn:hover{background:var(--sun-100);border-color:var(--sun-400);transform:translateY(-2px);box-shadow:0 7px 14px #c8961a33}
.face-btn:active{transform:translateY(0)}
.face-btn:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.face-btn .face-bg{fill:var(--sun-300);stroke:var(--sun-400);stroke-width:3}
.face-btn:hover .face-bg{fill:var(--sun-400)}
.face-btn .face-eyes circle{fill:var(--sun-ink)}
.face-btn .face-mouth{stroke:var(--sun-ink)}
.face-btn:disabled{opacity:.6;transform:none;box-shadow:none}
.solution-rating-offer .face-btn,.message.activation-gate .face-btn{padding:6px 9px 5px;border-radius:15px;min-width:0}

/* The four-question path through Insights: a connected row of steps in warm
   yellow. Numbered because it really is a sequence (feeling -> progress ->
   Vito's help -> what helps), each step a link to its section. */
.q-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:18px 0 0;padding:14px 10px;background:linear-gradient(180deg,var(--sun-50),#f6eed6);border:1px solid var(--sun-line);border-radius:20px}
.q-strip li{position:relative;display:flex;min-width:0}
.q-strip li+li::before{content:'';position:absolute;left:-10%;top:29px;width:20%;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--sun-arrow) 0 6px,transparent 6px 11px);opacity:.75;pointer-events:none}
.q-strip li+li::after{content:'';position:absolute;left:calc(10% - 8px);top:25px;width:9px;height:9px;border-top:3px solid var(--sun-arrow);border-right:3px solid var(--sun-arrow);transform:rotate(45deg);border-radius:2px;opacity:.85;pointer-events:none}
.q-strip a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 12px 10px;border-radius:16px;color:var(--sun-ink);text-decoration:none;transition:background .15s ease,transform .15s ease}
.q-strip a:hover{background:var(--sun-100);transform:translateY(-2px)}
.q-strip a:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.q-num{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:800;color:var(--sun-ink);background:radial-gradient(circle at 35% 30%,#ecdcae,var(--sun-400));box-shadow:0 0 0 4px var(--sun-50),0 3px 8px #c8961a40}
.q-text{display:grid;gap:3px;min-width:0}
.q-text strong{font-size:14px;line-height:1.25;font-weight:750;text-wrap:balance}
.q-text small{font-size:12px;line-height:1.3;color:#77602a;font-weight:550}
@media(max-width:700px){
  .q-strip{grid-template-columns:1fr;padding:10px 12px}
  .q-strip li+li::before{left:31px;top:-6px;width:3px;height:14px;background:repeating-linear-gradient(180deg,var(--sun-arrow) 0 5px,transparent 5px 9px)}
  .q-strip li+li::after{display:none}
  .q-strip a{flex-direction:row;text-align:left;align-items:center;gap:12px;padding:8px 10px}
}
.insight-section svg.how-chart .ch-barval{font-size:12px;font-weight:750;fill:#fff;pointer-events:none}

/* "How to read this chart" — a plain-language legend above every chart */
.how-to-read{margin:6px 0 14px;padding:10px 14px 12px;background:var(--sun-50);border:1px solid var(--sun-line);border-radius:14px;font-size:13px;line-height:1.5;color:var(--sun-ink)}
.how-to-read summary{cursor:pointer;font-weight:750;font-size:12.5px;letter-spacing:.02em;color:var(--sun-ink);list-style:none;display:flex;align-items:center;gap:8px}
.how-to-read summary::-webkit-details-marker{display:none}
.how-to-read summary::before{content:'';width:8px;height:8px;border-right:2.5px solid var(--sun-arrow);border-bottom:2.5px solid var(--sun-arrow);transform:rotate(-45deg);transition:transform .15s ease;margin-right:2px}
.how-to-read[open] summary::before{transform:rotate(45deg)}
.how-to-read ul{margin:8px 0 0;padding-left:18px;display:grid;gap:5px}
.how-to-read em{font-style:normal;font-weight:700;color:#6f561f}
.how-to-read .hw-key{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px}
.insight-section svg.how-chart .hw-dot.yes{fill:#3f735f}
.insight-section svg.how-chart .hw-dot.bit{fill:#d8b26e}
.insight-section svg.how-chart .hw-dot.no{fill:#c0876f}
.insight-section svg.how-chart .hw-line.hw-neutral{stroke:#b8c4bd;stroke-width:2;stroke-dasharray:5 5}
.share-bar.big{height:30px;margin:6px 0 4px}
.share-bar.big i{display:flex;align-items:center;justify-content:center;min-width:0}
.share-bar.big i b{font-size:13px;color:#fff;font-weight:800}
.share-bar.big i.bit b{color:var(--sun-ink)}
.insight-section svg.how-chart .hw-area{fill:#3f735f;opacity:.10}
.insight-section svg.how-chart .hw-line.hw-trend{stroke:#8a6a22;stroke-width:2.5;stroke-dasharray:6 5}
.hw-key.hw-trend{background:#8a6a22}
.profile-sub{margin:22px 0 6px;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#3f735f}
.narrative-content p{line-height:1.65}

/* Overall Patterns and Deeper Drives: a fading preview that expands to the full profile */
.profile-body{position:relative;transition:max-height .35s ease}
.profile-body.collapsed{max-height:230px;overflow:hidden}
.profile-body.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%);pointer-events:none}
.profile-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:10px 0 0;padding:11px 16px;border-radius:14px;background:var(--sun-100);border:1px solid var(--sun-line);color:var(--sun-ink);font-size:13.5px;font-weight:750;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}
.profile-toggle:hover{background:var(--sun-200);box-shadow:0 4px 12px #c8961a2e}
.profile-toggle:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.profile-toggle[hidden]{display:none}
.pt-chev{width:8px;height:8px;border-right:2.5px solid var(--sun-arrow);border-bottom:2.5px solid var(--sun-arrow);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.profile-toggle.open .pt-chev{transform:rotate(-135deg) translateY(-2px)}
@media(prefers-reduced-motion:reduce){.profile-body{transition:none}}

/* ---- Navigation: one flat menu on every page (text with a small icon, no button chrome) ---- */
:root{--mint-100:#e7f1ea;--mint-200:#dbe9df;--mint-line:#c7dacd}
.side-nav{position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;width:200px;background:linear-gradient(180deg,var(--mint-100),var(--mint-200));border-right:1px solid var(--mint-line);padding:22px 12px;gap:0}
.side-nav-top,.side-nav-bottom{display:flex;flex-direction:column;gap:2px}
.side-nav-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--mint-line)}
.side-nav .side-link{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 12px;text-align:left;font-size:15px;font-weight:600;letter-spacing:.005em;background:transparent;color:#2f4a3d;border:0;border-radius:10px;box-shadow:none;text-decoration:none;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}
.side-nav .side-link:hover{background:rgba(250,246,232,.75);color:var(--sun-ink);transform:none}
.side-nav .side-link:focus-visible{outline:3px solid #8a6a22;outline-offset:1px}
.side-nav .side-link.active,.side-nav .side-link.active:hover{background:var(--sun-100);color:#3a2f14;font-weight:750;box-shadow:inset 3px 0 0 var(--sun-arrow);transform:none}
.side-nav-bottom .side-link{min-height:38px;font-size:14px;font-weight:550;color:#4f6a5c}
.side-nav .side-link.danger-link{color:#8a3d30}
.side-nav .side-link.danger-link:hover{background:rgba(250,246,232,.75);color:#7a3226}
/* the five places to go get a small line icon (same order on every page) */
.side-nav-top .side-link::before{content:'';flex:none;width:19px;height:19px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;opacity:.85}
.side-nav-top .side-link:nth-child(1){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1.2 1.6) scale(.225)' stroke-width='8.6'%3E%3Cpath d='M39.5 9.6 Q53 3 66.4 9.7 L77.8 15.4 Q93 23 94.2 40 L94.5 44.1 Q96 64 79.4 75.1 L62.1 86.6 Q48 96 33.3 87.5 L22.3 81.1 Q5 71 4.5 51 L4.4 44 Q4 27 19.3 19.5 Z'/%3E%3Cpath d='M38 66 Q50 78 62 66'/%3E%3C/g%3E%3Ccircle cx='8.9' cy='11.6' r='1.35' fill='black' stroke='none'/%3E%3Ccircle cx='15.1' cy='11.6' r='1.35' fill='black' stroke='none'/%3E%3C/svg%3E")}
.side-nav-top .side-link:nth-child(2){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E")}
.side-nav-top .side-link:nth-child(3){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 5-6'/%3E%3C/svg%3E")}
.side-nav-top .side-link:nth-child(5){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
.side-nav-top .side-link:nth-child(6){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v17H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M4 21.5A2.5 2.5 0 0 1 6.5 19H20'/%3E%3C/svg%3E")}
.side-nav-top .side-link:nth-child(7){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-2.4z'/%3E%3C/svg%3E")}
.about-main{flex:1;min-width:0}
/* Phone: a slim line of small links on top, and the five places as a tab bar fixed at the bottom */
/* ---- A fixed app window: the same size on every page, so the menu buttons never move ---- */
html{scrollbar-gutter:stable}
@media(min-width:821px){
  body:has(.app-shell){overflow:hidden}
  .app-shell{width:min(1040px,100%);height:100vh;min-height:0;overflow:hidden}
  .app-shell>main{height:100vh;overflow-y:auto;overflow-x:hidden;min-width:0}
  .side-nav{position:static;height:100vh;align-self:stretch}
}

/* Areas of Life: areas -> patterns -> journal */
.area-cards{display:grid;gap:10px;margin-top:10px}
.area-card{border:1px solid #e3ece5;border-radius:14px;background:#fff}
.area-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;flex-wrap:wrap}
.area-card>summary::-webkit-details-marker{display:none}
.area-card>summary::before{content:'';width:8px;height:8px;border-right:2.5px solid #7d9a8b;border-bottom:2.5px solid #7d9a8b;transform:rotate(-45deg);transition:transform .15s ease;flex:none;margin-right:2px}
.area-card[open]>summary::before{transform:rotate(45deg)}
.area-name{font-size:15px;font-weight:700;color:#1f3c30;flex:1;min-width:150px}
.area-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.area-body{padding:2px 16px 14px 32px;border-top:1px solid #eef2ef}
.area-sub{margin:12px 0 6px;font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:#5d7a6c}
.area-changes-title{margin-top:16px}
.area-changes{margin:0 0 6px;padding-left:18px;display:grid;gap:4px;font-size:13.5px;line-height:1.5;color:#33433d}
.area-patterns{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.area-patterns li{display:grid;grid-template-columns:minmax(0,1fr) 34px 132px;align-items:center;gap:10px}
.area-patterns a{min-width:0;text-decoration:none;color:#1f3c30;font-weight:600;font-size:14px;padding:6px 10px;border-radius:9px;background:var(--sun-100);border:1px solid var(--sun-line)}
.area-patterns a:hover{background:var(--sun-200)}
.ap-count{min-width:26px;text-align:center;font-weight:750;font-size:13px;color:#3f735f;background:#eef4f0;border-radius:99px;padding:2px 8px}
.area-trend{font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 9px;white-space:nowrap}
.area-trend.up{background:#e6f1ea;color:#2f6a4f}.area-trend.down{background:#f4e8e0;color:#8a4a2f}.area-trend.new{background:#e9eef7;color:#3b5a86}.area-trend.quiet{background:#eef0ee;color:#66746c}.area-trend.steady{background:#f0f2ef;color:#66746c}
.area-spark{display:block;width:100%;max-width:320px;height:38px}
.area-spark rect.on{fill:#6f9a86}.area-spark rect.off{fill:#e3ebe6}
.area-all{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:#3f735f;text-decoration:none}
.area-all:hover{text-decoration:underline}
.journal-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;background:var(--sun-50);border:1px solid var(--sun-line);border-radius:12px;font-size:13.5px;color:var(--sun-ink)}
.journal-filter button{background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line);font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:99px}
.journal-filter button:hover{background:var(--sun-200)}
.area-sub .muted{text-transform:none;letter-spacing:0;font-weight:500}
.area-patterns .area-trend{justify-self:start}
@media(max-width:560px){.area-patterns li{grid-template-columns:minmax(0,1fr) 34px}.area-patterns .area-trend{grid-column:1 / -1}}

/* ---- Every other button in the app: the same oat cream with a gold edge ---- */
button:focus-visible,.start-btn:focus-visible,.course-button:focus-visible,.button-link:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
button:disabled{opacity:.55;cursor:not-allowed}
.start-btn,#helpfulPrompt .start-btn{background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line);box-shadow:0 2px 8px #6b5a2a1f}
.start-btn:hover,#helpfulPrompt .start-btn:hover{background:var(--sun-200);border-color:#d8c47c;transform:translateY(-1px);box-shadow:0 5px 14px #6b5a2a2b}
.course-button,.button-link{background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line)}
.course-button:hover,.button-link:hover{background:var(--sun-200)}
.admin-gate button[type=submit]{background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line)}
.admin-gate button[type=submit]:hover{background:var(--sun-200)}
.narrative-header button{background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line)}
.narrative-header button:hover{background:var(--sun-200)}
.ghost-button{background:var(--sun-50);border:1px dashed var(--sun-line);color:var(--sun-ink)}
.ghost-button:hover{background:var(--sun-100)}
.quick-actions button,.decision-buttons button{background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line)}
.quick-actions button:hover,.decision-buttons button:hover{background:var(--sun-200)}
.quick-actions button.start-btn:hover{background:var(--sun-200)}
.activation-scale button.active,.activation-scale button:hover{background:var(--sun-300);color:var(--sun-ink);border-color:#d8c47c}
.journal-edit-actions button:first-child{background:var(--sun-200);color:var(--sun-ink);border-color:#d8c47c}
.journal-edit-actions button:first-child:hover{background:var(--sun-300)}
@media(max-width:820px){
  main>header,.dashboard-header{padding:14px 16px;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px}
  main>header h1,.dashboard-header h1{font-size:24px;margin:0}
  main>header p,.dashboard-header p{font-size:13px;margin:2px 0 0}
  .header-vito-btn{width:44px;height:44px}
}

/* ---- Folded cards: Dashboard sections and Home. Everything starts closed. ---- */
.fold{background:#fff;border:1px solid #e0e8e2;border-radius:17px;padding:0;margin:14px 0;overflow:hidden}
.fold-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px}
.fold-head::-webkit-details-marker{display:none}
.fold-head:hover{background:#fafcfa}
.fold-head:focus-visible{outline:3px solid #8a6a22;outline-offset:-3px;border-radius:17px}
.fold-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--mint-100);color:#3f735f;border:1px solid var(--mint-line)}
.fold-title{flex:1;min-width:0}
.fold-title h3{margin:0;font-size:17px;color:#1f3c30}
.fold-title .sec-sub{margin:2px 0 0}
.fold-badge{flex:none;font-size:12px;font-weight:700;color:var(--sun-ink);background:var(--sun-100);border:1px solid var(--sun-line);border-radius:99px;padding:4px 11px;white-space:nowrap}
.fold-chev{flex:none;width:9px;height:9px;border-right:2.5px solid #7d9a8b;border-bottom:2.5px solid #7d9a8b;transform:rotate(-45deg);transition:transform .2s ease;margin:0 4px}
.fold[open]>.fold-head .fold-chev{transform:rotate(45deg)}
.fold[open]>.fold-head{border-bottom:1px solid #eef2ef}
.fold-body{padding:16px 18px 18px}
.insight-section.fold{padding:0}
@media(max-width:560px){.fold-head{padding:14px;gap:12px}.fold-badge{display:none}.fold-ico{width:36px;height:36px}}
/* Home */
.end-screen-wrap{position:relative;min-height:0;padding:36px 24px 10px}
.end-screen-wrap::before{content:'';position:absolute;left:50%;top:38%;width:520px;height:520px;max-width:120%;transform:translate(-50%,-50%);background:radial-gradient(circle,#e3efe7 0%,rgba(227,239,231,0) 68%);pointer-events:none;z-index:0}
.end-screen-wrap>*{position:relative;z-index:1}
.home-hint{margin:-4px 0 0;font-size:13.5px;color:#6d7c75}
.home-cards{max-width:640px;margin:8px auto 40px;padding:0 20px}
.home-cards .home-fold{margin:12px 0}
.home-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.home-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;background:#f6f9f6;border-radius:11px;font-weight:650;color:#1f3c30;font-size:14.5px}
.home-list li span{font-size:12.5px;font-weight:500;color:#6d7c75;text-align:right}
.home-more{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:#3f735f;text-decoration:none}
.home-more:hover{text-decoration:underline}
.home-cards[hidden]{display:none}
#myPatterns .insight-section.fold{padding:0;margin:12px 0;border-radius:18px}

/* The one sound switch: a line icon in the same style as the menu icons, top right of every screen */
main>header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}
.voice-toggle{flex:none;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line);box-shadow:0 1px 2px #6b5a2a14;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.voice-toggle:hover{background:var(--sun-200);transform:translateY(-1px)}
.voice-toggle.off{background:#f1efe8;color:#8a877c;border-color:#dcd8cb}
.voice-toggle.off:hover{background:#ebe8df}
.voice-toggle:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.voice-toggle svg{display:block}

/* ---- Home: Vito speaks in a bubble that floats over the hero, taking no space,
   so the questions, buttons and ratings that appear never push anything around ---- */
#endScreen .end-screen-wrap{position:relative}
#endScreen #helpfulPrompt{position:absolute;top:6px;left:50%;width:min(390px,calc(100% - 28px));margin:0;padding:14px 16px 16px;z-index:6;background:#fff;border:1px solid var(--mint-line);border-radius:22px;box-shadow:0 16px 40px #24352b2b,0 0 0 4px #e7f1ea;text-align:center;animation:bubble-pop .42s cubic-bezier(.2,.9,.3,1.25) both;transform-origin:50% 100%}
#endScreen #helpfulPrompt::after{content:'';position:absolute;left:50%;bottom:-11px;width:20px;height:20px;background:#fff;border-right:1px solid var(--mint-line);border-bottom:1px solid var(--mint-line);transform:translateX(-50%) rotate(45deg);border-radius:0 0 5px 0;box-shadow:4px 4px 0 -1px #e7f1ea}
#endScreen #helpfulPrompt[hidden]{display:none}
#endScreen #helpfulPrompt p{margin:0 0 10px;font-size:15px;line-height:1.4}
#endScreen #helpfulPrompt .face-scale{gap:6px;margin-top:2px}
#endScreen #helpfulPrompt .face-btn{padding:6px 8px 5px;min-width:0;font-size:11.5px}
#endScreen #helpfulPrompt .face-btn .rating-face{width:32px;height:32px}
#endScreen #helpfulPrompt .ghost-button{width:auto;display:inline-block;margin-top:8px;padding:4px 14px;font-size:12px}
#endScreen #helpfulPrompt .start-btn{padding:10px 22px;font-size:15px}
#endScreen #helpfulPrompt .quick-actions{justify-content:center}
@keyframes bubble-pop{0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.84)}60%{opacity:1;transform:translateX(-50%) translateY(-3px) scale(1.03)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
/* the words behind the bubble fade back instead of being pushed away */
#endScreen .end-screen-wrap #endScreenHeading,#endScreen .end-screen-wrap .home-hint{transition:opacity .25s ease}
#endScreen .end-screen-wrap:has(#helpfulPrompt:not([hidden])) #endScreenHeading,#endScreen .end-screen-wrap:has(#helpfulPrompt:not([hidden])) .home-hint{opacity:.12}
@media(prefers-reduced-motion:reduce){#endScreen #helpfulPrompt{animation:none;transform:translateX(-50%)}}
@media(max-width:560px){
  #endScreen #helpfulPrompt{padding:12px 10px 14px}
  #endScreen #helpfulPrompt .face-scale{flex-wrap:nowrap;gap:3px}
  #endScreen #helpfulPrompt .face-btn{flex:1;min-width:0;padding:5px 2px 4px;font-size:10px;letter-spacing:-.01em}
  #endScreen #helpfulPrompt .face-btn .rating-face{width:28px;height:28px}
}

/* ---- Journal: the same card language as the other pages ---- */
.journal-entries{gap:12px;margin-top:18px}
.journal-day{background:#fff;border:1px solid #e0e8e2;border-radius:18px;box-shadow:0 1px 2px #24352b0a}
.journal-day>summary{align-items:center;gap:14px;padding:14px 18px}
.journal-day>summary:hover{background:#fafcfa}
.journal-day>summary::before{content:'';flex:none;width:38px;height:38px;border-radius:12px;background:var(--mint-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f735f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/19px no-repeat;border:1px solid var(--mint-line)}
.journal-day>summary strong{flex:1;font-size:16px;color:#1f3c30}
.journal-day>summary span{flex:none;font-size:12px;font-weight:700;color:var(--sun-ink);background:var(--sun-100);border:1px solid var(--sun-line);border-radius:99px;padding:4px 11px}
.journal-day>summary::after{content:'';flex:none;width:9px;height:9px;border-right:2.5px solid #7d9a8b;border-bottom:2.5px solid #7d9a8b;transform:rotate(-45deg);transition:transform .2s ease;margin:0 4px}
.journal-day[open]>summary::after{transform:rotate(45deg)}
.journal-day[open]>summary{border-bottom:1px solid #eef2ef}
.journal-conversation-group{padding:0 14px}
.journal-conversation-group:not(:last-child){border-bottom:0;padding-bottom:0}
.journal-conversation-group{margin:10px 0;background:#fbfcfa;border:1px solid #e7ede9;border-radius:14px;padding:0 14px}
.journal-conversation-group[open]{background:#fff;border-color:#d9e5dc}
.journal-conv-head{padding:12px 0;gap:10px}
.journal-conv-time{font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--sun-ink);background:var(--sun-100);border:1px solid var(--sun-line);border-radius:99px;padding:3px 10px}
.journal-conv-time::after{content:none!important}
.journal-conv-preview{font-size:14px;color:#33433d}
.journal-conv-activation{font-size:11.5px;font-weight:600;color:#4f6a5c;background:#eef4f0;border-radius:99px;padding:3px 9px}
.journal-conv-head::after{content:'';flex:none;width:8px;height:8px;border-right:2.5px solid #7d9a8b;border-bottom:2.5px solid #7d9a8b;transform:rotate(-45deg);transition:transform .2s ease;margin:0 2px}
.journal-conversation-group[open]>.journal-conv-head::after{transform:rotate(45deg)}
.journal-conv-delete,.journal-actions .journal-edit{font-size:0;line-height:0;width:30px;height:30px;padding:0;border-radius:9px;display:grid;place-items:center;background:transparent;border:0;opacity:1;cursor:pointer;box-shadow:none}
.journal-conv-delete::before,.journal-actions .journal-edit::before{content:'';width:17px;height:17px;background:#8a9d92}
.journal-conv-delete::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat}
.journal-actions .journal-edit::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat}
.journal-conv-delete:hover{background:#f6e6e1}.journal-conv-delete:hover::before{background:#a3453c}
.journal-actions .journal-edit:hover{background:var(--sun-100)}.journal-actions .journal-edit:hover::before{background:var(--sun-ink)}
.journal-conversation{gap:10px;padding:4px 0 16px}
.journal-message{border-radius:16px;padding:10px 14px;max-width:80%}
.journal-message.user{background:#dcebe1;color:#1f3c30;border-bottom-right-radius:5px}
.journal-message.vito{background:var(--sun-50);border:1px solid var(--sun-line);color:#3a3120;border-bottom-left-radius:5px}
.journal-message small{opacity:.7;font-size:11px;font-weight:600;letter-spacing:.02em}
.journal-message p{font-size:14.5px;line-height:1.5}
.journal-actions{margin-top:2px;justify-content:flex-end}
.journal-empty{background:#fff;border:1px dashed #cfddd4;border-radius:18px;padding:48px 20px}
.journal-empty h3{margin:0 0 6px;color:#1f3c30}
@media(max-width:560px){.journal-day>summary{padding:12px 14px;gap:12px}.journal-day>summary span{display:none}.journal-message{max-width:92%}}

/* ---- Home: a fixed headroom above Vito. The heading sits in it, and Vito's bubble replaces it there, entirely above him ---- */
#endScreen .end-screen-wrap{padding-top:28px;gap:18px}
#endScreen #endScreenHeading{margin:0;height:164px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}
#endScreen #helpfulPrompt{top:auto;bottom:calc(100% - 178px)}
@media(max-width:560px){#endScreen #endScreenHeading{height:150px}#endScreen #helpfulPrompt{bottom:calc(100% - 164px)}}

/* ---- Home: the highlighted "Let's chat" call to action above the folded cards ---- */
.home-chat-cta{display:flex;align-items:center;justify-content:center;gap:11px;width:min(600px,calc(100% - 40px));margin:4px auto 6px;padding:15px 22px;border-radius:18px;background:linear-gradient(180deg,#f7e9b0,#efd98a);color:var(--sun-ink);border:1px solid #dcc574;font-size:17px;font-weight:800;letter-spacing:.01em;box-shadow:0 8px 22px #b9962a33,0 1px 0 #fff8 inset;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.home-chat-cta:hover{background:linear-gradient(180deg,#f9edb9,#f2de95);transform:translateY(-2px);box-shadow:0 12px 26px #b9962a3d,0 1px 0 #fff8 inset}
.home-chat-cta:active{transform:translateY(0)}
.home-chat-cta:focus-visible{outline:3px solid #8a6a22;outline-offset:3px}
.home-chat-cta svg{flex:none}

/* ---- Rock paper scissors, inside Vito's bubble ---- */
.rps-entry{display:inline-block;margin-top:10px;padding:6px 14px;border-radius:99px;background:transparent;border:1px dashed var(--sun-line);color:var(--sun-ink);font-size:12.5px;font-weight:650;box-shadow:none}
.rps-entry:hover{background:var(--sun-50)}
.rps-row{display:flex;justify-content:center;gap:10px;margin:2px 0 4px}
.rps-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:78px;padding:8px 6px 7px;border-radius:18px;background:var(--sun-100);border:1px solid var(--sun-line)}
.rps-btn:hover{background:var(--sun-200);transform:translateY(-2px)}
.rps-emoji{font-size:28px;line-height:1.1}
.rps-name{font-size:11.5px;font-weight:700;color:var(--sun-ink)}
.rps-hands{display:flex;justify-content:center;gap:34px;font-size:38px;height:52px}
.rps-shake{display:inline-block;animation:rps-shake .38s ease-in-out infinite}
.rps-shake.late{animation-delay:.19s}
@keyframes rps-shake{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(8deg)}}
.rps-count{font-size:18px!important;font-weight:800!important}
.rps-result{display:flex;align-items:center;justify-content:center;gap:16px;font-size:40px;line-height:1}
.rps-result span{display:flex;flex-direction:column;align-items:center;gap:2px}
.rps-result i{font-style:normal;font-size:11px;font-weight:700;color:#6d7c75;letter-spacing:.04em;text-transform:uppercase}
.rps-result b{font-size:13px;color:#8a9691;font-weight:700}
.rps-line{margin:8px 0 2px!important;font-size:15px!important}
.rps-score{margin:0 0 6px!important;font-size:12px!important;font-weight:600!important;color:#6d7c75!important}
.rps-actions{display:flex;justify-content:center;gap:8px;align-items:center}
.rps-again{padding:7px 16px;font-size:13.5px;font-weight:750;border-radius:99px}
.rps-back{width:auto!important;display:inline-block!important;margin:0!important;padding:5px 14px!important;font-size:12.5px!important}
@media(prefers-reduced-motion:reduce){.rps-shake{animation:none}}

/* ================= The chat room ================= */
#chat .chat-room{display:flex;flex-direction:column;min-height:calc(100vh - 66px);background:linear-gradient(180deg,#f2f8f4 0%,#fbfcfa 55%)}
#chat .chat-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(251,252,250,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #e3ece5}
#chat .chat-vito-btn{position:relative;top:auto;left:auto;width:46px;height:46px;flex:none}
#chat .chat-vito-btn::after{content:'';position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#5bb77f;border:2px solid #fbfcfa}
#chat .chat-title{display:flex;flex-direction:column;gap:1px;min-width:0}
#chat .chat-title strong{font-size:17px;color:#1f3c30}
#chat .chat-sub{font-size:12.5px;color:#6d7c75}
#chat .chat-safe{margin-left:auto;font-size:11.5px;font-weight:650;color:var(--sun-ink);background:var(--sun-50);border:1px solid var(--sun-line);border-radius:99px;padding:4px 11px;white-space:nowrap}
#chat #messages{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px 20px 10px}
#chat .message{max-width:80%;padding:11px 16px;border-radius:20px;font-size:15.5px;line-height:1.55;box-shadow:0 1px 2px #24352b0d;margin:0;animation:msg-in .28s ease both}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#chat .message.user{align-self:flex-end;background:#dcebe1;color:#1f3c30;border-bottom-right-radius:6px}
#chat .message.vito{align-self:flex-start;position:relative;background:#fff;border:1px solid #e3ece5;color:#26332f;border-bottom-left-radius:6px;padding-left:54px}
#chat .message.vito::before{content:'';position:absolute;left:12px;top:11px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 36% 46%,#fff 0 3px,transparent 3.6px),radial-gradient(circle at 64% 46%,#fff 0 3px,transparent 3.6px),radial-gradient(circle at 32% 28%,#528970,#2c4c3f 78%)}
#chat .message.thinking{padding-left:16px}#chat .message.thinking::before{display:none}
#chat .message.activation-gate{max-width:92%;background:#fbf9ee;border:1px solid var(--sun-line);box-shadow:none;animation:none}
#chat .message.activation-gate.answered{opacity:.6}
#chat .message.choice .choice-actions{display:flex;gap:8px;flex-basis:100%;margin-top:6px}
#chat .message.choice .choice-actions button{padding:9px 18px;border-radius:99px;font-size:14px;font-weight:750}
#chat .message.choice .choice-actions button:first-child{background:linear-gradient(180deg,#f7e9b0,#efd98a);border-color:#dcc574}
#chat .message.choice.answered{opacity:.75}
#chat .message.choice.answered .choice-actions button:not(.chosen){opacity:.4}
#chat .chat-composer{position:sticky;bottom:0;z-index:6;padding:10px 18px 16px;background:linear-gradient(180deg,rgba(251,252,250,0),#fbfcfa 30%)}
#chat #chatForm{display:flex;align-items:flex-end;gap:10px;margin:0;background:#fff;border:1px solid #d9e5dc;border-radius:28px;padding:8px 8px 8px 20px;box-shadow:0 8px 26px #24352b17;transition:border-color .15s ease,box-shadow .15s ease}
#chat #chatForm:focus-within{border-color:#d4b653;box-shadow:0 0 0 3px #f4ead0,0 8px 26px #24352b17}
#chat #chatForm textarea{flex:1;border:0;outline:0;background:transparent;resize:none;padding:9px 0;min-height:26px;max-height:140px;line-height:1.45;box-shadow:none;border-radius:0;font-family:inherit}
#chat #primaryAction{flex:none;padding:11px 20px;border-radius:99px;background:linear-gradient(180deg,#f7e9b0,#efd98a);border:1px solid #dcc574;color:var(--sun-ink);font-weight:800;font-size:14.5px;min-height:44px}
#chat #primaryAction:hover{background:linear-gradient(180deg,#f9edb9,#f2de95)}
#chat #dictationStatus{margin:6px 6px 0;min-height:0;font-size:12px}
#chat #listeningIndicator{margin:0 0 8px}
@media(max-width:820px){
  #chat .chat-room{min-height:calc(100vh - 260px)}
  #chat .chat-composer{bottom:0;padding:8px 12px calc(10px + env(safe-area-inset-bottom))}
  #chat form{margin-bottom:0}
  #chat #messages{padding:16px 12px 8px}
  #chat .message{max-width:90%}
  #chat .chat-safe{display:none}
  #chat .chat-top{padding:10px 14px}
}
/* ---- Home: Vito's fun bubble ---- */
.fun-chips{display:flex;flex-direction:column;gap:7px}
.fun-chips.row{flex-direction:row;justify-content:center;flex-wrap:wrap}
.fun-chip{padding:9px 16px;border-radius:14px;font-size:14px;font-weight:700;background:var(--sun-100);border:1px solid var(--sun-line);color:var(--sun-ink);box-shadow:none}
.fun-chip:hover{background:var(--sun-200);transform:translateY(-1px)}
.fun-chip.quiet{background:transparent;border-style:dashed;font-weight:600}
.joke-setup{font-weight:800!important;font-size:16px!important;line-height:1.35!important}
.joke-punch{color:#3f735f!important;font-weight:750!important;font-size:16px!important}

/* ---- "Make me smile": silly moves for Vito ---- */
.fun-chip.primary{background:linear-gradient(180deg,#f7e9b0,#efd98a);border-color:#dcc574;font-weight:800}
.fun-chip.primary:hover{background:linear-gradient(180deg,#f9edb9,#f2de95)}
.silly-emoji{font-size:34px!important;line-height:1.1!important;margin:0 0 4px!important}
.silly-text{margin-bottom:10px!important;line-height:1.4!important}
.welcome-chat-btn.silly-spin{animation:silly-spin .9s cubic-bezier(.4,.1,.3,1)}
.welcome-chat-btn.silly-boing{animation:silly-boing .8s ease}
.welcome-chat-btn.silly-wobble{animation:silly-wobble .9s ease}
@keyframes silly-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
@keyframes silly-boing{0%,100%{transform:scale(1,1) translateY(0)}20%{transform:scale(1.12,.86) translateY(6px)}45%{transform:scale(.9,1.14) translateY(-26px)}70%{transform:scale(1.06,.94) translateY(4px)}}
@keyframes silly-wobble{0%,100%{transform:rotate(0)}15%{transform:rotate(-9deg)}35%{transform:rotate(8deg)}55%{transform:rotate(-6deg)}75%{transform:rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.welcome-chat-btn.silly-spin,.welcome-chat-btn.silly-boing,.welcome-chat-btn.silly-wobble{animation:none}}

/* ---- Cards: War ---- */
.war-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;color:#6d7c75;margin-bottom:6px}
.war-table{display:flex;align-items:center;justify-content:center;gap:16px}
.war-table b{font-size:12px;color:#8a9691}
.war-side{display:flex;flex-direction:column;align-items:center;gap:3px}
.war-side i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6d7c75}
.pcard{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:62px;border-radius:8px;background:#fff;border:1px solid #cfd8d2;box-shadow:0 2px 6px #24352b22;color:#1f2a24;line-height:1}
.pcard b{font-size:17px;font-weight:800}
.pcard i{font-style:normal;font-size:18px;margin-top:2px}
.pcard.red{color:#c0392b}
.pcard.down{background:repeating-linear-gradient(45deg,#3f735f 0 5px,#4b8570 5px 10px);border-color:#2c4c3f}
.pcard.flip{animation:card-flip .42s ease both}
@keyframes card-flip{0%{transform:rotateY(90deg) scale(.9);opacity:.3}100%{transform:rotateY(0) scale(1);opacity:1}}
.war-msg{margin:8px 0 6px!important;font-size:14px!important;font-weight:700!important}
@media(prefers-reduced-motion:reduce){.pcard.flip{animation:none}}

/* War: pick your own card */
.war-hand{display:flex;gap:7px}
.pcard.pick{padding:0;cursor:pointer;box-shadow:0 2px 6px #24352b33;transition:transform .15s ease,box-shadow .15s ease}
.pcard.pick:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:0 8px 16px #24352b44;background:repeating-linear-gradient(45deg,#4b8570 0 5px,#5a967f 5px 10px)}
.pcard.pick:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}

/* ---- A cute, friendly Vito in the chat: a soft green face with big kind eyes, rosy cheeks and a smile ---- */
#chat .chat-vito-btn{background:transparent;box-shadow:0 4px 14px #4f9a7a55;padding:0;border:0;overflow:visible}
#chat .chat-vito-btn .cute-face{display:block;width:100%;height:100%}
#chat .chat-vito-btn:hover{transform:translateY(-1px) scale(1.04)}
#chat .message.vito::before{background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cdefs%3E%3CradialGradient%20id=%22cfm%22%20cx=%2235%25%22%20cy=%2228%25%22%20r=%2280%25%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23a6dcbc%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%235aa583%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2248%22%20fill=%22url%28%23cfm%29%22/%3E%3Cellipse%20cx=%2230%22%20cy=%2229%22%20rx=%2216%22%20ry=%229%22%20fill=%22%23fff%22%20opacity=%22.22%22%20transform=%22rotate%28-25%2030%2029%29%22/%3E%3Cellipse%20cx=%2235%22%20cy=%2244%22%20rx=%229.5%22%20ry=%2211%22%20fill=%22%23fff%22/%3E%3Cellipse%20cx=%2265%22%20cy=%2244%22%20rx=%229.5%22%20ry=%2211%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%2237%22%20cy=%2246%22%20r=%225.6%22%20fill=%22%232a4a3c%22/%3E%3Ccircle%20cx=%2267%22%20cy=%2246%22%20r=%225.6%22%20fill=%22%232a4a3c%22/%3E%3Ccircle%20cx=%2239%22%20cy=%2243.5%22%20r=%222%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%2269%22%20cy=%2243.5%22%20r=%222%22%20fill=%22%23fff%22/%3E%3Cellipse%20cx=%2222%22%20cy=%2262%22%20rx=%227.5%22%20ry=%225%22%20fill=%22%23ff9c8a%22%20opacity=%22.6%22/%3E%3Cellipse%20cx=%2278%22%20cy=%2262%22%20rx=%227.5%22%20ry=%225%22%20fill=%22%23ff9c8a%22%20opacity=%22.6%22/%3E%3Cpath%20d=%22M37%2064%20Q50%2078%2063%2064%22%20fill=%22none%22%20stroke=%22%232a4a3c%22%20stroke-width=%224.2%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") center/cover no-repeat;box-shadow:0 2px 6px #4f9a7a44}

.bubble-x{position:absolute;top:7px;right:9px;width:28px;height:28px;padding:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#7d8b83;border:0;font-size:22px;line-height:1;box-shadow:none;cursor:pointer}
.bubble-x:hover{background:var(--sun-100);color:var(--sun-ink)}
.bubble-x:focus-visible{outline:3px solid #8a6a22;outline-offset:1px}

/* ================= One Vito everywhere ================= */
.cute-face{display:block;width:100%;height:100%;animation:pet-bob 2.8s ease-in-out infinite}
.welcome-chat-btn,.header-vito-btn,.vito-intro .vito-sphere{background:transparent!important;border:0!important;padding:0!important;box-shadow:0 10px 26px #4f9a7a4d!important}
.welcome-chat-btn:hover{box-shadow:0 16px 36px #4f9a7a66!important}
.welcome-chat-btn::after{background:radial-gradient(ellipse at center,#4f9a7a55,transparent 72%)!important}
.cute-face.talking .pet-mouth{transform-box:fill-box;transform-origin:center;animation:cute-talk .28s ease-in-out infinite alternate}
@keyframes cute-talk{from{transform:scaleY(1)}to{transform:scaleY(1.7)}}
@media(prefers-reduced-motion:reduce){.cute-face,.cute-face.talking .pet-mouth{animation:none}}
/* Chat: Vito's face appears once, at the top, not beside every message */
#chat .message.vito::before{display:none}
#chat .message.vito{padding-left:16px}
.typing-dots{display:inline-flex;gap:5px;padding:4px 2px}
.typing-dots i{width:8px;height:8px;border-radius:50%;background:#8fbba5;animation:typing-dot 1.1s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.16s}.typing-dots i:nth-child(3){animation-delay:.32s}
@keyframes typing-dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}
#chat .message.thinking{padding:12px 16px}

/* ================= Phone: the same menu as the website, tucked away until opened ================= */
.menu-toggle,.nav-backdrop{display:none}
@media all{
  .app-shell{flex-direction:column}
  .menu-toggle{position:fixed;top:12px;left:calc(var(--shell-left,0px) + 12px);z-index:210;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--sun-100);color:var(--sun-ink);border:1px solid var(--sun-line);box-shadow:0 2px 8px #6b5a2a26;cursor:pointer}
  .menu-toggle svg{display:block}
  .menu-toggle:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:190;background:rgba(31,60,48,.42);opacity:0;pointer-events:none;transition:opacity .25s ease}
  body.menu-open .nav-backdrop{opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}
  .side-nav{position:fixed;top:0;bottom:0;left:var(--shell-left,0px);z-index:200;display:flex;flex-direction:column;width:min(300px,86vw);height:100dvh;max-height:100vh;overflow-y:auto;padding:22px 14px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,var(--mint-100),var(--mint-200));border-right:1px solid var(--mint-line);box-shadow:8px 0 30px #24352b33;transform:translateX(-105%);transition:transform .28s cubic-bezier(.3,.9,.3,1);visibility:hidden}
  body.menu-open .side-nav{transform:none;visibility:visible}
  .side-nav-top,.side-nav-bottom{flex-direction:column;flex-wrap:nowrap;gap:2px}
  .side-nav-top{padding-top:44px}
  .side-nav-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--mint-line)}
  .side-nav .side-link{width:100%;min-height:46px;padding:0 14px;font-size:16px;font-weight:600;border-radius:12px}
  .side-nav-bottom .side-link{min-height:42px;font-size:15px}
  .side-nav-top .side-link{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;text-align:left}
  .side-nav-top .side-link::before{width:20px;height:20px}
  .side-nav .side-link.active,.side-nav .side-link.active:hover{box-shadow:inset 3px 0 0 var(--sun-arrow)}
  .side-nav .side-link.active::after{display:none}
  .side-nav .side-link:hover{transform:none}
  /* room for the menu button beside every page title */
  main>header,.dashboard-header{padding-left:68px}
  .about-wrap{padding-top:64px}
  .admin-wrap{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.side-nav,.nav-backdrop{transition:none}}

/* Insights: the profile sits inside its own fold, so it needs no second preview/toggle */
#deeperPatternSection #profileBody.collapsed{max-height:none;overflow:visible}
#deeperPatternSection #profileBody.collapsed::after{display:none}
#deeperPatternSection #profileToggle{display:none!important}
#insights .insight-section.fold{margin:12px 0;border-radius:18px}
#insights .fold-body .narrative-header{margin-bottom:6px}

/* ---- Dashboard: "Your journey with Vito" ---- */
.journey-card{margin:16px 0 8px;padding:18px;border-radius:20px;border:1px solid var(--sun-line);background:linear-gradient(135deg,#fffaf0 0%,#f6fbf7 70%);box-shadow:0 6px 22px #b9962a1a}
.jr-head{display:flex;gap:18px;align-items:center}
.jr-ringwrap{flex:none;width:112px;height:112px}
.jr-ring{display:block;width:100%;height:100%}
.jr-track{fill:none;stroke:#e6ede8;stroke-width:9}
.jr-arc{fill:none;stroke:#5aa583;stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .8s ease}
.jr-pct{font-size:24px;font-weight:800;fill:#1f3c30}
.jr-cap{font-size:10px;font-weight:700;fill:#6d7c75;letter-spacing:.08em;text-transform:uppercase}
.jr-main{flex:1;min-width:0}
.jr-main h3{margin:0;font-size:18px;color:#1f3c30}
.jr-sub{margin:3px 0 10px;font-size:13px;color:#6d7c75;line-height:1.45}
.jr-next{background:#fff;border:1px solid var(--sun-line);border-radius:14px;padding:10px 14px;margin-bottom:10px}
.jr-next-label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#a07f2a}
.jr-next strong{display:block;font-size:15.5px;color:#1f3c30;margin:2px 0 1px}
.jr-next p{margin:0 0 8px;font-size:13.5px;color:#33433d;line-height:1.4}
.jr-bar{height:10px;border-radius:99px;background:#efe9d3;overflow:hidden}
.jr-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f0d98a,#e0b84a);transition:width .8s ease}
.jr-bar-note{display:block;margin-top:4px;font-size:11.5px;font-weight:700;color:#7a6a3a}
.journey-cta{display:inline-block;padding:9px 20px;border-radius:99px;background:linear-gradient(180deg,#f7e9b0,#efd98a);border:1px solid #dcc574;color:var(--sun-ink);font-weight:800;font-size:14px;text-decoration:none;box-shadow:0 4px 12px #b9962a2e}
.journey-cta:hover{background:linear-gradient(180deg,#f9edb9,#f2de95)}
.jr-chips{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.jr-chip{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:8px 11px;border-radius:12px;background:#fff;border:1px solid #e3ece5}
.jr-chip.done{background:#eef7f1;border-color:#cfe4d6}
.jr-ico{grid-row:1/3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#f4f1e6;font-size:15px}
.jr-chip.done .jr-ico{background:#5aa583;color:#fff;font-weight:800}
.jr-name{font-size:12.5px;font-weight:700;color:#1f3c30;line-height:1.2}
.jr-state{font-size:11px;font-weight:650;color:#8a7a45}
.jr-chip.done .jr-state{color:#3f735f}
@media(max-width:560px){.jr-head{flex-direction:column;align-items:stretch;text-align:left}.jr-ringwrap{width:96px;height:96px}.jr-head{gap:10px}}

/* Home: "How are you doing" */
.hd-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.hd-big{display:flex;align-items:center;gap:12px}
.hd-face{font-size:34px;line-height:1}
.hd-big strong{display:block;font-size:18px;color:#1f3c30}
.hd-big small{display:block;font-size:12px;color:#6d7c75}
.hd-spark{flex:1;max-width:210px;height:46px}
.fold-body>p{margin:6px 0;font-size:14px;line-height:1.5;color:#33433d}
.hd-empty{color:#6d7c75!important}

/* ================= Vito, animated and funny: cartoon squash-and-stretch gags ================= */
.cute-face .m{display:none}
.cute-face[data-face="smile"] .m-smile,.cute-face[data-face="open"] .m-open,.cute-face[data-face="grin"] .m-grin,.cute-face[data-face="o"] .m-o,.cute-face[data-face="tongue"] .m-tongue{display:inline}
.cute-face .vf-fx>*{display:none}
.cute-face[data-fx~="stars"] .fx-stars,.cute-face[data-fx~="hearts"] .fx-hearts,.cute-face[data-fx~="sweat"] .fx-sweat{display:inline}
.cute-face .vf-eye,.cute-face .vf-brow,.cute-face .vf-pupil,.cute-face .fx-stars,.cute-face .fx-hearts{transform-box:fill-box;transform-origin:center}
/* faces */
.cute-face.g-eyepop .vf-eye.l{animation:eye-pop-l 1.4s ease both}
.cute-face.g-eyepop .vf-eye.r{animation:eye-pop-r 1.4s ease both}
.cute-face.g-eyepop .vf-brow{animation:brow-up 1.4s ease both}
@keyframes eye-pop-l{0%,100%{transform:none}18%{transform:translate(-3px,-2px) scale(1.15)}38%,72%{transform:translate(-11px,-7px) scale(1.95)}}
@keyframes eye-pop-r{0%,100%{transform:none}18%{transform:translate(3px,-2px) scale(1.15)}38%,72%{transform:translate(11px,-7px) scale(1.95)}}
@keyframes brow-up{0%,100%{transform:none}38%,72%{transform:translateY(-9px)}}
.cute-face.g-wolf .vf-eye{animation:wolf-eyes .32s ease-in-out infinite alternate}
@keyframes wolf-eyes{from{transform:scale(1.25) translateY(-2px)}to{transform:scale(1.6) translateY(-4px)}}
.cute-face.g-wolf .fx-hearts{animation:heart-beat .32s ease-in-out infinite alternate}
@keyframes heart-beat{from{transform:scale(.9)}to{transform:scale(1.25)}}
.cute-face.g-dizzy .vf-pupil{animation:pupil-dizzy .5s linear infinite}
@keyframes pupil-dizzy{0%{transform:translate(-3px,0)}25%{transform:translate(0,3px)}50%{transform:translate(3px,0)}75%{transform:translate(0,-3px)}100%{transform:translate(-3px,0)}}
.cute-face.g-dizzy .fx-stars{animation:stars-spin .7s linear infinite}
@keyframes stars-spin{to{transform:rotate(360deg)}}
/* bodies (the whole round Vito) */
.welcome-chat-btn.bt-tornado{animation:bt-tornado 1.4s cubic-bezier(.5,0,.4,1)}
.welcome-chat-btn.bt-stretch{animation:bt-stretch 1.3s ease}
.welcome-chat-btn.bt-zoom{animation:bt-zoom 1.4s ease}
.welcome-chat-btn.bt-shake{animation:bt-shake 1.4s ease}
.welcome-chat-btn.bt-jelly{animation:bt-jelly 1.5s ease}
@keyframes bt-tornado{0%{transform:rotate(0) scale(1,1)}30%{transform:rotate(420deg) scale(.78,1.28)}70%{transform:rotate(900deg) scale(1.15,.85)}100%{transform:rotate(1080deg) scale(1,1)}}
@keyframes bt-stretch{0%,100%{transform:scale(1,1) translateY(0)}18%{transform:scale(1.18,.82) translateY(10px)}42%{transform:scale(.8,1.4) translateY(-46px)}60%{transform:scale(1.15,.85) translateY(6px)}78%{transform:scale(.94,1.1) translateY(-8px)}}
@keyframes bt-zoom{0%,100%{transform:scale(1)}25%{transform:scale(1.32) translateY(-12px)}45%{transform:scale(1.22) rotate(-3deg)}65%{transform:scale(1.3) rotate(3deg)}}
@keyframes bt-shake{0%,100%{transform:translateX(0) rotate(0)}10%{transform:translateX(-9px) rotate(-6deg)}20%{transform:translateX(9px) rotate(6deg)}30%{transform:translateX(-8px) rotate(-5deg)}40%{transform:translateX(8px) rotate(5deg)}55%{transform:translateX(-4px) rotate(-2deg)}70%{transform:translateX(3px)}}
@keyframes bt-jelly{0%,100%{transform:scale(1,1)}15%{transform:scale(1.14,.86)}30%{transform:scale(.88,1.14)}45%{transform:scale(1.1,.9)}60%{transform:scale(.95,1.06)}75%{transform:scale(1.03,.97)}}
/* the comic sound word that pops out beside him */
.gag-word{position:absolute;right:-6px;top:-14px;z-index:5;font-weight:900;font-size:24px;letter-spacing:.02em;color:#ff4b3a;-webkit-text-stroke:5px #fff;paint-order:stroke fill;text-shadow:0 3px 0 #ffd84a;transform:rotate(12deg);pointer-events:none;white-space:nowrap;animation:gag-pop 1.3s ease both}
@keyframes gag-pop{0%{opacity:0;transform:rotate(12deg) scale(.3)}20%{opacity:1;transform:rotate(12deg) scale(1.3)}35%{transform:rotate(9deg) scale(1)}85%{opacity:1}100%{opacity:0;transform:rotate(14deg) scale(1.05) translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.welcome-chat-btn[class*="bt-"],.cute-face[class*="g-"] *,.gag-word{animation:none!important}}

.home-fold .journey-card.in-fold{margin:0;padding:0;border:0;box-shadow:none;background:none}
.home-fold .journey-cta{display:none}

/* ---- Points, badges, toasts ---- */
.lv-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px}
.lv-row strong{font-size:16px;color:#1f3c30}.lv-row span{font-size:12.5px;color:#6d7c75}
.lv-bar{height:10px;border-radius:99px;background:#e6ede8;overflow:hidden;margin-bottom:12px}
.lv-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd0ac,#4f9a7a);transition:width .8s ease}
.nb-card{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--sun-50);border:1px solid var(--sun-line);margin-bottom:12px}
.nb-ico{font-size:30px;line-height:1}.nb-card small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#a07f2a}
.nb-card strong{display:block;font-size:15px;color:#1f3c30}.nb-card p{margin:1px 0 0!important;font-size:13px!important;color:#5c6b64!important}
.bd-count{font-size:12.5px!important;font-weight:700!important;color:#6d7c75!important;margin:4px 0 8px!important}
.badge-grid{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 8px;border-radius:14px;text-align:center;border:1px solid #e3ece5;background:#fff}
.badge-item.earned{background:linear-gradient(180deg,#fffaf0,#fdf1cf);border-color:var(--sun-line);box-shadow:0 3px 10px #b9962a22}
.badge-item.locked{background:#f6f8f6}
.bi-ico{font-size:28px;line-height:1.1}.badge-item.locked .bi-ico{filter:grayscale(1);opacity:.55;font-size:22px}
.bi-name{font-size:11.5px;font-weight:750;color:#1f3c30;line-height:1.2}.badge-item.locked .bi-name{color:#7d8b83}
.bi-hint{font-size:10.5px;font-weight:700;color:#9aa59f}
.pts-note{font-size:12px!important;color:#6d7c75!important;margin:6px 0 0!important}
.badge-toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:400;display:flex;gap:12px;align-items:center;padding:12px 18px;border-radius:18px;background:#fff;border:1px solid var(--sun-line);box-shadow:0 14px 40px #24352b40,0 0 0 4px #fdf1cf;animation:toast-in .5s cubic-bezier(.2,.9,.3,1.3) both}
.badge-toast.out{animation:toast-out .45s ease both}
.bt-ico{font-size:36px;line-height:1}.bt-text small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#a07f2a}
.bt-text strong{display:block;font-size:17px;color:#1f3c30}.bt-text em{display:block;font-style:normal;font-size:12.5px;color:#6d7c75}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(-24px) scale(.85)}to{opacity:1;transform:translateX(-50%)}}
@keyframes toast-out{to{opacity:0;transform:translateX(-50%) translateY(-20px)}}
.pts-chip{position:absolute;left:calc(50% - 150px);top:230px;z-index:6;font-weight:900;font-size:20px;color:#3f735f;background:#fff;border:2px solid #8fd0ac;border-radius:99px;padding:3px 14px;box-shadow:0 6px 16px #24352b2b;pointer-events:none;animation:pts-rise 1.7s ease both}
@keyframes pts-rise{0%{opacity:0;transform:translateY(14px) scale(.7)}18%{opacity:1;transform:translateY(0) scale(1.15)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
@media(prefers-reduced-motion:reduce){.badge-toast,.pts-chip{animation:none}}

/* Vito v3: a soft squircle head with big glossy eyes and a small, gentle smile. The brows stay hidden at rest
   (they read as stern) and only appear during the cartoon gags, softly. */
.cute-face .vf-brow{opacity:0;transition:opacity .2s ease}
.cute-face.g-eyepop .vf-brow{opacity:.5}
/* The glow follows the head's own shape instead of a round halo around the button */
.welcome-chat-btn,.header-vito-btn,.vito-intro .vito-sphere,#chat .chat-vito-btn{box-shadow:none!important}
.cute-face{filter:drop-shadow(0 8px 12px rgba(79,154,122,.38))}
.header-vito-btn .cute-face,#chat .chat-vito-btn .cute-face,.vito-intro .cute-face{filter:drop-shadow(0 3px 5px rgba(79,154,122,.4))}
.welcome-chat-btn:hover .cute-face{filter:drop-shadow(0 12px 18px rgba(79,154,122,.5))}

/* ---- Home v3: Vito sits high, with clear space around him for his tricks and no text above him.
   His bubble opens BELOW him (over the buttons), so it never covers his face and his gags never touch text. ---- */
#endScreen .end-screen-wrap{padding-top:64px;padding-bottom:0;gap:0;min-height:0}
#endScreen .end-screen-wrap::before{top:46%}
#endScreen .welcome-chat-btn{width:210px;height:210px;margin:0 auto}
#endScreen #helpfulPrompt{top:344px;bottom:auto;transform-origin:50% 0}
#endScreen #helpfulPrompt::after{bottom:auto;top:-11px;transform:translateX(-50%) rotate(225deg);box-shadow:-4px -4px 0 -1px #e7f1ea}
@keyframes bubble-pop-down{0%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.84)}60%{opacity:1;transform:translateX(-50%) translateY(3px) scale(1.03)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
#endScreen #helpfulPrompt{animation-name:bubble-pop-down}
.home-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:min(600px,calc(100% - 40px));margin:44px auto 14px}
.home-actions .home-chat-cta{flex:1 1 220px;width:auto;margin:0}
.home-play-cta{background:linear-gradient(180deg,#e2f3e8,#c9e6d4)!important;border-color:#a5d0b6!important;box-shadow:0 8px 22px #4f9a7a2e,0 1px 0 #fff8 inset!important}
.home-play-cta:hover{background:linear-gradient(180deg,#e9f7ee,#d2ebdc)!important}
.home-cards{max-width:640px;margin:6px auto 40px;padding:0 20px;display:grid;gap:10px}
.home-link-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;border:1px solid #e0e8e2;border-radius:17px;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.home-link-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #24352b14;border-color:#cfddd4}
.home-link-card:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.home-link-card .fold-title h3{font-size:17px}
.pts-chip{top:300px!important}
@media(max-width:560px){#endScreen .welcome-chat-btn{width:190px;height:190px}#endScreen #helpfulPrompt{top:322px}.home-actions{margin-top:38px}}

/* While Vito's bubble is open it owns the space under his face: the buttons and cards fade out
   (without moving) so nothing shows through or competes with the menu. */
#endScreen .home-actions,#endScreen .home-cards{transition:opacity .18s ease}
#endScreen:has(#helpfulPrompt:not([hidden])) .home-actions,
#endScreen:has(#helpfulPrompt:not([hidden])) .home-cards{opacity:0;pointer-events:none}

/* ---- Home v4: Vito is a little figure, bigger; "Let's play" is the last card and unfolds into the game list ---- */
#endScreen .end-screen-wrap{padding-top:34px}
#endScreen .end-screen-wrap::before{top:44%}
#endScreen .welcome-chat-btn{width:236px;height:354px}
#endScreen .welcome-chat-btn .cute-face.vito-figure{overflow:visible}
#endScreen #helpfulPrompt{top:412px}
.pts-chip{top:330px!important}
.home-actions{margin:26px auto 14px}
.home-actions .home-chat-cta{flex:1 1 100%}
.home-play-wrap{margin:0 auto 44px}
.home-play{background:#fff;border:1px solid #cfe6d8;border-radius:17px;overflow:hidden}
.home-play .fold-ico{background:linear-gradient(180deg,#e2f3e8,#c9e6d4)}
.play-list{display:grid;gap:8px;padding:12px 14px 14px}
.play-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--sun-line,#e6dcb4);background:var(--sun-50,#fdfaf1);color:var(--sun-ink,#4a3d1c);font:inherit;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.play-opt.primary{background:linear-gradient(180deg,var(--sun-200,#f4ecd0),var(--sun-300,#ecdfb2))}
.play-opt:hover{transform:translateY(-1px);box-shadow:0 6px 16px #4a3d1c1a}
.play-opt:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.play-emoji{flex:none;min-width:44px;text-align:center;font-size:22px;letter-spacing:1px}
.play-opt b{display:block;font-size:16px}
.play-opt small{display:block;margin-top:1px;font-size:13px;opacity:.75}
#endScreen .home-play-wrap{transition:opacity .18s ease}
#endScreen:has(#helpfulPrompt:not([hidden])) .home-play-wrap{opacity:0;pointer-events:none}
@media(max-width:560px){#endScreen .welcome-chat-btn{width:196px;height:294px}#endScreen #helpfulPrompt{top:346px}.pts-chip{top:280px!important}}
#homeCards{margin-bottom:10px}
.war-top{padding-right:26px}

/* ---- Vito's arms and legs join the gags (mirrored with --s: +1 left, -1 right; the right limb can lag for alternating moves) ---- */
.vito-figure .vf-arm,.vito-figure .vf-leg{transform-box:view-box}
.vito-figure .vf-arm.l{--s:1;transform-origin:27px 98px}
.vito-figure .vf-arm.r{--s:-1;transform-origin:73px 98px}
.vito-figure .vf-leg.l{--s:1;transform-origin:42px 128px}
.vito-figure .vf-leg.r{--s:-1;transform-origin:58px 128px}
@keyframes k-cheer{0%,100%{transform:rotate(0)}12%{transform:rotate(calc(var(--s)*160deg))}28%{transform:rotate(calc(var(--s)*135deg))}44%{transform:rotate(calc(var(--s)*165deg))}60%{transform:rotate(calc(var(--s)*135deg))}78%{transform:rotate(calc(var(--s)*160deg))}}
@keyframes k-flap{0%,100%{transform:rotate(calc(var(--s)*15deg))}50%{transform:rotate(calc(var(--s)*100deg))}}
@keyframes k-spread{0%{transform:rotate(0)}20%,100%{transform:rotate(calc(var(--s)*95deg))}}
@keyframes k-legspread{0%{transform:rotate(0)}20%,100%{transform:rotate(calc(var(--s)*32deg))}}
@keyframes k-fright{0%{transform:rotate(calc(var(--s)*150deg))}50%{transform:rotate(calc(var(--s)*165deg))}100%{transform:rotate(calc(var(--s)*150deg))}}
@keyframes k-knock{0%,100%{transform:rotate(calc(var(--s)*-7deg))}50%{transform:rotate(calc(var(--s)*7deg))}}
@keyframes k-disco{0%,100%{transform:rotate(calc(var(--s)*150deg))}50%{transform:rotate(calc(var(--s)*15deg))}}
@keyframes k-tap{0%,100%{transform:rotate(0)}50%{transform:rotate(calc(var(--s)*28deg))}}
@keyframes k-pump{0%,100%{transform:rotate(calc(var(--s)*105deg))}50%{transform:rotate(calc(var(--s)*135deg))}}
@keyframes k-cancan{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(calc(var(--s)*72deg))}}
@keyframes k-hips{0%,100%{transform:rotate(calc(var(--s)*24deg))}50%{transform:rotate(calc(var(--s)*40deg))}}
@keyframes k-swing{0%,100%{transform:rotate(calc(var(--s)*-55deg))}50%{transform:rotate(calc(var(--s)*55deg))}}
@keyframes k-run{0%,100%{transform:rotate(calc(var(--s)*-34deg))}50%{transform:rotate(calc(var(--s)*34deg))}}
@keyframes k-laugh{0%,100%{transform:rotate(calc(var(--s)*8deg))}50%{transform:rotate(calc(var(--s)*32deg))}}
@keyframes k-hop{0%,100%{transform:rotate(0)}30%,60%{transform:rotate(calc(var(--s)*14deg))}}

.bt-jelly .vf-arm{animation:k-flap .36s ease-in-out 4}
.bt-jelly .vf-leg{animation:k-tap .5s ease-in-out 3}
.bt-tornado .vf-arm{animation:k-spread 1.4s ease both}
.bt-tornado .vf-leg{animation:k-legspread 1.4s ease both}
.bt-stretch .vf-arm{animation:k-cheer 1.3s ease}
.bt-stretch .vf-leg{animation:k-legspread 1.3s ease both}
.bt-zoom .vf-arm{animation:k-fright .16s linear infinite}
.bt-zoom .vf-leg{animation:k-knock .14s linear infinite}
.g-laugh .vf-arm{animation:k-laugh .3s ease-in-out infinite}
.g-laugh .vf-leg{animation:k-tap .6s ease-in-out infinite}
.bt-dance .vf-arm{animation:k-disco .5s ease-in-out 3}
.bt-dance .vf-arm.r{animation-delay:.25s}
.bt-dance .vf-leg{animation:k-tap .5s ease-in-out 3}
.bt-dance .vf-leg.r{animation-delay:.25s}
.bt-pump .vf-arm{animation:k-pump .4s ease-in-out 4}
.bt-pump .vf-leg{animation:k-legspread .4s ease both}
.bt-kick .vf-leg{animation:k-cancan .7s ease-in-out 2}
.bt-kick .vf-leg.r{animation-delay:.35s}
.bt-kick .vf-arm{animation:k-hips .35s ease-in-out 4}
.bt-run .vf-arm{animation:k-swing .3s ease-in-out 5}
.bt-run .vf-arm.r{animation-delay:.15s}
.bt-run .vf-leg{animation:k-run .3s ease-in-out 5}
.bt-run .vf-leg.r{animation-delay:.15s}
.bt-cheer .vf-arm{animation:k-cheer 1.4s ease}
.bt-cheer .vf-leg{animation:k-hop 1.4s ease}

.welcome-chat-btn.bt-dance{animation:bt-dance 1.5s ease-in-out}
.welcome-chat-btn.bt-pump{animation:bt-pump 1.6s ease-in-out}
.welcome-chat-btn.bt-kick{animation:bt-kick 1.4s ease-in-out}
.welcome-chat-btn.bt-run{animation:bt-run .25s ease-in-out 6 alternate}
.welcome-chat-btn.bt-cheer{animation:bt-cheer 1.4s ease-in-out}
@keyframes bt-dance{0%,100%{transform:rotate(0) translateY(0)}15%{transform:rotate(-7deg) translateY(-8px)}30%{transform:rotate(6deg) translateY(0)}45%{transform:rotate(-7deg) translateY(-8px)}60%{transform:rotate(6deg) translateY(0)}75%{transform:rotate(-4deg) translateY(-6px)}}
@keyframes bt-pump{0%,100%{transform:scale(1)}20%{transform:scale(1.1,.92)}40%{transform:scale(.96,1.06)}60%{transform:scale(1.1,.92)}80%{transform:scale(.98,1.03)}}
@keyframes bt-kick{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-3deg)}50%{transform:translateY(0)}75%{transform:translateY(-10px) rotate(3deg)}}
@keyframes bt-run{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@keyframes bt-cheer{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-30px) scale(1,1.05)}45%{transform:translateY(0) scale(1.08,.92)}65%{transform:translateY(-22px)}85%{transform:translateY(0) scale(1.04,.96)}}
@media(prefers-reduced-motion:reduce){.vito-figure .vf-arm,.vito-figure .vf-leg{animation:none!important}}

/* ---- Badges v2: six medals, one per step of the journey ---- */
.medal{display:block;flex:none;filter:drop-shadow(0 3px 5px rgba(60,80,70,.28))}
.medal.locked{filter:grayscale(1) contrast(.85);opacity:.42}
.badge-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge-item{padding:14px 10px 12px;gap:6px}
.badge-item.earned{background:linear-gradient(180deg,#fffdf6,#fbf3d9)}
.bi-name{font-size:14px}
.bi-step{font-size:11.5px;color:#6d7c75;line-height:1.3}
.badge-item.locked .bi-step{color:#8a968f}
.bd-count a{color:#2f6f57;font-weight:700}
.nb-card{align-items:center}
.nb-card .medal{filter:grayscale(1) contrast(.85);opacity:.5}
.jr-chip .jr-ico{background:transparent}
.jr-chip.done .jr-ico{background:transparent}
.jr-ico .medal{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(60,80,70,.3))}
.jr-ico .medal.locked{filter:grayscale(1);opacity:.4}
.jr-next p.jr-badge{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px;color:#4a3d1c}
.jr-next .jr-badge .medal{width:26px;height:26px}
.badge-toast .bt-ico{font-size:0;line-height:0}
.badge-toast .bt-ico .medal{width:46px;height:46px;filter:drop-shadow(0 3px 6px rgba(60,80,70,.35))}
.medal.locked,.nb-card .medal,.jr-ico .medal.locked{filter:saturate(.3) brightness(1.05);opacity:.62}
.badge-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:520px){.badge-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- Home v5: only Vito, "Let's chat" and "Let's play" ---- */
#endScreen .welcome-chat-btn{width:264px;height:357px}
#endScreen #helpfulPrompt{top:412px}
.pts-chip{top:340px!important}
.home-actions{margin:22px auto 12px}
.home-play-wrap{margin:0 auto 44px;padding:0;width:min(600px,calc(100% - 40px));max-width:none;display:block}
.home-play{background:none;border:none;border-radius:18px;overflow:visible}
.home-play>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;padding:15px 22px;border-radius:18px;font-size:17px;font-weight:800;letter-spacing:.01em;color:var(--sun-ink);background:linear-gradient(180deg,#e2f3e8,#c9e6d4);border:1px solid #a5d0b6;box-shadow:0 8px 22px #4f9a7a2e,0 1px 0 #fff8 inset;transition:transform .15s ease,box-shadow .15s ease}
.home-play>summary::-webkit-details-marker{display:none}
.home-play>summary:hover{transform:translateY(-2px);background:linear-gradient(180deg,#e9f7ee,#d2ebdc)}
.home-play>summary:focus-visible{outline:3px solid #8a6a22;outline-offset:3px}
.home-play>summary .fold-chev{margin-left:2px}
.home-play[open]>summary{border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.home-play .play-list{padding:10px 0 0}
@media(max-width:560px){#endScreen .welcome-chat-btn{width:206px;height:279px}#endScreen #helpfulPrompt{top:330px}.pts-chip{top:268px!important}}

/* ---- How I'm changing: plain-language rows ---- */
.change-list{list-style:none;margin:8px 0 6px;padding:0;display:grid;gap:8px}
.chg{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border-radius:12px;background:#f6f8f6;border:1px solid #e3ece5}
.chg-ico{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;background:#e6ece8;color:#4b5b53}
.chg b{display:block;font-size:14.5px;color:#1f3c30}
.chg small{display:block;margin-top:1px;font-size:12.5px;color:#66756d;line-height:1.35}
.chg.good{background:#eef7f1;border-color:#cfe4d6}.chg.good .chg-ico{background:#5aa583;color:#fff}
.chg.watch{background:#fdf6e3;border-color:#ecdfb2}.chg.watch .chg-ico{background:#d2a93a;color:#fff}
.chg-steady{margin:4px 0!important;font-size:12.5px}

/* ---- Living face: gaze, blinking, talking, laughing ---- */
.cute-face .vf-look{transform:translate(calc(var(--gx,0)*1px),calc(var(--gy,0)*1px));transition:transform .22s ease}
.cute-face .vf-brow{transition:opacity .2s ease,transform .2s ease}
.cute-face.brow-up .vf-brow{opacity:.55;transform:translateY(-3px)}
.cute-face.blink .vf-eye{animation:eye-blink .17s ease}
@keyframes eye-blink{50%{transform:scaleY(.08)}}
.cute-face.talking .vito-head{transform-box:view-box;transform-origin:50px 90px;animation:talk-nod .55s ease-in-out infinite alternate}
@keyframes talk-nod{from{transform:rotate(-1.6deg) translateY(0)}to{transform:rotate(1.6deg) translateY(-1.2px)}}
.cute-face.laughing .vf-eye{animation:eye-laugh .34s ease-in-out infinite alternate}
@keyframes eye-laugh{from{transform:scaleY(.45) translateY(1px)}to{transform:scaleY(.24) translateY(2.5px)}}
.cute-face.laughing .vito-head{transform-box:view-box;transform-origin:50px 90px;animation:laugh-shake .18s linear infinite alternate}
@keyframes laugh-shake{from{transform:rotate(-2.4deg) translateY(0)}to{transform:rotate(2.4deg) translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.cute-face.talking .vito-head,.cute-face.laughing .vito-head,.cute-face.laughing .vf-eye,.cute-face.blink .vf-eye{animation:none}.cute-face .vf-look{transition:none}}

/* ---- Journey celebration pop-up ---- */
.claim-pop{position:fixed;inset:0;z-index:600;display:grid;place-items:center;background:rgba(31,60,48,.42);animation:pop-fade .2s ease}
.claim-pop.out{opacity:0;transition:opacity .25s ease}
@keyframes pop-fade{from{opacity:0}}
.claim-card{position:relative;overflow:hidden;width:min(340px,calc(100% - 40px));padding:26px 24px 22px;border-radius:24px;background:#fff;border:1px solid var(--sun-line,#e6dcb4);text-align:center;box-shadow:0 24px 60px #0003;animation:claim-in .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes claim-in{from{transform:scale(.6);opacity:0}}
.claim-card .medal{margin:0 auto 6px;animation:medal-spin .9s ease}
@keyframes medal-spin{from{transform:rotate(-200deg) scale(.4)}}
.claim-card small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a07f2a}
.claim-card h3{margin:2px 0 6px;font-size:24px;color:#1f3c30}
.claim-card p{margin:0 0 10px;font-size:14.5px;color:#33433d;line-height:1.4}
.claim-pts{display:inline-block;margin-bottom:14px;padding:4px 12px;border-radius:99px;background:#eef7f1;border:1px solid #cfe4d6;color:#2f6f57;font-weight:800;font-size:14px}
.claim-card button{display:block;margin:0 auto;padding:11px 32px;border-radius:14px;border:1px solid #dcc574;background:linear-gradient(180deg,#f7e9b0,#efd98a);color:#4a3d1c;font:inherit;font-weight:800;cursor:pointer}
.claim-confetti{position:absolute;left:50%;top:90px;width:0;height:0;pointer-events:none}
.claim-confetti i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:confetti-fly 1.3s ease-out var(--d) both}
@keyframes confetti-fly{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){.jr-node.ready,.jr-node.ready .medal,.jd-claim,.claim-card,.claim-card .medal,.claim-confetti i{animation:none}}
a.badge-toast{text-decoration:none;color:inherit}
.medal.locked{filter:saturate(.3) brightness(1.05);opacity:.6}

/* ---- Home v6: one calm screen that never scrolls or shifts ----
   Vito takes whatever height is left, the two buttons sit under him with a clear gap, and the last band is
   Vito's "stage": the play menu, the games, the jokes and the rating scale all appear there, in space that is
   always reserved, so nothing overlaps Vito or other text and nothing moves. */
main:has(#endScreen.active){display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
main:has(#endScreen.active)>header{flex:none}
#endScreen.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;background:radial-gradient(900px 420px at 50% 34%,#edf5ef 0%,rgba(237,245,239,0) 72%)}
#endScreen .end-screen-wrap{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;gap:0;padding:clamp(18px,3.5vh,34px) 24px 8px}
#endScreen .end-screen-wrap::before{top:50%;width:min(520px,90%);height:min(520px,100%)}
#endScreen .welcome-chat-btn{width:auto;height:100%;max-height:400px;aspect-ratio:100/135;margin:0}
.home-actions{flex:none;display:flex;flex-wrap:nowrap;gap:14px;width:min(600px,calc(100% - 40px));margin:clamp(26px,5.5vh,52px) auto 0}
.home-actions .home-chat-cta{flex:1 1 0;min-width:0;width:auto;margin:0}
.home-stage{flex:none;position:relative;width:min(600px,calc(100% - 40px));height:clamp(190px,29vh,250px);margin:18px auto clamp(14px,3vh,28px)}
#endScreen #helpfulPrompt{position:absolute;inset:0;top:0;bottom:0;left:0;right:0;width:auto;max-width:none;margin:0;transform:none;animation:stage-in .28s ease both;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;box-shadow:0 10px 28px #24352b1a}
#endScreen #helpfulPrompt[hidden]{display:none}
#endScreen #helpfulPrompt::after{display:none}
@keyframes stage-in{from{opacity:0;transform:translateY(10px)}}
#endScreen:has(#helpfulPrompt:not([hidden])) .home-actions{opacity:1;pointer-events:auto}
.pts-chip{top:14px!important}
@media(max-width:480px){.home-actions{gap:10px}.home-actions .home-chat-cta{padding:14px 8px;font-size:16px;gap:8px}}
@media(prefers-reduced-motion:reduce){#endScreen #helpfulPrompt{animation:none}}
#endScreen .end-screen-wrap{container-type:size}
#endScreen .welcome-chat-btn{height:min(100cqh,410px);max-height:none}
.home-stage{height:clamp(190px,25vh,226px);margin-top:14px}
.home-actions{margin-top:clamp(24px,4.5vh,46px)}
.range-note{margin:8px 2px 0;font-size:13px;color:#66756d;line-height:1.4}

/* ---- Journey v3: one folded card, six big medals, very little text ---- */
.journey-fold>.fold-head{padding:18px 20px}
.journey-fold .fold-title h3{font-size:20px}
.journey-fold .fold-title .sec-sub{font-size:15px;color:#5c6b64}
.jn-mini{display:flex;gap:2px;margin-right:4px}
.jn-mini .medal{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(60,80,70,.25))}
.jn-mini .medal.locked{opacity:.45}
@media(max-width:640px){.jn-mini{display:none}}
.jn-body{padding:6px 20px 22px}
.jn-level{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:6px 0 8px}
.jn-level strong{font-size:18px;color:#1f3c30}.jn-level span{font-size:15px;color:#5c6b64;font-weight:700}
.jn-body .lv-bar{height:12px;margin-bottom:20px}
.jn-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.jn-node{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;border-radius:20px;background:#fff;border:2px solid #e6eee9;cursor:pointer;font:inherit;color:#1f3c30;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.jn-node:hover{transform:translateY(-3px);box-shadow:0 10px 22px #24352b16}
.jn-node:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.jn-node.sel{border-color:#d2ac45;box-shadow:0 0 0 4px #f6ebc1}
.jn-node.earned{background:linear-gradient(180deg,#fffef8,#fcf3d2)}
.jn-node .medal{width:72px;height:72px}
.jn-name{font-size:16px;font-weight:800;line-height:1.2;text-align:center}
.jn-state{font-size:15px;font-weight:800;color:#3f735f}
.jn-dots{display:inline-flex;gap:6px;align-items:center;min-height:16px}
.jn-dots i{width:12px;height:12px;border-radius:50%;background:#dfe7e2;box-shadow:inset 0 1px 2px #0000001a}
.jn-dots i.on{background:linear-gradient(180deg,#f6d566,#dcae2c);box-shadow:0 1px 3px #b9962a66}
.jn-detail{display:flex;gap:18px;align-items:center;margin-top:16px;padding:20px 22px;border-radius:20px;background:linear-gradient(180deg,#fffef9,#fbf5df);border:1px solid var(--sun-line,#e6dcb4)}
.jn-dmedal{flex:none}.jn-dmedal .medal{width:68px;height:68px}
.jn-dbody{min-width:0}
.jn-dbody h4{margin:0 0 4px;font-size:22px;color:#1f3c30}
.jn-dbody p{margin:0 0 6px;font-size:16px;line-height:1.4;color:#33433d}
.jn-dbody .jn-skill{font-weight:800;color:#1f3c30}
.jn-dbody .jn-means{color:#66756d}
.jn-how span{display:block;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#a07f2a;margin-bottom:1px}
.jn-left{display:flex;align-items:center;gap:10px;margin:8px 0 0!important}
.jn-left b{font-size:16px;color:#7a5a12}
.jn-done{margin:8px 0 0!important;font-weight:800;color:#3f735f!important}
@media(max-width:640px){.jn-body{padding:4px 14px 18px}.jn-grid{gap:9px}.jn-node{padding:14px 4px 12px}.jn-node .medal{width:62px;height:62px}.jn-name{font-size:15px}.jn-detail{flex-direction:column;align-items:flex-start;padding:18px}}
/* the badge message inside the chat */
.message.vito.badge-msg{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(180deg,#fffef8,#fcf3d2);border:1.5px solid #e6d28a;box-shadow:0 8px 22px #b9962a26;animation:claim-in .5s cubic-bezier(.2,1.3,.4,1)}
.badge-msg .medal{flex:none;width:64px;height:64px}
.badge-msg small{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a07f2a}
.badge-msg strong{display:block;font-size:20px;color:#1f3c30;line-height:1.2}
.badge-msg span{display:block;font-size:16px;color:#33433d;margin-top:1px}
.badge-msg em{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:99px;background:#eef7f1;border:1px solid #cfe4d6;color:#2f6f57;font-style:normal;font-weight:800;font-size:14px}
.badge-toast .bt-ico .medal{width:52px;height:52px}
.jn-state{white-space:nowrap}@media(max-width:640px){.jn-state{font-size:14px}}

/* ---- Side menu: one expandable drawer on every screen size ---- */
:root{--shell-left:max(0px,calc((100vw - 1040px) / 2))}
@media(min-width:821px){
  .app-shell>main{width:100%}
  .side-nav{position:fixed;height:100dvh}
}
/* ---- Home v7: buttons stacked, Let's play under Let's chat ---- */
.home-actions{flex-direction:column;align-items:stretch;gap:12px;width:min(420px,calc(100% - 40px))}
.home-actions .home-chat-cta{flex:none}
#endScreen .welcome-chat-btn{aspect-ratio:100/147}
.home-stage{height:clamp(170px,23vh,214px)}
.home-actions{margin-top:clamp(20px,3.5vh,40px)}

/* ---- Journey v4: levels, quests, collection ---- */
.jn-pips{display:inline-flex;gap:4px}
.jn-pips i{width:9px;height:9px;border-radius:50%;background:#dfe7e2}
.jn-pips i.on{background:linear-gradient(180deg,#f6d566,#dcae2c);box-shadow:0 1px 3px #b9962a66}
.jn-lv{font-size:14px;font-weight:700;color:#66756d}
.jn-node.earned .jn-lv{color:#7a5a12}
.jn-streakrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.jn-streak{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:#f2f4f2;color:#66756d;font-size:15px;font-weight:700}
.jn-streak.on{background:#fff0dc;color:#b45a12;box-shadow:0 2px 8px #e0902d33}
.jn-streak.on b{font-size:18px}
.jn-best{font-size:14px;color:#66756d}
.jn-ladder{list-style:none;margin:10px 0 8px;padding:0;display:grid;gap:5px}
.jn-ladder li{display:flex;align-items:center;gap:10px;font-size:16px;color:#8a968f}
.jn-ladder li.done{color:#3f735f;font-weight:700}
.jn-ladder li.cur{color:#1f3c30;font-weight:800}
.jn-tn{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#e6ece8;color:#66756d}
.jn-ladder li.done .jn-tn{background:#5aa583;color:#fff}
.jn-ladder li.cur .jn-tn{background:#e9c65a;color:#4a3d1c}
.jn-tp{margin-left:auto;font-size:15px;color:#7a5a12}
.jn-bar{height:10px;border-radius:99px;background:#eadfbd;overflow:hidden;margin-top:6px}
.jn-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f0d060,#d9a521)}
.jn-h{margin:22px 0 10px;font-size:18px;color:#1f3c30}
.jn-quests,.jn-colls{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jn-quest{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;border:1.5px solid #e6eee9;font-size:16px}
.jn-quest.done{background:#eef7f1;border-color:#cfe4d6}
.jn-qi{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #cbd8d0;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800}
.jn-quest.done .jn-qi{background:#5aa583;border-color:#5aa583}
.jn-qt{flex:1;min-width:0;line-height:1.3;color:#1f3c30}
.jn-qp{flex:none;font-size:14px;font-weight:800;color:#7a5a12}
.jn-coll{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.jn-cl{font-size:16px;color:#1f3c30}
.jn-cn{font-size:16px;font-weight:800;color:#1f3c30;text-align:right}.jn-cn small{font-weight:600;color:#8a968f;font-size:14px}
.jn-cb{grid-column:1/-1;height:9px;border-radius:99px;background:#e6ede8;overflow:hidden}
.jn-cb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd0ac,#4f9a7a)}
.quest-star{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,#f7dc7a,#dcae2c);color:#fff;font-size:26px;box-shadow:0 3px 8px #b9962a55}
.claim-card .quest-star{width:88px;height:88px;font-size:46px;margin:0 auto 8px}
.badge-msg.quest .quest-star{flex:none;width:52px;height:52px}
@media(max-width:640px){.jn-quest{flex-wrap:wrap}.jn-qp{margin-left:36px}}
.jn-dbody{flex:1}.jn-ladder{max-width:520px}

#endScreen .welcome-chat-btn{aspect-ratio:100/135}

/* ---- Dashboard = the game ---- */
.journey-page{display:block;margin-top:18px}
.jp-hero{display:flex;align-items:center;gap:26px;padding:26px 28px;border-radius:26px;background:radial-gradient(420px 220px at 12% 0%,#fff6d4 0%,rgba(255,246,212,0) 70%),linear-gradient(180deg,#fffdf6,#f8f1d9);border:1px solid var(--sun-line,#e6dcb4);box-shadow:0 12px 30px #b9962a1f}
.jp-ringwrap{flex:none;width:132px}
.jp-ring{display:block;width:100%;height:auto;overflow:visible}
.jp-track{fill:none;stroke:#eadfbd;stroke-width:12}
.jp-arc{fill:none;stroke:url(#jpgrad);stroke:#d9a521;stroke-width:12;stroke-linecap:round;transition:stroke-dasharray .8s ease}
.jp-lvn{font-size:44px;font-weight:900;fill:#4a3d1c}
.jp-lvc{font-size:11px;font-weight:800;letter-spacing:.14em;fill:#a07f2a}
.jp-heroText small{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a07f2a}
.jp-heroText h3{margin:2px 0 4px;font-size:30px;line-height:1.1;color:#3a3018}
.jp-pts{margin:0;font-size:18px;color:#4a3d1c}.jp-pts b{font-size:22px}
.jp-next{margin:2px 0 12px;font-size:16px;color:#66756d}
.journey-page .jn-h{display:flex;align-items:baseline;justify-content:space-between;margin:30px 4px 12px;font-size:22px;color:#1f3c30}
.journey-page .jn-h small{font-size:15px;font-weight:700;color:#7a6a3a}
.jp-colls{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.jp-coll{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;padding:18px;border-radius:20px;background:#fff;border:1.5px solid #e6eee9;box-shadow:0 4px 14px #24352b0d}
.jp-cico{grid-row:1/3;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--mint-100,#e9f4ee);color:#3f735f;border:1px solid var(--mint-line,#cfe4d6)}
.jp-cnum{font-size:32px;font-weight:900;line-height:1;color:#1f3c30;align-self:end}
.jp-clab{font-size:15px;color:#66756d;align-self:start}
.jp-coll .jn-cb{grid-column:1/-1;margin-top:12px;height:10px}
.glance-h{margin:18px 0 8px;font-size:16px;color:#1f3c30}
@media(max-width:640px){.jp-hero{flex-direction:column;align-items:flex-start;padding:22px}.jp-ringwrap{width:116px}.jp-colls{grid-template-columns:1fr}}
.jn-ladder{max-width:none}

/* ---- Nothing spins: no swirls, no full turns (they made people dizzy) ---- */
@keyframes silly-spin{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-7deg) scale(1.05)}75%{transform:rotate(7deg) scale(1.05)}}
@keyframes pet-spin-once{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-8deg) scale(1.08)}}
@keyframes medal-spin{from{transform:scale(.4)}}
@keyframes stars-spin{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes pupil-dizzy{0%,100%{transform:translate(0,0)}}

/* ---- Dashboard v5: a game screen. The quest first, then rank, weekly quests, badges, collection ---- */
.gd{display:block;margin-top:16px}
.gd-hero{position:relative;overflow:hidden;padding:26px 26px 24px;border-radius:30px;color:#fff;
  background:radial-gradient(420px 240px at 100% 0%,rgba(246,212,90,.30),rgba(246,212,90,0) 62%),radial-gradient(360px 220px at 0% 100%,rgba(111,191,151,.28),rgba(111,191,151,0) 62%),linear-gradient(160deg,#2b5240,#1f3c30 58%,#183026);
  box-shadow:0 22px 44px #1f3c3066,inset 0 1px 0 #ffffff26}
.gd-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 18%,#ffffff40 0 1.5px,transparent 2.5px),radial-gradient(circle at 78% 30%,#ffffff33 0 1.5px,transparent 2.5px),radial-gradient(circle at 90% 78%,#ffe58a55 0 2px,transparent 3px),radial-gradient(circle at 34% 88%,#ffffff2b 0 1.5px,transparent 2.5px),radial-gradient(circle at 60% 12%,#ffe58a44 0 2px,transparent 3px)}
.gd-hero>*{position:relative}
.gd-kick{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:99px;background:rgba(255,226,122,.16);border:1px solid rgba(255,226,122,.4);color:#ffe27a;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.gd-kick::before{content:'★'}
.gd-hrow{display:flex;align-items:center;gap:20px;margin:18px 0 18px}
.gd-hmedal{flex:none}
.gd-hmedal .medal{width:92px;height:92px;filter:drop-shadow(0 0 18px rgba(246,212,90,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:quest-pulse 2.6s ease-in-out infinite}
@keyframes quest-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.gd-htext h3{margin:0 0 6px;font-size:30px;line-height:1.12;color:#fff;letter-spacing:-.01em}
.gd-htext p{margin:0;font-size:19px;line-height:1.35;color:#d7ecdf}
.gd-hbar{height:18px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 2px 4px #0004}
.gd-hbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f6d566,#f0b429,#f6d566);background-size:200% 100%;box-shadow:0 0 14px #f6d566aa;animation:bar-shine 3s linear infinite}
@keyframes bar-shine{to{background-position:-200% 0}}
.gd-hfoot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 2px 0;font-size:16px;color:#cfe6d8}
.gd-hprog b{font-size:22px;color:#fff}
.gd-hrew b{color:#ffe27a}
.gd-go{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;padding:17px 24px;border-radius:18px;background:linear-gradient(180deg,#ffe58a,#f2bd2f);color:#3a2a06;font-size:20px;font-weight:900;text-decoration:none;box-shadow:0 10px 24px #f2bd2f55,inset 0 1px 0 #fff9;transition:transform .15s ease,box-shadow .15s ease}
.gd-go:hover{transform:translateY(-2px);box-shadow:0 14px 30px #f2bd2f77,inset 0 1px 0 #fff9}
.gd-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
.gd-go span{font-size:24px;transition:transform .15s ease}.gd-go:hover span{transform:translateX(4px)}
.gd-player{display:flex;align-items:center;gap:22px;margin-top:16px;padding:22px 24px;border-radius:26px;background:linear-gradient(180deg,#fffdf6,#f8f1d9);border:1px solid var(--sun-line,#e6dcb4);box-shadow:0 10px 26px #b9962a1f}
.gd-player .jp-ringwrap{width:124px}
.jp-track{stroke:#eadfbd}.jp-arc{stroke:url(#jpgrad)}
.gd-ptext{flex:1;min-width:0}
.gd-ptext small{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a07f2a}
.gd-ptext h3{margin:2px 0 2px;font-size:28px;line-height:1.1;color:#3a3018}
.gd-pts{margin:0 0 8px;font-size:17px;color:#4a3d1c}.gd-pts b{font-size:22px}
.gd-xp{height:14px;border-radius:99px;background:#eadfbd;overflow:hidden}
.gd-xp i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd0ac,#4f9a7a 55%,#e0a92a);box-shadow:0 0 10px #4f9a7a66}
.gd-xpn{margin:6px 0 10px;font-size:16px;color:#66756d}
.gd-quests{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gd-quest-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:20px;background:#fff;border:1.5px solid #e6eee9;box-shadow:0 4px 14px #24352b0d}
.gd-quest-card.done{background:linear-gradient(180deg,#f1faf4,#e6f4eb);border-color:#bfe0cb}
.gd-qico{flex:none;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--mint-100,#e9f4ee);color:#3f735f;border:1px solid var(--mint-line,#cfe4d6)}
.gd-quest-card.done .gd-qico{background:#5aa583;border-color:#5aa583;color:#fff}
.gd-qbody{flex:1;min-width:0}
.gd-qbody strong{display:block;font-size:17px;line-height:1.3;color:#1f3c30;margin-bottom:8px}
.gd-qbar{height:10px;border-radius:99px;background:#e6ede8;overflow:hidden}
.gd-qbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd0ac,#4f9a7a)}
.gd-quest-card.done .gd-qbar i{background:#5aa583}
.gd-qrew{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:14px;font-weight:700;color:#66756d}
.gd-qrew b{padding:3px 12px;border-radius:99px;background:linear-gradient(180deg,#fff2b8,#f5d968);color:#5a4308;font-size:15px}
/* badges: the next one to chase is tagged */
.jn-node{position:relative}
.jn-node.isnext{border-color:#e0bb4c;box-shadow:0 0 0 4px #f6ebc1,0 10px 22px #b9962a33}
.jn-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:99px;background:linear-gradient(180deg,#ffe58a,#f2bd2f);color:#4a3406;font-size:12px;font-weight:900;letter-spacing:.12em;box-shadow:0 3px 8px #b9962a55}
.jn-node .medal{width:76px;height:76px}
.jn-tr{margin-left:auto;font-size:14px;color:#8a968f}
.jn-do{margin:8px 0 0;padding:12px 14px;border-radius:14px;background:#fff8dd;border:1px solid #efdd9a;font-size:17px;line-height:1.35;color:#3a3018}
.jn-do span{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#a07f2a;margin-bottom:2px}
.jn-detail{border-radius:22px}
@media(max-width:640px){.gd-hero{padding:22px 20px}.gd-hrow{gap:14px}.gd-hmedal .medal{width:74px;height:74px}.gd-htext h3{font-size:24px}.gd-htext p{font-size:17px}.gd-player{flex-direction:column;align-items:flex-start;padding:20px}.gd-player .jp-ringwrap{width:108px}.gd-quest-card{flex-wrap:wrap}.gd-qrew{flex-direction:row;align-items:center;margin-left:66px}}
@media(prefers-reduced-motion:reduce){.gd-hmedal .medal,.gd-hbar i{animation:none}}
.gd-hprog{white-space:nowrap}

/* ---- Badges: little Vitos, all exactly the same size ---- */
.jn-grid{align-items:stretch;grid-auto-rows:1fr}
.jn-grid>li{display:flex}
.jn-node{flex:1;width:100%;height:100%;min-height:214px;justify-content:flex-start;gap:6px;padding:20px 8px 14px}
.jn-node .medal{width:84px;height:84px;flex:none}
.jn-name{min-height:2.5em;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1.2}
.jn-pips{min-height:10px}
.jn-lv{margin-top:auto}
.jn-node.earned .medal{filter:drop-shadow(0 4px 6px rgba(60,80,70,.3))}
.jn-tag{z-index:2;white-space:nowrap}
.vmedal.locked{filter:grayscale(1) contrast(.9);opacity:.5}
.jn-detail .medal,.claim-card .medal,.badge-msg .medal{filter:drop-shadow(0 4px 8px rgba(60,80,70,.3))}
@media(max-width:640px){.jn-node{min-height:196px;padding:18px 4px 12px}.jn-node .medal{width:72px;height:72px}.jn-name{font-size:15px}}

/* ---- "How it works" (i) button, the simple rules, and the easy answer dots ---- */
.info-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border-radius:99px;border:1px solid var(--sun-line,#e6dcb4);background:var(--sun-100,#faf6e8);color:var(--sun-ink,#4a3d1c);font:inherit;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;box-shadow:0 2px 8px #6b5a2a1f}
.info-btn:hover{background:var(--sun-200,#f4ecd0)}
.info-btn:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.info-i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#f7dc7a,#dcae2c);color:#4a3406;font-family:Georgia,serif;font-style:italic;font-weight:900;font-size:17px}
.rules-panel{margin:14px 0 0;padding:22px 24px;border-radius:24px;background:linear-gradient(180deg,#fffdf6,#f8f1d9);border:1px solid var(--sun-line,#e6dcb4);box-shadow:0 10px 26px #b9962a1f}
.rules-panel[hidden]{display:none}
.rules-panel h3{margin:0 0 12px;font-size:22px;color:#3a3018}
.rules{counter-reset:r;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rules li{counter-increment:r;display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.4;color:#33433d}
.rules li::before{content:counter(r);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#f7dc7a,#dcae2c);color:#4a3406;font-weight:900;font-size:15px}
.rules li b{color:#1f3c30}
.rules-h{margin:20px 0 10px;font-size:18px;color:#1f3c30}
.rules-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rules-pts li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid #efe6c4;font-size:16px;color:#33433d}
.rules-pts b{color:#7a5a12}
#aboutRules .rules li,#aboutRules .rules-pts li{font-size:16px}
@media(max-width:560px){.rules-pts{grid-template-columns:1fr}.info-btn{padding-right:12px}.dash-header-row .info-btn{align-self:flex-start}}
.dots-h{margin:20px 0 10px;font-size:17px;color:#1f3c30}
.answer-dots{display:flex;flex-wrap:wrap;gap:8px}
.ad{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:900;color:#fff}
.ad.yes{background:#4f8f72}.ad.bit{background:#d9b04c}.ad.no{background:#c47a68}
.dots-note{margin:10px 0 0;font-size:15px;color:#66756d}

/* ---- Patterns, triggers and areas of life: one calm card each, repeats shown as dots ---- */
.pt-list{display:grid;gap:10px}
.pt-subhead{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#56645d}
.pt-subhead:not(:first-child){margin-top:22px}
.pt-fam-group{margin:0 0 10px;background:#f7faf8;border:1px solid #e6eee9;border-radius:14px;overflow:hidden}
.pt-fam-group:last-child{margin-bottom:0}
.pt-fam-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px}
.pt-fam-group>summary::-webkit-details-marker{display:none}
.pt-fam-group[open]>summary .fold-chev{transform:rotate(45deg)}
.pt-fam-h{font-size:13.5px;font-weight:700;color:#3f4f47}
.pt-fam-group>.pt-list{padding:0 12px 12px}
.pt-card{background:#fff;border:1.5px solid #e6eee9;border-radius:20px;box-shadow:0 3px 12px #24352b0d;overflow:hidden}
.pt-card>summary,.pt-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px}
.pt-card>summary::-webkit-details-marker{display:none}
.pt-card[open]>summary{border-bottom:1px solid #eef2ef}
.pt-card>summary:hover{background:#fafcfa}
.pt-card>summary:focus-visible{outline:3px solid #8a6a22;outline-offset:-3px}
.pt-static .pt-sum{cursor:default}
.pt-dot{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 4px #f1f5f2}
.pt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.pt-main strong{font-size:18px;line-height:1.25;color:#1f3c30;overflow-wrap:anywhere}
.pt-dots{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.pt-dots i{width:11px;height:11px;border-radius:50%;background:linear-gradient(180deg,#f6d566,#dcae2c);box-shadow:0 1px 3px #b9962a55}
.pt-dots em{font-style:normal;font-size:13px;font-weight:800;color:#7a5a12}
.pt-count{flex:none;display:flex;flex-direction:column;align-items:center;min-width:44px;line-height:1}
.pt-count b{font-size:26px;color:#1f3c30}.pt-count small{margin-top:3px;font-size:12px;font-weight:700;color:#66756d}
.pt-body{padding:14px 18px 18px}
.pt-desc{margin:0 0 10px;font-size:16px;line-height:1.5;color:#33433d}
.pt-body .story-line{font-size:15px;line-height:1.5;color:#33433d;margin:0 0 8px}
.ar-bar{display:block;height:12px;border-radius:99px;background:#e9efeb;overflow:hidden;max-width:360px}
.ar-bar i{display:block;height:100%;border-radius:99px}
.ar-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ar-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:#f4f8f5;border:1px solid #d8e6dd;color:#1f3c30;font-size:15px;font-weight:700;text-decoration:none}
.ar-chip b{color:#7a5a12}
.ar-chip:hover{background:#eaf3ed}
.pt-card .domain-tag{margin-left:6px;vertical-align:middle}
@media(max-width:560px){.pt-card>summary,.pt-sum{padding:14px}.pt-main strong{font-size:17px}}

/* ---- Pattern card: the library definition in yellow, then what sets it off and where it shows up ---- */
.pt-def{padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,#fff6c9,#ffefa8);border:1px solid #f0d872;font-size:16px;line-height:1.45;color:#3a3018;font-weight:600}
.pt-def span{display:block;margin-bottom:3px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#9a7412}
.pt-facts{display:grid;gap:14px;margin-top:16px}
.pt-flab{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#66756d}
.pt-chips{display:flex;flex-wrap:wrap;gap:8px}
.pt-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;font-size:15px;font-weight:700;line-height:1.2}
.pt-chip svg{flex:none}
.pt-chip b{font-size:13px;opacity:.8}
.pt-chip.trig{background:#fff0dc;border:1px solid #f1cf9a;color:#8a4a0c}
.pt-chip.area{background:#e3f1fa;border:1px solid #b9d9ec;color:#255f80}
.pt-chip.lib{background:#f2f4f2;border:1px solid #dfe5e1;color:#5c6b64;font-weight:600}
.pt-story{margin:16px 0 0;padding-top:12px;border-top:1px dashed #dfe5e1;font-size:15px;line-height:1.5;color:#5c6b64}
.pt-chip.pat{background:#efeafb;border:1px solid #d3c8f1;color:#4f3f93}
.pt-go{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;padding:13px 18px;border-radius:16px;background:linear-gradient(180deg,#f7e9b0,#efd98a);border:1px solid #dcc574;color:#4a3d1c;font-size:16px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px #b9962a26;transition:transform .15s ease,box-shadow .15s ease}
.pt-go:hover{transform:translateY(-2px);box-shadow:0 10px 22px #b9962a3a}
.pt-go:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.pt-body .trigger-card-actions{margin-top:14px}

/* ---- The profile, broken into foldable parts by title ---- */
.np-fold{background:#fff;border:1.5px solid #e6eee9;border-radius:18px;margin:0 0 10px;overflow:hidden;box-shadow:0 3px 12px #24352b0d}
.np-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 18px}
.np-fold>summary::-webkit-details-marker{display:none}
.np-fold>summary:hover{background:#fafcfa}
.np-fold>summary:focus-visible{outline:3px solid #8a6a22;outline-offset:-3px}
.np-fold[open]>summary{border-bottom:1px solid #eef2ef}
.np-dot{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 4px #f1f5f2}
.np-title{flex:1;min-width:0;font-size:18px;font-weight:800;line-height:1.25;color:#1f3c30}
.np-fold[open]>summary .fold-chev{transform:rotate(45deg)}
.np-body{padding:14px 18px 18px}
.np-body p{margin:0;font-size:17px;line-height:1.65;color:#33433d}
.np-plain{font-size:16px;line-height:1.6;color:#33433d}
.np-tools{display:flex;justify-content:flex-end;margin:0 0 8px}
.np-all{padding:7px 16px;border-radius:99px;border:1px solid var(--sun-line,#e6dcb4);background:var(--sun-100,#faf6e8);color:var(--sun-ink,#4a3d1c);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.np-all:hover{background:var(--sun-200,#f4ecd0)}

/* ---- Insights: Vito's notebook ---- */
#insights .insights-panel{padding:22px}
.ins-hero{position:relative;display:flex;align-items:center;gap:20px;padding:22px 22px 22px 20px;border-radius:28px;background:radial-gradient(420px 220px at 0% 0%,#eaf6ee 0%,rgba(234,246,238,0) 70%),linear-gradient(180deg,#fdfefd,#f1f8f3);border:1px solid #d9e8de;box-shadow:0 12px 30px #24352b14}
.ins-vito{flex:none;width:96px;height:96px;filter:drop-shadow(0 8px 12px rgba(79,154,122,.35))}
.ins-vito svg{display:block;width:100%;height:100%}
.ins-htext{flex:1;min-width:0}
.ins-htext small{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#3f8062}
.ins-htext h2{margin:3px 0 6px;font-size:28px;line-height:1.12;letter-spacing:-.01em;color:#1f3c30}
.ins-htext p{margin:0;font-size:16px;line-height:1.4;color:#5c6b64}
.ins-hero #refreshDashboard{align-self:flex-start;flex:none}
.ins-stats{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ins-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;border-radius:20px;background:#fff;border:1.5px solid #e6eee9;box-shadow:0 3px 12px #24352b0d}
.ins-stat b{font-size:28px;line-height:1;color:#1f3c30}
.ins-stat>span:last-child{grid-column:2;font-size:14px;font-weight:700;color:#66756d;line-height:1.2}
.ins-sico{grid-row:1/3;width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.ins-stat.tone-mint .ins-sico{background:#e4f4ea;color:#2f7a58}
.ins-stat.tone-gold .ins-sico{background:#fbf0cc;color:#a07414}
.ins-stat.tone-blue .ins-sico{background:#e3f1fa;color:#2f6f95}
.ins-stat.tone-coral .ins-sico{background:#fde8e1;color:#b8553e}
/* groups: a small heading, then that group's cards */
.ins-group{margin-top:26px}
.ins-group-h{display:flex;align-items:center;gap:10px;margin:0 4px 12px;font-size:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#4d5f56}
.ins-gdot{width:12px;height:12px;border-radius:50%;background:#6fbf97;box-shadow:0 0 0 4px #e4f1ea}
.ins-group.tone-gold .ins-gdot{background:#e8bd4e;box-shadow:0 0 0 4px #fbf0cc}
.ins-group.tone-coral .ins-gdot{background:#ee9078;box-shadow:0 0 0 4px #fde8e1}
.ins-group.tone-lav .ins-gdot{background:#a08ee0;box-shadow:0 0 0 4px #ece7fa}
.ins-group>.fold{margin:0 0 12px}
.ins-group .fold{border-radius:22px;box-shadow:0 4px 14px #24352b0d}
.ins-group .fold-head{padding:18px 20px}
.ins-group .fold-title h3{font-size:19px}
.ins-group .fold-title .sec-sub{font-size:15px;line-height:1.35;margin-top:3px}
.ins-group .fold-ico{width:46px;height:46px;border-radius:15px}
.ins-group.tone-mint .fold-ico{background:#e4f4ea;color:#2f7a58;border-color:#cfe6d8}
.ins-group.tone-gold .fold-ico{background:#fbf0cc;color:#a07414;border-color:#f0dc9a}
.ins-group.tone-coral .fold-ico{background:#fde8e1;color:#b8553e;border-color:#f3cbbd}
.ins-group.tone-lav .fold-ico{background:#ece7fa;color:#5f4ab0;border-color:#d6cdf1}
.ins-group .fold[open]{border-color:#d6e3db}
@media(max-width:820px){.ins-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  #insights .insights-panel{padding:14px}
  .ins-hero{flex-wrap:wrap;gap:14px;padding:18px}
  .ins-vito{width:76px;height:76px}
  .ins-htext{flex:1 1 60%}
  .ins-htext h2{font-size:23px}
  .ins-hero #refreshDashboard{margin-left:auto}
  .ins-stat{padding:12px}.ins-stat b{font-size:24px}.ins-sico{width:38px;height:38px}
  .ins-group .fold-head{padding:15px 14px;gap:12px}
  .ins-group .fold-ico{width:40px;height:40px}
  .ins-group .fold-title h3{font-size:17px}
  .ins-group .fold-title .sec-sub{font-size:14px}
}
@media(max-width:560px){
  .ins-hero{flex-wrap:nowrap;padding:18px 14px 18px 16px;gap:14px}
  .ins-vito{width:64px;height:64px}
  .ins-htext{padding-right:0}
  .ins-htext h2{font-size:21px}
  .ins-htext p{font-size:15px}
  .ins-hero #refreshDashboard{position:absolute;top:10px;right:10px;padding:6px 10px;font-size:13px}
  .ins-htext small{padding-right:84px}
}
@media(max-width:600px){.insight-section svg.how-chart,svg.how-chart{min-width:0;max-height:none}}
@media(max-width:560px){.ins-htext{padding-top:22px}.ins-htext small{padding-right:0;white-space:nowrap;letter-spacing:.1em}}
/* "The deeper drives": its own fold, holding its titled parts */
.np-group{margin-top:14px;background:linear-gradient(180deg,#faf8ff,#f3effc);border:1.5px solid #ddd4f3;border-radius:20px;overflow:hidden}
.np-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px}
.np-group>summary::-webkit-details-marker{display:none}
.np-group>summary:hover{background:#f6f2fd}
.np-group>summary:focus-visible{outline:3px solid #8a6a22;outline-offset:-3px}
.np-group>summary .np-title{font-size:19px}
.np-group[open]>summary{border-bottom:1px solid #e3dcf5}
.np-group[open]>summary .fold-chev{transform:rotate(45deg)}
.np-groupbody{padding:14px 14px 6px}

a.pt-chip{text-decoration:none}a.pt-chip.pat:hover{background:#e5dcf8}

/* ---- What helps: Vito's pick, a ranked list, then everything you tried ---- */
.wh-hero{position:relative;display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:26px;background:radial-gradient(360px 200px at 0% 0%,#fff3c4 0%,rgba(255,243,196,0) 70%),linear-gradient(180deg,#f4fbf6,#e5f4ea);border:1px solid #cfe6d8;box-shadow:0 10px 26px #24352b14}
.wh-vito{position:relative;flex:none;width:84px;height:84px;filter:drop-shadow(0 6px 10px rgba(79,154,122,.35))}
.wh-vito>svg{display:block;width:100%;height:100%}
.wh-bulb{position:absolute;right:-12px;bottom:-8px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ffe58a,#f2bd2f);color:#4a3406;border:3px solid #fff;box-shadow:0 4px 10px #b9962a55}
.wh-bulb svg{width:22px;height:22px}
.wh-htext{min-width:0}
.wh-htext small{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#3f8062}
.wh-htext h4{margin:3px 0 4px;font-size:24px;line-height:1.15;color:#1f3c30}
.wh-htext p{margin:0 0 8px;font-size:16px;color:#4d5f56}.wh-htext p b{color:#1f3c30}
.wh-dots{display:flex;flex-wrap:wrap;gap:6px}
.wh-dots i{width:14px;height:14px;border-radius:50%;background:#d5e2da}
.wh-dots i.on{background:linear-gradient(180deg,#7cc98f,#3d9560);box-shadow:0 1px 4px #3d956066}
.wh-h{margin:22px 2px 10px;font-size:17px;color:#1f3c30}
.wh-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wh-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"rank name frac" "rank bar bar";column-gap:12px;row-gap:6px;align-items:center;padding:13px 16px;border-radius:18px;background:#fff;border:1.5px solid #e6eee9;box-shadow:0 3px 10px #24352b0a}
.wh-rank{grid-area:rank;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:16px;color:#fff;background:#9fb3a8}
.wh-rank.r1{background:linear-gradient(180deg,#f7d566,#d9a521)}.wh-rank.r2{background:linear-gradient(180deg,#c9d3d9,#93a3ad)}.wh-rank.r3{background:linear-gradient(180deg,#e2b189,#b8794a)}
.wh-name{grid-area:name;font-size:17px;font-weight:800;color:#1f3c30;overflow-wrap:anywhere}
.wh-frac{grid-area:frac;font-size:15px;font-weight:800;color:#66756d}
.wh-bar{grid-area:bar;height:10px;border-radius:99px;background:#e6ede8;overflow:hidden}
.wh-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd0ac,#3d9560)}
.app-list{display:grid;gap:10px;margin-top:12px}
.app-list .app-row{padding:14px 16px;border-radius:18px;background:#fff;border:1.5px solid #e6eee9;box-shadow:0 3px 10px #24352b0a}
.app-list .app-top strong{font-size:16px;color:#1f3c30}
@media(max-width:560px){.wh-hero{padding:16px;gap:14px}.wh-vito{width:68px;height:68px}.wh-htext h4{font-size:20px}}

/* ---- Folding, the same everywhere: big tap rows, one chevron style, a soft open, and Open all / Close all ---- */
.fold-tools{display:flex;justify-content:flex-end;margin:0 0 12px}
.fold-all,.np-all{min-height:40px;padding:8px 18px;border-radius:99px;border:1px solid var(--sun-line,#e6dcb4);background:var(--sun-100,#faf6e8);color:var(--sun-ink,#4a3d1c);font:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px #6b5a2a14}
.fold-all:hover,.np-all:hover{background:var(--sun-200,#f4ecd0)}
.fold-all:focus-visible,.np-all:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
details>summary{-webkit-tap-highlight-color:transparent}
.fold-head,.pt-card>summary,.np-fold>summary,.np-group>summary,.journal-day>summary,.journal-conversation-group>summary{min-height:60px}
.fold-chev{width:10px;height:10px;transition:transform .22s ease}
details[open]>:not(summary){animation:fold-in .22s ease}
@keyframes fold-in{from{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){details[open]>:not(summary){animation:none}.fold-chev{transition:none}}

/* Launched from the Home Screen: keep everything clear of the phone's status bar and home bar */
@media (display-mode:standalone){
  html{padding-top:env(safe-area-inset-top)}
  .app-shell,.app-shell>main,main:has(#endScreen.active){height:calc(100dvh - env(safe-area-inset-top))}
  .menu-toggle{top:calc(12px + env(safe-area-inset-top))}
  .side-nav{padding-top:calc(22px + env(safe-area-inset-top))}
  main{padding-bottom:env(safe-area-inset-bottom)}
}
.wh-htext{flex:1;min-width:0}
.wh-htext h4,.wh-name{overflow-wrap:break-word;word-break:normal;hyphens:auto}
@media(max-width:560px){.wh-htext h4{font-size:19px}.wh-name{font-size:16px}.wh-hero{align-items:flex-start}}
.wh-htext h4,.wh-name{hyphens:manual}
.wh-rank.yes{background:linear-gradient(180deg,#6fbf97,#3d9560)}.wh-rank.bit{background:linear-gradient(180deg,#f2cf6a,#d4a52b)}.wh-rank.no{background:linear-gradient(180deg,#e39a86,#c26b55)}
.wh-item.bit .wh-bar i{background:linear-gradient(90deg,#f2d98a,#d4a52b)}
.wh-item.no .wh-bar i{background:linear-gradient(90deg,#efb3a3,#c26b55)}
.wh-htext .trend-pill,.wh-htext .ch-trend{margin-top:2px}

/* ---- Insights heroes: an emblem badge (no faces), a big line, simple rows ---- */
.wh-hero{margin-bottom:0}
.wh-emblem{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;border:4px solid #fff;box-shadow:0 8px 18px #24352b2e,inset 0 2px 0 #ffffff55}
.wh-emblem svg{width:34px;height:34px}
.wh-emblem.tone-mint{background:linear-gradient(180deg,#7fc9a3,#3f8f6f)}
.wh-emblem.tone-gold{background:linear-gradient(180deg,#f4d266,#d19f24);color:#4a3406}
.wh-emblem.tone-coral{background:linear-gradient(180deg,#ee9c86,#c9614a)}
.wh-emblem.tone-blue{background:linear-gradient(180deg,#7fbfe3,#3f84b0)}
.wh-emblem.tone-green{background:linear-gradient(180deg,#86d29a,#3d9560)}
.wh-emblem.tone-lav{background:linear-gradient(180deg,#b3a3ea,#6f5cb8)}
.wh-hero.tone-gold{background:radial-gradient(360px 200px at 0% 0%,#fff3c4 0%,rgba(255,243,196,0) 70%),linear-gradient(180deg,#fffdf3,#fbf2d2);border-color:#efdd9a}
.wh-hero.tone-coral{background:radial-gradient(360px 200px at 0% 0%,#ffe1d8 0%,rgba(255,225,216,0) 70%),linear-gradient(180deg,#fffaf8,#fdeae4);border-color:#f3cbbd}
.wh-hero.tone-blue{background:radial-gradient(360px 200px at 0% 0%,#d9edf9 0%,rgba(217,237,249,0) 70%),linear-gradient(180deg,#f8fcff,#e6f2fa);border-color:#bcd9ea}
.wh-hero.tone-lav{background:radial-gradient(360px 200px at 0% 0%,#e7e0fa 0%,rgba(231,224,250,0) 70%),linear-gradient(180deg,#fbf9ff,#efeafb);border-color:#d6cdf1}
.wh-hero+.functional-pattern-card,.wh-hero+.dash-card{margin-top:12px}
.mood-bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin:16px 4px 0;padding:0}
.mood-bars i{flex:1;min-width:6px;max-width:34px;border-radius:8px 8px 3px 3px;box-shadow:0 2px 5px #24352b22}
.mood-note{display:flex;justify-content:space-between;margin:6px 4px 0;font-size:13px;font-weight:700;color:#7d8b83}
.chart-fold{margin-top:16px;border:1.5px dashed #d5e0d9;border-radius:16px;background:#fbfcfb}
.chart-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;font-size:15px;font-weight:800;color:#3f735f}
.chart-fold>summary::-webkit-details-marker{display:none}
.chart-fold[open]>summary .fold-chev{transform:rotate(45deg)}
.chart-fold-body{padding:0 14px 14px}
.ins-unlock{margin-top:12px;padding:14px 18px;border-radius:20px;background:linear-gradient(180deg,#fffdf3,#fbf2d2);border:1px solid #efdd9a;box-shadow:0 4px 14px #b9962a14}
.ins-utop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ins-utop strong{font-size:17px;color:#3a3018}.ins-utop span{font-size:14px;color:#7a6a3a}
.ins-ubar{height:12px;border-radius:99px;background:#ecdfae;overflow:hidden}
.ins-ubar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f6d566,#e0a92a);box-shadow:0 0 10px #f0c94a88}
@media(max-width:560px){.wh-emblem{width:60px;height:60px}.wh-emblem svg{width:28px;height:28px}}
.mood-bars i{max-width:56px}

/* ---- Masks: Vito wears a whole animal or robot face for a moment ---- */
.vmask{display:none;transform-box:fill-box;transform-origin:50% 55%}
.cute-face[data-mask="lion"] .mask-lion,.cute-face[data-mask="robot"] .mask-robot,.cute-face[data-mask="frog"] .mask-frog,.cute-face[data-mask="duck"] .mask-duck,.cute-face[data-mask="cow"] .mask-cow,.cute-face[data-mask="cat"] .mask-cat{display:inline;animation:mask-on .45s cubic-bezier(.2,1.4,.4,1) both}
.cute-face.mask-off .vmask{animation:mask-off .26s ease both}
@keyframes mask-on{from{opacity:0;transform:scale(.5) translateY(-14px)}to{opacity:1;transform:none}}
@keyframes mask-off{to{opacity:0;transform:scale(.7)}}
.vmask .mm{transform-box:fill-box;transform-origin:50% 0}
.cute-face.talking .vmask .mm{animation:mask-talk .26s ease-in-out infinite alternate}
@keyframes mask-talk{from{transform:scaleY(1)}to{transform:scaleY(1.3)}}
@media(prefers-reduced-motion:reduce){.vmask,.cute-face.talking .vmask .mm{animation:none!important}}

/* ---- Timeline buttons above each graph ---- */
.tl-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:none}
.tl-chips::-webkit-scrollbar{display:none}
.tl-chip{flex:none;min-height:40px;padding:8px 16px;border-radius:99px;border:1px solid var(--sun-line,#e6dcb4);background:var(--sun-100,#faf6e8);color:var(--sun-ink,#4a3d1c);font:inherit;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap}
.tl-chip:hover{background:var(--sun-200,#f4ecd0)}
.tl-chip.active{background:linear-gradient(180deg,#f7dc7a,#dcae2c);border-color:#c9a23f;color:#3a2a06;box-shadow:0 3px 8px #b9962a33}
.tl-chip:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.tl-empty{margin:10px 2px;font-size:16px}
.mood-note{gap:8px}.mood-note span:nth-child(2){flex:1;text-align:center;font-weight:600}
.tl-chips{margin:0;padding:2px 0 12px}

/* ---- Mood chart: slim, tall bars on a soft grid ---- */
.mood-chart{display:grid;grid-template-columns:auto 1fr;gap:10px;margin:22px 2px 0}
.mood-y{display:flex;flex-direction:column;justify-content:space-between;padding:2px 0 0;font-size:12px;font-weight:700;color:#8a968f;text-align:right;height:170px}
.mood-plot{position:relative;height:170px;border-left:1.5px solid #dfe8e2;background:repeating-linear-gradient(180deg,transparent 0,transparent calc(25% - 1px),#eef3ef calc(25% - 1px),#eef3ef 25%)}
.mood-plot .mood-bars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-around;gap:6px;padding:0 10px;margin:0;height:auto}
.mood-plot .mood-bars i{position:relative;flex:1 1 0;min-width:5px;max-width:14px;border-radius:99px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 68%,#fff));box-shadow:none;opacity:.9}
.mood-plot .mood-bars i.last{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.mood-plot .mood-bars i em{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:2px 9px;border-radius:99px;background:#fff;border:1px solid #dfe8e2;font-style:normal;font-size:12px;font-weight:800;color:#1f3c30;white-space:nowrap;box-shadow:0 2px 6px #24352b18}
.mood-note{display:flex;justify-content:space-between;margin:8px 4px 0 74px;font-size:13px;font-weight:700;color:#8a968f}
@media(max-width:560px){.mood-y,.mood-plot{height:140px}.mood-note{margin-left:64px}.mood-plot .mood-bars{padding:0 6px;gap:4px}.mood-plot .mood-bars i{max-width:11px}.mood-y{font-size:11px}}
.mood-plot .mood-bars i em{left:auto;right:-6px;transform:none}

/* ---- Locked insights: a hero with progress, what it waits for, its badge on the Dashboard, and a way to unlock it ---- */
.wh-hero.lk{align-items:flex-start}
.lk-bar{height:12px;border-radius:99px;background:#e2ebe5;overflow:hidden;margin:12px 0 6px}
.lk-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#86d29a,#3d9560);box-shadow:0 0 8px #3d956055}
.wh-hero.tone-lav .lk-bar i{background:linear-gradient(90deg,#b3a3ea,#6f5cb8);box-shadow:0 0 8px #6f5cb855}
.lk-count{margin:0 0 4px!important;font-size:15px;color:#5c6b64}.lk-count b{color:#1f3c30;font-size:17px}
.lk-chips{margin-top:10px}
.lk-badge{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 16px;border-radius:18px;background:linear-gradient(180deg,#fffdf3,#fbf2d2);border:1px solid #efdd9a;color:#3a3018;text-decoration:none;font-size:15px;line-height:1.35;box-shadow:0 3px 10px #b9962a14}
.lk-badge>span:nth-child(2){flex:1;min-width:0}.lk-badge b{color:#1f3c30}
.lk-badge .medal{flex:none}
.lk-badge:hover{background:linear-gradient(180deg,#fffbe8,#f8ecc0)}
.lk-badge:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}

/* ---- One dropdown for the time period (last week by default; everything else on click) ---- */
.tl-pick{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;font-size:15px;font-weight:800;color:#66756d}
.tl-select{appearance:none;-webkit-appearance:none;min-height:44px;padding:8px 42px 8px 18px;border-radius:99px;border:1px solid var(--sun-line,#e6dcb4);background:linear-gradient(180deg,#f7dc7a,#dcae2c) ;color:#3a2a06;font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 3px 8px #b9962a33;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a2a06' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),linear-gradient(180deg,#f7dc7a,#dcae2c);background-repeat:no-repeat;background-position:right 16px center,0 0;background-size:16px,auto}
.tl-select:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.mood-note span:last-child{text-align:right}

/* ================= Insights: calmer, more elegant (lighter weights, smaller type, thinner lines, less padding) ================= */
.ins-page .insights-panel, .ins-page{padding:18px}
.ins-page .ins-hero{padding:16px 18px;gap:16px;border-radius:22px;box-shadow:0 2px 10px #24352b0d}
.ins-page .ins-vito{width:68px;height:68px;filter:drop-shadow(0 4px 8px rgba(79,154,122,.28))}
.ins-page .ins-htext small{font-size:11px;font-weight:700;letter-spacing:.14em}
.ins-page .ins-htext h2{font-size:22px;font-weight:700;margin:2px 0 4px;letter-spacing:-.005em}
.ins-page .ins-htext p{font-size:14.5px}
#insights #refreshDashboard{min-height:36px;padding:6px 14px;font-size:13.5px;font-weight:600;box-shadow:none;border-radius:99px}
.ins-page .ins-stats{gap:10px;margin-top:12px}
.ins-page .ins-stat{padding:10px 14px;border-radius:16px;border-width:1px;box-shadow:none;column-gap:10px}
.ins-page .ins-stat b{font-size:22px;font-weight:700}
.ins-page .ins-stat>span:last-child{font-size:12.5px;font-weight:600}
.ins-page .ins-sico{width:34px;height:34px;border-radius:11px}
.ins-page .ins-sico svg{width:18px;height:18px}
.ins-page .ins-unlock{margin-top:10px;padding:10px 16px;border-radius:16px;box-shadow:none}
.ins-page .ins-utop strong{font-size:14.5px;font-weight:700}.ins-page .ins-utop span{font-size:13px}
.ins-page .ins-ubar{height:7px}.ins-page .ins-ubar i{box-shadow:none}
.ins-page .fold-tools{margin:8px 0 0}
.ins-page .fold-all{min-height:32px;padding:5px 14px;font-size:13px;font-weight:600;box-shadow:none}
.ins-page .ins-group{margin-top:20px}
.ins-page .ins-group-h{font-size:11.5px;font-weight:700;letter-spacing:.14em;margin:0 4px 10px;color:#66756d}
.ins-page .ins-gdot{width:9px;height:9px;box-shadow:0 0 0 3px #eef4f0}
.ins-page .ins-group .fold{border-radius:18px;border-width:1px;box-shadow:0 1px 3px #24352b0a;margin-bottom:10px}
.ins-page .ins-group .fold-head{padding:12px 16px;gap:12px;min-height:56px}
.ins-page .ins-group .fold-ico{width:38px;height:38px;border-radius:12px}
.ins-page .ins-group .fold-ico svg{width:18px;height:18px}
.ins-page .ins-group .fold-title h3{font-size:16.5px;font-weight:650}
.ins-page .ins-group .fold-title .sec-sub{font-size:13.5px;margin-top:1px;color:#7a877f}
.ins-page .fold-badge{font-size:12px;font-weight:600;padding:3px 10px}
.ins-page .ins-group .fold-body{padding:4px 16px 16px}
/* hero cards */
.ins-page .wh-hero{padding:14px 18px;gap:14px;border-radius:18px;box-shadow:none;border-width:1px}
.ins-page .wh-emblem{width:50px;height:50px;border-width:3px;box-shadow:0 3px 8px #24352b26}
.ins-page .wh-emblem svg{width:24px;height:24px}
.ins-page .wh-htext small{font-size:11px;font-weight:700;letter-spacing:.12em}
.ins-page .wh-htext h4{font-size:19px;font-weight:700;margin:2px 0 3px;line-height:1.2}
.ins-page .wh-htext p{font-size:14px;margin:0 0 6px}
.ins-page .wh-dots i{width:10px;height:10px}
.ins-page .wh-h{font-size:14px;font-weight:700;margin:16px 2px 8px;color:#4d5f56}
.ins-page .wh-item{padding:9px 14px;border-radius:14px;border-width:1px;box-shadow:none;column-gap:12px;row-gap:5px}
.ins-page .wh-rank{width:26px;height:26px;font-size:13px;font-weight:700}
.ins-page .wh-name{font-size:15px;font-weight:650}
.ins-page .wh-frac{font-size:13px;font-weight:700}
.ins-page .wh-bar{height:6px}
.ins-page .trend-pill{font-size:11.5px;font-weight:700;padding:2px 9px}
.ins-page .ch-sum{font-size:13.5px;margin:0}
/* period menu and mood chart */
.ins-page .tl-pick{margin-bottom:10px;font-size:13px;font-weight:600}
.ins-page .tl-select{min-height:36px;padding:6px 36px 6px 14px;font-size:14px;font-weight:650;box-shadow:none;background-color:#faf6e8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a3d1c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:14px;color:#4a3d1c;border-color:#e6dcb4}
.ins-page .mood-chart{margin-top:16px}
.ins-page .mood-y,.ins-page .mood-plot{height:140px}
.ins-page .mood-y{font-size:11px;font-weight:600}
.ins-page .mood-plot .mood-bars i{max-width:10px}
.ins-page .mood-note{font-size:12px;font-weight:600;margin-left:66px}
/* cards for patterns, triggers, areas */
.ins-page .pt-list{gap:8px}
.ins-page .pt-card{border-radius:16px;border-width:1px;box-shadow:none}
.ins-page .pt-card>summary,.ins-page .pt-sum{padding:12px 16px;gap:12px;min-height:56px}
.ins-page .pt-dot{width:10px;height:10px;box-shadow:0 0 0 3px #f1f5f2}
.ins-page .pt-main{gap:5px}
.ins-page .pt-main strong{font-size:16px;font-weight:650}
.ins-page .pt-dots i{width:8px;height:8px;box-shadow:none}
.ins-page .pt-count b{font-size:20px;font-weight:700}.ins-page .pt-count small{font-size:11px;margin-top:2px}
.ins-page .pt-body{padding:12px 16px 16px}
.ins-page .pt-def{padding:10px 14px;border-radius:12px;font-size:14.5px;font-weight:500;line-height:1.5}
.ins-page .pt-def span{font-size:10.5px;font-weight:700;margin-bottom:2px}
.ins-page .pt-facts{gap:12px;margin-top:14px}
.ins-page .pt-flab{font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:6px}
.ins-page .pt-chip{padding:5px 12px;font-size:13px;font-weight:600;gap:6px}
.ins-page .pt-chip b{font-size:11.5px}
.ins-page .pt-go{margin-top:14px;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:700;box-shadow:none}
.ins-page .pt-story{font-size:14px;margin-top:14px}
.ins-page .domain-tag{font-size:10.5px}
/* profile parts */
.ins-page .np-fold{border-radius:14px;border-width:1px;box-shadow:none;margin-bottom:8px}
.ins-page .np-fold>summary{padding:12px 16px;min-height:52px}
.ins-page .np-title{font-size:15.5px;font-weight:650}
.ins-page .np-dot{width:10px;height:10px;box-shadow:0 0 0 3px #f1f5f2}
.ins-page .np-body{padding:12px 16px 16px}.ins-page .np-body p{font-size:15px;line-height:1.65}
.ins-page .np-group{border-radius:16px;border-width:1px}
.ins-page .np-group>summary{padding:13px 16px}.ins-page .np-group>summary .np-title{font-size:16px}
.ins-page .np-all{min-height:32px;padding:5px 14px;font-size:13px;font-weight:600;box-shadow:none}
/* changes and locked heroes */
.ins-page .chg{padding:8px 12px;border-radius:12px}.ins-page .chg b{font-size:14px;font-weight:650}.ins-page .chg small{font-size:12.5px}
.ins-page .chg-ico{width:22px;height:22px;font-size:13px}
.ins-page .lk-bar{height:7px;margin:10px 0 5px}
.ins-page .lk-count{font-size:13.5px}.ins-page .lk-count b{font-size:15px}
.ins-page .lk-badge{padding:10px 14px;border-radius:14px;font-size:13.5px;box-shadow:none;margin-top:10px}
.ins-page .lk-badge .medal{width:22px;height:22px}
@media(max-width:560px){
  .ins-page .insights-panel, .ins-page{padding:12px}
  .ins-page .ins-hero{padding:14px}
  .ins-page .ins-vito{width:56px;height:56px}
  .ins-page .ins-htext h2{font-size:19px}
  .ins-page .ins-group .fold-head{padding:11px 12px}
  .ins-page .wh-emblem{width:44px;height:44px}
  .ins-page .wh-htext h4{font-size:17px}
  .ins-page .mood-y,.ins-page .mood-plot{height:120px}
  .ins-page .mood-note{margin-left:56px}
}
@media(max-width:560px){.ins-page .ins-htext{padding-top:30px}.ins-page .ins-hero #refreshDashboard{top:8px;right:8px}}

/* ================= Dashboard, Journal and Toolbox share the Insights look ================= */
.ins-stat b small{font-size:.58em;font-weight:600;color:#8a968f;margin-left:2px}
.ins-page .page-hero{align-items:center}
.ins-page .page-hero .wh-emblem{flex:none}
.ins-page .page-hero .info-btn{margin-left:auto;align-self:center}
.ins-page .lk-badge.bc{margin:0 0 10px}
.ins-page .fold{border-radius:18px;border-width:1px;box-shadow:0 1px 3px #24352b0a}
.ins-page .fold-head{padding:12px 16px;gap:12px;min-height:56px}
.ins-page .fold-ico{width:38px;height:38px;border-radius:12px}
.ins-page .fold-title h3{font-size:16.5px;font-weight:650}
.ins-page .fold-title .sec-sub{font-size:13.5px;margin-top:1px;color:#7a877f}
.ins-page .fold-body{padding:4px 16px 16px}
.ins-page .journal-entries{margin-top:14px;gap:8px}
.ins-page .journal-day{border-radius:16px;border-width:1px;box-shadow:none}
.ins-page .journal-day>summary{padding:12px 16px;gap:12px;min-height:56px}
.ins-page .journal-day>summary strong{font-size:15.5px;font-weight:650}
.ins-page .journal-day>summary span{font-size:11.5px;font-weight:600;padding:3px 10px}
.ins-page .journal-conversation-group{border-radius:12px;margin:8px 0}
.ins-page .journal-conv-preview{font-size:14px}
.ins-page .journal-filter{border-radius:14px;font-size:14px}
.ins-page .course-promo{border-radius:16px;padding:12px 16px;box-shadow:none}
.ins-page .course-promo strong{font-size:15px;font-weight:650}
.ins-page .course-button{font-size:13.5px;font-weight:650;padding:8px 14px}
/* the Dashboard game, in the calm style */
#myPatterns .rules-panel{padding:14px 18px;border-radius:16px;box-shadow:none;margin-top:10px}
#myPatterns .rules-panel h3{font-size:17px;font-weight:700}
#myPatterns .rules li{font-size:14.5px}#myPatterns .rules li::before{width:24px;height:24px;font-size:12px}
#myPatterns .rules-h{font-size:14px;font-weight:700}#myPatterns .rules-pts li{font-size:13.5px;padding:8px 12px;border-radius:12px}
#myPatterns .info-btn{padding:5px 12px 5px 6px;font-size:13.5px;font-weight:600;box-shadow:none}
#myPatterns .info-i{width:22px;height:22px;font-size:14px}
#myPatterns .gd{margin-top:12px}
#myPatterns .gd-hero{background:linear-gradient(180deg,#fffdf3,#fbf2d2);color:#3a3018;border:1px solid #efdd9a;box-shadow:none;border-radius:18px;padding:16px 18px}
#myPatterns .gd-hero::before{display:none}
#myPatterns .gd-kick{background:#fbf0cc;border-color:#efdd9a;color:#8a6a10;font-size:11px;font-weight:700;padding:3px 10px}
#myPatterns .gd-hrow{margin:12px 0;gap:14px}
#myPatterns .gd-hmedal .medal{width:60px;height:60px;filter:drop-shadow(0 2px 4px rgba(60,80,70,.25));animation:none}
#myPatterns .gd-htext h3{font-size:19px;font-weight:700;color:#1f3c30}
#myPatterns .gd-htext p{font-size:14.5px;color:#66756d}
#myPatterns .gd-hbar{height:8px;background:#ecdfae;box-shadow:none}
#myPatterns .gd-hbar i{box-shadow:none;animation:none}
#myPatterns .gd-hfoot{font-size:13.5px;color:#66756d}#myPatterns .gd-hprog b{color:#1f3c30;font-size:17px}#myPatterns .gd-hrew b{color:#8a6a10}
#myPatterns .gd-go{margin-top:14px;padding:11px 18px;font-size:15px;border-radius:12px;box-shadow:none;font-weight:700}
#myPatterns .gd-player{padding:14px 18px;border-radius:18px;box-shadow:none;border-width:1px;gap:16px;margin-top:10px}
#myPatterns .gd-player .jp-ringwrap{width:88px}
#myPatterns .gd-ptext h3{font-size:20px;font-weight:700}
#myPatterns .gd-pts{font-size:14.5px}#myPatterns .gd-pts b{font-size:18px}
#myPatterns .gd-xp{height:8px}#myPatterns .gd-xpn{font-size:13.5px;margin:5px 0 8px}
#myPatterns .jn-streak{font-size:13px;padding:5px 12px}
#myPatterns .jn-h{font-size:14px;font-weight:700;margin:20px 2px 10px;color:#4d5f56}
#myPatterns .jn-h small{font-size:12.5px;font-weight:600}
#myPatterns .gd-quest-card{padding:10px 14px;border-radius:14px;border-width:1px;box-shadow:none;gap:12px}
#myPatterns .gd-qico{width:38px;height:38px;border-radius:12px}
#myPatterns .gd-qbody strong{font-size:15px;font-weight:650;margin-bottom:6px}
#myPatterns .gd-qbar{height:6px}
#myPatterns .gd-qrew{font-size:12.5px}#myPatterns .gd-qrew b{font-size:12.5px;padding:2px 9px}
#myPatterns .jn-node{border-width:1px;border-radius:16px;padding:14px 8px 12px;min-height:168px;gap:5px;box-shadow:none}
#myPatterns .jn-node .medal{width:58px;height:58px}
#myPatterns .jn-name{font-size:14px;font-weight:650}
#myPatterns .jn-lv{font-size:12.5px;font-weight:600}
#myPatterns .jn-tag{font-size:10.5px;padding:2px 10px}
#myPatterns .jn-detail{padding:14px 16px;border-radius:16px;gap:14px}
#myPatterns .jn-dmedal .medal{width:56px;height:56px}
#myPatterns .jn-dbody h4{font-size:18px;font-weight:700}
#myPatterns .jn-dbody p{font-size:14.5px}
#myPatterns .jn-ladder li{font-size:14.5px}
#myPatterns .jn-tn{width:22px;height:22px;font-size:12px}
#myPatterns .jn-do{padding:10px 12px;font-size:14.5px;border-radius:12px}
#myPatterns .jp-coll{padding:12px 14px;border-radius:14px;border-width:1px;box-shadow:none}
#myPatterns .jp-cico{width:38px;height:38px;border-radius:12px}
#myPatterns .jp-cnum{font-size:24px;font-weight:700}#myPatterns .jp-clab{font-size:13.5px}
@media(max-width:560px){
  .ins-page .page-hero .ins-htext{padding-top:0}
  .ins-page .page-hero{flex-wrap:wrap}
  .ins-page .page-hero .info-btn{margin-left:0}
  #myPatterns .jn-node{min-height:150px}
}
.ins-page .ins-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ins-page>section.insight-section{border:0;padding:0;box-shadow:none;background:transparent;margin:10px 0}

/* ================= Simpler cards: one quiet colour, small text links instead of big buttons ================= */
.ins-page .pt-dot{background:#8fbfa5!important;box-shadow:none;width:8px;height:8px}
.ins-page .np-dot{background:#8fbfa5!important;box-shadow:none;width:8px;height:8px}
.ins-page .pt-def{background:#fdf8dc;border:1px solid #f2e6a8;color:#3a3018;font-size:14px;font-weight:500}
.ins-page .pt-def span{color:#9a7c1c}
/* every chip looks the same; only its small icon tells the kinds apart */
.ins-page .pt-chip,.ins-page .pt-chip.trig,.ins-page .pt-chip.area,.ins-page .pt-chip.pat,.ins-page .pt-chip.lib{background:#f4f7f5;border:1px solid #e1e9e4;color:#3f5a4d;font-size:12.5px;font-weight:550;padding:4px 11px}
.ins-page .pt-chip svg{color:#7a8f84}
.ins-page a.pt-chip.pat:hover{background:#eaf1ed}
.ins-page .pt-chip b{color:#7a8f84;font-weight:600}
.ins-page .pt-flab{color:#7a877f;font-weight:650;font-size:11px}
.ins-page .domain-tag,.ins-page .domain-tag[class*="domain-"]{background:#f1f4f2;color:#6b7a72;border:0;font-size:10.5px;font-weight:600}
.ins-page .pt-dots i{background:#e0b94a;box-shadow:none}
/* "Go to this chat": a small text link, not a button */
.ins-page .pt-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#3f735f;font-size:13px;font-weight:650;text-decoration:none;transform:none}
.ins-page .pt-go svg{width:14px;height:14px}
.ins-page .pt-go::after{content:'→';margin-left:2px}
.ins-page .pt-go:hover{background:none;box-shadow:none;transform:none;text-decoration:underline}
.ins-page .pt-go-btn{margin-top:12px;padding:6px 14px;border:1px solid #d9e5dc;border-radius:99px;background:#fff;font-size:13px}
.ins-page .pt-go-btn::after{content:''}
.ins-page .pt-go-btn:hover{background:#f4f7f5;text-decoration:none}
.ins-page .pt-body{padding-bottom:12px}
.ins-page .pt-facts{gap:10px}

/* Vito himself has no bubble around him: no glow on hover or tap, no grey tap flash, no ring after a click. */
.welcome-chat-btn,.header-vito-btn,.chat-vito-btn,#chat .chat-vito-btn{-webkit-tap-highlight-color:transparent;outline:none}
.welcome-chat-btn:hover,.welcome-chat-btn:active,.welcome-chat-btn:focus,.header-vito-btn:hover,.header-vito-btn:active,.chat-vito-btn:hover,.chat-vito-btn:active{box-shadow:none!important;background:transparent!important}
.welcome-chat-btn:focus-visible .cute-face,.header-vito-btn:focus-visible .cute-face{filter:drop-shadow(0 0 2px #8a6a22) drop-shadow(0 0 2px #8a6a22)}

/* ---- Strawberries: Vito loves them ---- */
.berry-chip{position:relative;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:99px;border:1px solid #f3c9cc;background:#fff;color:#8a2a30;font:inherit;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #b8232b1a;transition:transform .15s ease,box-shadow .15s ease}
.berry-chip[hidden]{display:none}
.berry-chip:hover{transform:translateY(-2px);box-shadow:0 6px 14px #b8232b26}
.berry-chip:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.berry-chip .berry-ico{display:inline-flex}
.berry-chip.empty{opacity:.6;border-color:#e6e9e7;color:#7a877f}
.berry-chip.empty .berry-ico{filter:grayscale(.7)}
.berry-chip.shake{animation:berry-shake .4s ease}
@keyframes berry-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fly-berry{position:fixed;z-index:9000;pointer-events:none;line-height:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.vito-smoothie{position:absolute;top:26%;left:calc(50% + 72px);z-index:8;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.22));animation:smoothie-in .5s cubic-bezier(.2,1.4,.4,1) both}
.vito-smoothie svg{width:128px;height:175px;display:block;overflow:visible}
.cup-liquid{transform-box:fill-box;transform-origin:50% 100%}
.vito-smoothie.out{animation:smoothie-out .3s ease both}
@keyframes smoothie-in{from{opacity:0;transform:translateY(20px) scale(.4)}}
@keyframes smoothie-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes smoothie-out{to{opacity:0;transform:scale(.6)}}
@media(max-width:560px){.vito-smoothie{left:calc(50% + 34px);top:30%}.vito-smoothie svg{width:96px;height:131px}}
.cute-face[data-mask="strawberry"] .mask-strawberry{display:inline;animation:mask-on .45s cubic-bezier(.2,1.4,.4,1) both}
.berry-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid #f3d5d7}
.berry-big{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fdeceb}
.berry-body{flex:1;min-width:0}
.berry-body p{margin:0 0 6px;font-size:14.5px;color:#33433d}.berry-body b{color:#1f3c30}
.berry-body .jn-cb{height:7px}.berry-body .jn-cb i{background:linear-gradient(90deg,#f39aa1,#e5484d)}
.berry-body .berry-note{margin:6px 0 0;font-size:13px;color:#7a877f}
@media(prefers-reduced-motion:reduce){.vito-smoothie,.berry-chip.shake{animation:none}}

/* Journal: one aligned header row (time · preview · trash · chevron) and a body that mirrors the pattern/trigger cards */
.journal-conv-head{flex-wrap:nowrap;align-items:center;gap:10px}
.journal-conv-time{flex:none;white-space:nowrap}
.journal-conv-preview{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journal-conv-activation{flex:none;white-space:nowrap}
.journal-conv-delete{flex:none;margin-left:auto}
.journal-conv-head::after{flex:none}
.jc-card{display:grid;gap:0;padding:2px 0 4px}
.jc-card .pt-def{font-size:14.5px;font-weight:500;padding:12px 14px;border-radius:14px}
.jc-card .pt-def span{font-size:11px}
.jc-card .pt-facts{gap:12px;margin-top:12px}
.jc-card .pt-flab{font-size:11.5px;margin-bottom:6px}
.jc-card .pt-chip{font-size:13.5px;font-weight:600;padding:6px 12px}
.jc-card .pt-chip.no{opacity:.75}
.jc-none{margin:0;font-size:13.5px}
@media(max-width:560px){.journal-conv-activation{display:none}.journal-conv-head{gap:8px}.journal-conversation-group{padding:0 12px}}

/* ---- Vito's strawberry story, gentle asks, and his aura ---- */
.berry-dock{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.berry-dock>*{pointer-events:auto}
.berry-corner{position:absolute;top:10px;right:16px;z-index:8;display:flex;align-items:center;gap:10px}
.berry-corner[hidden]{display:none}
.berry-feed{position:relative;display:grid;place-items:center;width:64px;height:64px}
.berry-aura{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#ffe9a0bb 0%,#ffd6c866 55%,#ffd6c800 100%);pointer-events:none}
.berry-aura.shine{animation:aura-soft 2.4s ease-in-out 3}
@keyframes aura-soft{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
.berry-corner .berry-chip{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:50%;border:0;background:transparent;box-shadow:none;transition:transform .15s ease}
.berry-corner .berry-chip:hover{transform:scale(1.08);background:transparent;box-shadow:none}
.berry-corner .berry-chip svg{filter:drop-shadow(0 3px 4px #b8232b40)}
.berry-corner .berry-chip.ask{animation:berry-bounce-soft 1.8s ease-in-out 3}
@keyframes berry-bounce-soft{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.berry-badge{position:absolute;right:-2px;bottom:-2px;min-width:22px;padding:2px 6px;border-radius:99px;background:#fff;border:1px solid #f3c9cc;color:#8a2a30;font-size:12.5px;line-height:1.2;text-align:center;box-shadow:0 1px 4px #b8232b1f}
.berry-corner .berry-info{flex:none;width:28px;height:28px}
.home-berry{position:relative;display:inline-flex;align-items:center;gap:6px;width:auto;padding:5px 14px;box-shadow:0 2px 8px #b8232b10;cursor:default}
.home-berry[hidden]{display:none}
.home-berry .berry-prog{font-size:15px;color:#7a877f}.home-berry .berry-prog b{font-size:17px;color:#1f3c30}
.home-berry .berry-treat{display:inline-flex;line-height:0}
@media(max-width:560px){.berry-corner{right:12px;top:8px}}
.berry-story .bm-note b{color:#1f3c30}
.berry-story h4.bm-h{margin:14px 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8a2a30;font-weight:700}
.berry-story .bm-list+.bm-note{margin-top:10px}
.bm-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:7px;font-size:14.5px;color:#33433d}
.bm-list li{display:flex;justify-content:space-between;gap:10px;padding-bottom:6px;border-bottom:1px solid #f3e0e2}
.bm-list li b{color:#8a2a30;white-space:nowrap}
.berry-story .bm-note{margin-top:12px;color:#7a877f;font-size:13px}
.berry-dock[hidden]{display:none}
#helpfulPrompt:not([hidden])~.berry-dock{display:none}
#endScreen{position:relative}
.berry-info{display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid #f3c9cc;background:#fff;color:#8a2a30;cursor:pointer}
.berry-info:hover{background:#fdeceb}
.berry-info:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.berry-chip.ask{animation:berry-ask 1.6s ease-in-out 3}
@keyframes berry-ask{0%,100%{box-shadow:0 2px 8px #b8232b1a}50%{box-shadow:0 0 0 6px #f3c9cc80,0 2px 8px #b8232b1a}}
.berry-nudge{position:relative;z-index:7;max-width:min(320px,90%);margin:0;padding:9px 16px;border-radius:99px;background:#fff;border:1px solid #f3c9cc;color:#8a2a30;font-size:14px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 4px 14px #b8232b1f;cursor:pointer;animation:nudge-in .4s ease both}
.berry-nudge[hidden]{display:none}
@keyframes nudge-in{from{opacity:0;transform:translateY(8px)}}
.vito-aura{position:absolute;left:50%;top:50%;width:min(98cqh,340px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#fff2b8 0%,#ffdd6699 45%,#ffe27a00 100%);opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.vito-aura.lit{opacity:var(--aura-rest,.35)}
.vito-aura.shine{opacity:1;animation:aura-pulse 2.4s ease-in-out 3}
@keyframes aura-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.berry-story-back{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px;background:#1f3c30a6;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:nudge-in .25s ease both}
.berry-story{width:min(440px,100%);max-height:88vh;overflow:auto;padding:24px 24px 20px;border-radius:22px;background:#fffdf8;border:1px solid #f3d5d7;box-shadow:0 20px 50px #0003}
.berry-story .bs-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 8px;border-radius:50%;background:#fdeceb}
.berry-story h3{margin:0 0 12px;text-align:center;font-size:20px;font-weight:650;color:#1f3c30}
.berry-story p{margin:0 0 10px;font-size:15px;line-height:1.55;color:#33433d}
.bs-actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px}
.bs-close{padding:10px 30px;border-radius:99px;border:1px solid #d9a3a7;background:#fff;color:#8a2a30;font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.bs-close:hover{background:#fdeceb}
.berry-story p.saying{background:#fdeceb;border-radius:10px;margin-left:-8px;margin-right:-8px;padding:5px 8px;transition:background .3s ease}
.bs-hear{background:none;border:0;font:inherit;font-size:13px;color:#66756d;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bs-close:focus-visible,.bs-hear:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
@media(max-width:560px){.berry-nudge{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.berry-chip.ask,.vito-aura.shine{animation:none}}

/* while Vito tells the story he stays still behind it */
body.story-open .cute-face,body.story-open .cute-face *{animation:none!important}
body.story-open .vito-aura.shine{animation:none}
.berry-story{padding:20px 22px 16px}
.berry-story .bs-ico{width:52px;height:52px;margin-bottom:4px}
.berry-story h3{margin-bottom:8px;font-size:19px}
.berry-story p{margin:0 0 7px;font-size:14px;line-height:1.5}
.bm-list{gap:4px;font-size:13.5px}.bm-list li{padding-bottom:4px}
.berry-story .bm-note{font-size:12.5px}

/* aura that doubles after a treat */
.vito-aura{transition:opacity 1.2s ease,width .9s ease,height .9s ease}
.vito-aura.wide{width:min(190cqh,520px);height:min(98cqh,340px);aspect-ratio:auto}
.vito-aura.big{width:min(240cqh,640px);height:min(98cqh,340px);aspect-ratio:auto;opacity:1}
.cute-face.aura-glow{filter:drop-shadow(0 0 12px #ffe27acc) drop-shadow(0 0 28px #ffd23f88)}

.bs-why{margin-top:12px;border-top:1px solid #f3e0e2;padding-top:8px}
.bs-why summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:#8a2a30;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0}
.bs-why summary::-webkit-details-marker{display:none}
.bs-why summary::after{content:'';width:8px;height:8px;border-right:2px solid #c98a8e;border-bottom:2px solid #c98a8e;transform:rotate(45deg);transition:transform .2s ease;margin-right:4px}
.bs-why[open] summary::after{transform:rotate(225deg)}
.bs-why summary:focus-visible{outline:3px solid #8a6a22;outline-offset:2px;border-radius:6px}
.bs-story{padding-top:6px}
.bs-story .bs-hear{display:block;margin:4px auto 0}

/* ---- Phones: the page itself never moves or scrolls. Home fits the screen; the chat room is a fixed frame
   (top bar, messages that scroll inside their own area, composer at the bottom) ---- */
@media(max-width:820px){
  html,body{overflow:hidden;overscroll-behavior:none}
  .app-shell{min-height:0;height:100dvh;overflow:hidden}
  .app-shell>main{height:100dvh;min-height:0;overflow-y:auto;overflow-x:hidden}
  main:has(#chat.active){display:flex;flex-direction:column;overflow:hidden}
  main:has(#chat.active)>header{flex:none}
  #chat.active{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  #chat .chat-room{flex:1 1 0;min-height:0}
  #chat .chat-top,#chat .chat-composer{position:static;flex:none}
  #chat #resumePrompt{flex:none}
  #chat #messages{flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
@media (display-mode:standalone) and (max-width:820px){
  .app-shell,.app-shell>main{height:calc(100dvh - env(safe-area-inset-top))}
}

/* everything strawberry lives in one small group at the top right: (i), the strawberry, and progress like 44/50 with the treat */
.berry-corner{flex-direction:column;align-items:flex-end;gap:0}
.berry-row{display:flex;align-items:center;gap:8px}
.berry-prog{display:inline-flex;align-items:center;gap:5px;margin-top:-6px;padding:3px 10px;border-radius:99px;background:#fff;border:1px solid #f3c9cc;font-size:13px;color:#7a877f;box-shadow:0 1px 4px #b8232b14}
.berry-prog b{font-size:14.5px;color:#1f3c30}
.berry-prog .berry-treat{display:inline-flex;line-height:0}
.berry-badge{display:none}

/* ---- Home: Vito and the button sit lower, centred with a little more air below than above, using the whole screen.
   Nothing is reserved at the bottom any more: games, ratings and Vito's gentle asks come up as a panel at the bottom. ---- */
#endScreen.active{justify-content:center;padding-bottom:clamp(8px,3dvh,28px)}
#endScreen .end-screen-wrap{flex:none;height:clamp(240px,46dvh,420px)}
#endScreen .home-stage{position:static;height:0;margin:0;width:auto}
#endScreen #helpfulPrompt{top:auto;bottom:14px;left:0;right:0;margin:0 auto;width:min(600px,calc(100% - 40px));height:clamp(190px,30dvh,240px);z-index:20}
#endScreen .berry-dock{top:auto;bottom:16px;z-index:19}
#endScreen .berry-dock .berry-nudge{margin:0 auto}

/* ---- Rating scales: one row, every face the same size, no words (the faces are the scale) ---- */
.face-scale,#endScreen #helpfulPrompt .face-scale,.message.activation-gate .face-scale,.solution-rating-offer .face-scale{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(5px,1.6vw,10px);margin-top:6px}
.face-btn,#endScreen #helpfulPrompt .face-btn,.message.activation-gate .face-btn,.solution-rating-offer .face-btn{--face:clamp(44px,13.5vw,56px);position:relative;flex:none;width:var(--face);height:var(--face);min-width:0;padding:0;display:grid;place-items:center;border-radius:50%;background:transparent;border:0;box-shadow:none;font-size:0}
.message.activation-gate .face-btn,.solution-rating-offer .face-btn{--face:clamp(38px,11.5vw,46px)}
.face-btn:hover{background:transparent;box-shadow:none;transform:scale(1.1)}
.face-btn .rating-face,#endScreen #helpfulPrompt .face-btn .rating-face,.message.activation-gate .face-btn .rating-face,.solution-rating-offer .face-btn .rating-face{width:100%;height:100%}
.face-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Home layout: room under "Let's chat" for the rating faces; Vito and the button sit above it ---- */
#endScreen.active{padding-top:clamp(10px,3dvh,30px);padding-bottom:clamp(140px,21dvh,190px)}
#endScreen .end-screen-wrap{height:clamp(220px,43dvh,420px)}
#endScreen #helpfulPrompt{height:auto;max-height:clamp(190px,30dvh,240px);min-height:0;padding:14px 16px}
/* Phones: Vito starts below the strawberry group (top right) and takes all the height left between it and the
   rating space under "Let's chat", so he never overlaps the strawberries and always fits nicely. */
@media(max-width:560px){
  #endScreen.active{justify-content:flex-start;padding-top:100px}
  #endScreen .end-screen-wrap{flex:1 1 0;height:auto;min-height:0}
}
/* the rating panel is compact and the space reserved under the button matches it exactly (no overlap) */
#endScreen #helpfulPrompt{padding:10px 14px;bottom:10px}
#endScreen #helpfulPrompt .ghost-button{margin-top:4px;padding:4px 14px;min-height:0}
#endScreen.active{padding-bottom:clamp(152px,23dvh,200px)}
@media(max-width:560px){.home-actions{margin-top:16px}}

/* (i) sits right next to the progress pill (44/50 + treat picture): tap it for how to find strawberries and Vito's story */
.berry-row2{gap:6px;margin-top:-6px}
.berry-row2 .berry-prog{margin-top:0}
/* One little card holds everything strawberry: the strawberry (centred), then progress with the treat and the (i) */
.berry-corner{flex-direction:column;align-items:center;gap:0;padding:4px 12px 7px;background:#fff;border:1px solid #f1d3d5;border-radius:18px;box-shadow:0 3px 12px #b8232b14}
.berry-corner .berry-feed,.berry-corner .berry-chip{width:56px;height:56px}
.berry-corner .berry-aura{width:84px;height:84px}
.berry-row{justify-content:center}
.berry-row2{gap:7px;margin-top:-2px}
.berry-row2 .berry-prog{border:0;background:transparent;box-shadow:none;padding:0;margin:0}
.berry-corner .berry-info{width:26px;height:26px}
/* a bit more air between Vito and "Let's chat" */
.home-actions{margin-top:clamp(24px,4.5dvh,44px)}
@media(max-width:560px){.home-actions{margin-top:30px}#endScreen.active{padding-top:106px}}

/* The strawberry lives in the header next to the name (Home only): strawberry, progress like 45/50, and the (i), in one small pill */
.head-title{display:flex;align-items:center;gap:12px;min-width:0}
.head-title h1{margin:0}
.berry-corner{position:static;top:auto;right:auto;flex-direction:row;align-items:center;gap:6px;padding:1px 10px 1px 4px;border-radius:99px;box-shadow:none}
main:not(:has(#endScreen.active)) .berry-corner{display:none}
.berry-corner .berry-row{display:flex;align-items:center;gap:6px;margin:0}
.berry-corner .berry-feed,.berry-corner .berry-chip{width:44px;height:44px}
.berry-corner .berry-aura{width:64px;height:64px}
.berry-row2{margin-top:0}
.berry-corner .berry-info{width:24px;height:24px}
.berry-row2 .berry-prog{font-size:13px}.berry-row2 .berry-prog b{font-size:15px}
@media(max-width:560px){#endScreen.active{padding-top:clamp(10px,3dvh,30px)}}

/* Dashboard: just a small round (i) instead of the words "How it works", top right of the header card */
#myPatterns .page-hero{position:relative}
#myPatterns .info-btn.info-btn-i{position:absolute;top:12px;right:12px;margin:0;padding:3px;border-radius:50%;background:transparent;border:1px solid var(--sun-line,#e6dcb4)}
#myPatterns .info-btn.info-btn-i .info-i{width:26px;height:26px;font-size:16px}
#myPatterns #gameRank .gd-player{margin-top:12px}
#myPatterns #gameRank+.ins-stats{margin-top:12px}
#myPatterns .page-hero .ins-htext{padding-right:34px}
@media(max-width:640px){
  #myPatterns .gd-player{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  #myPatterns .gd-player .jp-ringwrap{width:82px;flex:none}
  #myPatterns .gd-ptext{min-width:0}
}

/* the strawberry sheet: what you can do with strawberries */
.bk-have{margin:0 0 8px;text-align:center;font-size:14px;color:#7a877f}.bk-have b{font-size:22px;color:#1f3c30}
.bk-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-act{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #f3c9cc;color:#33433d;font:inherit;font-size:14px;font-weight:650;text-align:left;cursor:pointer}
.bk-act:hover:not(:disabled){background:#fdeceb}
.bk-act:disabled{opacity:.45;cursor:default}
.bk-act:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.bk-ico{font-size:20px;line-height:1}.bk-lab{flex:1;line-height:1.2}
.bk-cost{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;color:#8a2a30;white-space:nowrap}
.bk-treat{margin:12px 0 4px;text-align:center;font-size:12.5px;color:#7a877f}
.bk-bar{height:6px;background:#f3e4e5}.bk-bar i{background:linear-gradient(90deg,#f39aa1,#e5484d)}

#berryFold{cursor:pointer}
/* badge suggestion sits at the end of its section */
.ins-page .lk-badge.bc{margin:14px 0 0}

/* Insights header: no Vito face (he is already in the page header); Refresh is a small round icon at the top right */
#insights .ins-hero{position:relative}
#insights .ins-hero #refreshDashboard{position:absolute;top:10px;right:10px;left:auto;margin:0;width:34px;height:34px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;font-size:15px}
#insights .ins-hero .ins-htext{padding-top:0;padding-right:44px}

.lk-badge.bc .bc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.lk-badge.bc .bc-text b{font-size:15px;color:#1f3c30}
.lk-badge.bc .bc-text em{font-style:normal;font-size:13.5px;color:#5c6b64}

/* header pill: strawberry + how many you have, then the goal (treat picture + fed/50) */
.berry-goal{display:inline-flex;align-items:center;gap:3px;padding-left:6px;border-left:1px solid #f1d3d5;font-size:12px;color:#7a877f;white-space:nowrap}
.berry-goal b{font-size:12.5px;font-weight:650;color:#5c6b64}
.berry-goal .berry-treat{display:inline-flex;line-height:0}
.berry-corner .berry-row2{gap:5px}
.berry-corner{padding:1px 8px 1px 2px;gap:4px}
.berry-corner .berry-feed,.berry-corner .berry-chip{width:38px;height:38px}
.berry-corner .berry-aura{width:58px;height:58px}

/* guided breathing */
.breath{width:min(340px,100%);padding:28px 24px 22px;border-radius:24px;background:#fffdf8;text-align:center;box-shadow:0 20px 50px #0003}
.breath-orb{width:120px;height:120px;margin:12px auto 22px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#e3f4ea,#7cc19f);box-shadow:0 0 0 12px #7cc19f22;transform:scale(.8);transition:transform 4s ease-in-out}
.breath-orb.in{transform:scale(1.5);transition-duration:4s}
.breath-orb.out{transform:scale(.8);transition-duration:6s}
.breath-text{margin:0 0 4px;font-size:20px;font-weight:600;color:#1f3c30}
.breath-count{margin:0 0 16px;font-size:13px;color:#7a877f}

.breath-stage{height:190px;display:grid;place-items:center;margin-bottom:6px}
.breath-orb{margin:0}

/* ================= Dashboard: one fixed screen, nothing moves or scrolls (like Home) ================= */
main:has(#myPatterns.active){display:flex;flex-direction:column;overflow:hidden}
main:has(#myPatterns.active)>header p{display:none}
main:has(#myPatterns.active)>header{padding-top:8px;padding-bottom:8px}
#myPatterns.active{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
#myPatterns>.panel{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px;margin:0;overflow-y:auto;overflow-x:hidden}
#myPatterns #rulesPanel{display:none}
#myPatterns .page-hero{margin:0;padding:8px 46px 8px 12px;min-height:0;flex:none;gap:10px}
#myPatterns .page-hero .wh-emblem{width:34px;height:34px;flex:none}
#myPatterns .page-hero .wh-emblem svg{width:18px;height:18px}
#myPatterns .page-hero .ins-htext small{display:none}
#myPatterns .page-hero .ins-htext{padding:0}
#myPatterns .page-hero h2{margin:0;font-size:17px}
#myPatterns .info-btn.info-btn-i{top:50%;transform:translateY(-50%);right:10px}
#myPatterns #gameRank{flex:none}
#myPatterns .gd-player{margin:0;padding:8px 12px;gap:12px;border-radius:16px}
#myPatterns .gd-player .jp-ringwrap{width:60px;flex:none}
#myPatterns .gd-ptext small{display:none}
#myPatterns .gd-ptext h3{margin:0;font-size:17px}
#myPatterns .gd-pts{margin:0;font-size:13px}
#myPatterns .gd-xp{margin:3px 0}
#myPatterns .gd-xpn{margin:0;font-size:12.5px}
#myPatterns .gd-mini{margin:2px 0 0;font-size:12.5px;color:#7a877f}
#myPatterns #journey{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
#myPatterns .gd{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px;margin:0}
#myPatterns .gd-hero{flex:none;margin:0;padding:10px 14px 12px;border-radius:18px}
#myPatterns .gd-kick{font-size:11px;padding:2px 9px}
#myPatterns .gd-hrow{gap:10px;margin:6px 0}
#myPatterns .gd-hmedal .medal{width:54px;height:54px}
#myPatterns .gd-htext h3{margin:0;font-size:16.5px;line-height:1.25}
#myPatterns .gd-hbar{margin:4px 0 4px;height:8px}
#myPatterns .gd-hfoot{font-size:13px;margin-bottom:6px}
#myPatterns .gd-go{padding:10px 16px;font-size:15px;margin-top:0;border-radius:14px}
#myPatterns .jn-h{margin:2px 0 0;font-size:12px;font-weight:600;color:#7a877f;flex:none}
#myPatterns .jn-grid{flex:1 1 0;min-height:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:8px}
#myPatterns .jn-grid>li{min-height:0;display:flex}
#myPatterns .jn-node{width:100%;min-height:0;height:100%;padding:4px 4px 6px;gap:2px;justify-content:center}
#myPatterns .jn-node .medal{width:clamp(34px,8dvh,58px);height:clamp(34px,8dvh,58px)}
#myPatterns .jn-name{font-size:12.5px;line-height:1.15}
#myPatterns .jn-pips i{width:7px;height:7px}
.j-sheet .jn-detail{margin:0;box-shadow:none;border:0;background:transparent;padding:0}
.j-sheet h3{margin:0 0 8px;text-align:center}

#myPatterns .gd-toprow{display:flex;justify-content:space-between;align-items:center;gap:8px}
#myPatterns .gd-hrew{font-size:13px;color:#7a5a12}
#myPatterns .gd-barrow{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
#myPatterns .gd-barrow .gd-hbar{flex:1;margin:0}
#myPatterns .gd-barrow .gd-hprog{font-size:13px;white-space:nowrap}
#myPatterns .gd-hrow{margin:4px 0}
#myPatterns .gd-hmedal .medal{width:46px;height:46px}
#myPatterns .gd-go{padding:9px 16px}
#myPatterns .gd-pts{margin:1px 0 0;font-size:13px}
#myPatterns .gd-pts b{font-size:inherit}
#myPatterns .gd-pts{line-height:1.3}
#myPatterns .jn-node .medal{width:clamp(30px,7dvh,56px);height:clamp(30px,7dvh,56px)}
#myPatterns .jn-name{font-size:12px}
#myPatterns .jn-node{padding:2px 4px 6px;gap:1px}

/* Dashboard: the stats are back (compact, one row of three) and the badges are smaller */
#myPatterns #gameStats{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
#myPatterns #gameStats .ins-stat{padding:6px 8px;gap:6px;min-height:0;border-radius:14px;flex-direction:row;align-items:center}
#myPatterns #gameStats .ins-sico{width:28px;height:28px;flex:none;border-radius:9px}
#myPatterns #gameStats .ins-sico svg{width:16px;height:16px}
#myPatterns #gameStats .ins-stat b{font-size:17px;line-height:1}
#myPatterns #gameStats .ins-stat b small{font-size:11px}
#myPatterns #gameStats .ins-stat span:last-child{font-size:10.5px;line-height:1.15;color:#6d7c75}
#myPatterns .jn-grid{gap:6px;align-content:center}
#myPatterns .jn-node .medal{width:clamp(26px,5.5dvh,40px);height:clamp(26px,5.5dvh,40px)}
#myPatterns .jn-name{font-size:11.5px}
#myPatterns .jn-pips i{width:6px;height:6px}
#myPatterns .gd-player{padding:6px 12px}
#myPatterns .gd-player .jp-ringwrap{width:52px}

#myPatterns #gameStats .ins-stat{padding:5px 8px}
#myPatterns #gameStats .ins-stat>span:not(.ins-sico){display:flex;flex-direction:column}
#myPatterns .jn-node .medal{width:clamp(24px,5dvh,34px);height:clamp(24px,5dvh,34px)}
#myPatterns .jn-node{padding:2px 4px 4px;overflow:hidden}
#myPatterns .jn-name{min-height:0;height:auto;display:block;line-height:1.1;margin:0}
#myPatterns .jn-node{justify-content:center;align-items:center}
/* make room so the six badges have their full height */
#myPatterns .page-hero{padding-top:5px;padding-bottom:5px}
#myPatterns .page-hero .wh-emblem{width:30px;height:30px}
#myPatterns .gd-player{padding:4px 12px}
#myPatterns .gd-player .jp-ringwrap{width:46px}
#myPatterns #gameStats .ins-stat{padding:4px 8px}
#myPatterns .gd-hero{padding:8px 12px 10px}
#myPatterns .gd-hrow{margin:2px 0}
#myPatterns .gd-hmedal .medal{width:40px;height:40px}
#myPatterns .gd-htext h3{font-size:15.5px}
#myPatterns .gd-barrow{margin:0 0 6px}
#myPatterns .gd-go{padding:8px 16px;font-size:14.5px}
#myPatterns .jn-name{line-height:1.25;padding-bottom:1px}
#myPatterns .jn-node{gap:2px}

/* Vito got a strawberry: visible feedback */
.berry-corner{position:relative}
.berry-gain{position:absolute;top:calc(100% + 4px);left:50%;translate:-50% 0;z-index:30;white-space:nowrap;padding:3px 12px;border-radius:99px;background:#fff;border:1px solid #f3c9cc;color:#8a2a30;font-size:13px;font-weight:700;box-shadow:0 4px 12px #b8232b26;animation:gain-float 1.9s ease both}
@keyframes gain-float{0%{opacity:0;translate:-50% 6px}12%{opacity:1;translate:-50% 0}80%{opacity:1}100%{opacity:0;translate:-50% -6px}}
.berry-corner.gain{box-shadow:0 0 0 4px #f3c9cc80}
.berry-corner.gain .berry-goal b{animation:gain-pop .8s ease 2}
@keyframes gain-pop{50%{transform:scale(1.35);color:#b8232b}}
/* the +points chip is always visible, right under the header */
.pts-chip{position:fixed!important;left:50%!important;top:calc(env(safe-area-inset-top) + 84px)!important;translate:-50% 0;z-index:9000}
/* bigger badge medals, smaller cards around them */
#myPatterns .jn-node .medal{width:clamp(38px,7.6dvh,60px);height:clamp(38px,7.6dvh,60px)}
#myPatterns .jn-node{padding:1px 2px 3px;gap:1px}
#myPatterns .jn-name{font-size:11px}
#myPatterns .jn-pips i{width:5px;height:5px}
#myPatterns .jn-grid{gap:5px}
#myPatterns .gd-player{padding:3px 10px}
#myPatterns .gd-player .jp-ringwrap{width:42px}
#myPatterns .gd-ptext h3{font-size:16px}
#myPatterns #gameStats .ins-stat{padding:3px 6px}
#myPatterns #gameStats .ins-sico{width:24px;height:24px}
#myPatterns .gd-hero{padding:6px 10px 8px}
#myPatterns .gd-hmedal .medal{width:36px;height:36px}
#myPatterns .gd-htext h3{font-size:15px}
#myPatterns .gd-go{padding:7px 14px}
#myPatterns .page-hero{padding-top:4px;padding-bottom:4px}
#myPatterns>.panel{gap:6px}
#myPatterns .gd{gap:6px}
#myPatterns .jn-node .medal{width:clamp(40px,8.6dvh,64px);height:clamp(40px,8.6dvh,64px)}

/* ---- Dashboard v2: more air, bigger badge pictures, text and level stars, shorter badge cards, no greeting card ---- */
#myPatterns>.panel{position:relative;gap:12px;padding:12px 14px}
#myPatterns .page-hero{display:none}
#myPatterns .info-btn.info-btn-i{position:absolute;top:22px;right:24px;transform:none;z-index:3;background:#fffdf3}
#myPatterns .gd{gap:12px}
#myPatterns .gd-player{padding:10px 48px 10px 14px;gap:14px;border-radius:18px}
#myPatterns .gd-player .jp-ringwrap{width:54px}
#myPatterns .gd-ptext h3{font-size:18px}
#myPatterns .gd-pts{font-size:13.5px}
#myPatterns #gameStats{gap:10px}
#myPatterns #gameStats .ins-stat{padding:8px 10px;border-radius:14px}
#myPatterns #gameStats .ins-sico{width:28px;height:28px}
#myPatterns #gameStats .ins-stat b{font-size:19px}
#myPatterns #gameStats .ins-stat span:last-child{font-size:12px}
#myPatterns .gd-hero{padding:10px 14px 12px}
#myPatterns .gd-kick{font-size:11.5px}
#myPatterns .gd-hrew{font-size:14px}
#myPatterns .gd-hrow{gap:12px;margin:6px 0}
#myPatterns .gd-hmedal .medal{width:46px;height:46px}
#myPatterns .gd-htext h3{font-size:16px}
#myPatterns .gd-barrow{margin:2px 0 10px}
#myPatterns .gd-barrow .gd-hprog{font-size:14px}
#myPatterns .gd-go{padding:10px 16px;font-size:15px}
#myPatterns .jn-grid{grid-auto-rows:auto;align-content:space-evenly;gap:10px 8px}
#myPatterns .jn-grid>li{align-self:center}
#myPatterns .jn-node{height:auto;padding:8px 4px 8px;gap:4px}
#myPatterns .jn-node .medal{width:clamp(46px,9.6dvh,70px);height:clamp(46px,9.6dvh,70px)}
#myPatterns .jn-name{font-size:13px;font-weight:650;line-height:1.15}
#myPatterns .jn-pips{gap:4px}
#myPatterns .jn-pips i{width:9px;height:9px}

/* stats live inside the rank card (one quiet line) so the page can breathe */
#myPatterns #gameStats{display:none}
#myPatterns .gd-player{flex-wrap:wrap;padding:10px 46px 8px 14px;row-gap:6px}
#myPatterns .gd-ptext{flex:1;min-width:0}
#myPatterns .gd-stats{flex:0 0 100%;display:flex;justify-content:space-between;gap:8px;margin:0;padding-top:6px;border-top:1px solid #efe4bf;font-size:12.5px;color:#6d7c75;white-space:nowrap}
#myPatterns .gd-stats b{font-size:14px;color:#1f3c30}
#myPatterns .gd-hero{padding:8px 14px 10px}
#myPatterns .gd-hrow{margin:4px 0}
#myPatterns .gd-barrow{margin:0 0 8px}
#myPatterns .gd-go{padding:8px 16px}
#myPatterns .jn-node{padding:6px 3px 6px;gap:3px}
#myPatterns .jn-node .medal{width:clamp(44px,8dvh,64px);height:clamp(44px,8dvh,64px)}
#myPatterns .jn-name{font-size:12.5px;white-space:nowrap;letter-spacing:-.01em}
#myPatterns .jn-grid{align-content:space-around;gap:8px}

/* badges sit close together at the top; the game information sits below them */
#myPatterns .jn-grid{flex:none;align-content:start;gap:8px}
#myPatterns .gd-info{flex:none;padding:10px 14px 10px;border-radius:18px;background:#fff;border:1px solid #e6ede8}
#myPatterns .gd-info h4{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7a877f;font-weight:700}
#myPatterns .gd-info ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
#myPatterns .gd-info li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13.5px;color:#33433d}
#myPatterns .gi-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#myPatterns .gi-bar{height:7px;border-radius:99px;background:#eef2ef;overflow:hidden}
#myPatterns .gi-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f6d566,#dcae2c)}
#myPatterns .gd-info li b{color:#1f3c30;min-width:28px;text-align:right}
#myPatterns .gi-foot{margin:9px 0 0;padding-top:8px;border-top:1px solid #eef2ef;display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:#6d7c75}
#myPatterns .gi-foot b{color:#1f3c30}
#myPatterns .gi-none{margin:0;font-size:13px;color:#7a877f}
@media(max-height:739px){#myPatterns .gd-info{display:none}}
#myPatterns .gd-info li{grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr) auto;gap:8px}

.bk-act.bk-earn{border-color:#bfe0cc}.bk-act.bk-earn .bk-cost{color:#2f7a55}
.bk-act.bk-earn:hover:not(:disabled){background:#eaf6ef}

/* games are played in a centred sheet over a dimmed page */
body.game-modal-open::after{content:'';position:fixed;inset:0;background:#1f3c3078;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9400}
#endScreen #helpfulPrompt.game-modal{position:fixed;left:50%;top:50%;right:auto;bottom:auto;translate:-50% -50%;width:min(440px,calc(100vw - 32px));height:auto;max-height:86dvh;overflow:auto;z-index:9500;padding:18px 16px;animation:none}

/* the strawberry glows when Vito asks you to tap it */
.berry-corner.ask-glow{box-shadow:0 0 0 3px #ffd23f99,0 0 16px 6px #ffe27acc;animation:ask-glow 1.3s ease-in-out infinite}
@keyframes ask-glow{50%{box-shadow:0 0 0 6px #ffd23fcc,0 0 26px 10px #ffe27aee}}
.berry-corner .berry-chip.ask{animation:ask-bob 1.3s ease-in-out infinite}
@keyframes ask-bob{50%{transform:scale(1.18)}}
.berry-gain.basket{color:#2f7a55;border-color:#bfe0cc}
.bk-treat b{color:#1f3c30}

/* The online course is the highlight of the Toolbox: a dark green card with a big call to action */
.ins-page .course-feature{margin:14px 0 4px}
.ins-page .course-hero{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 20px 18px;border-radius:20px;background:linear-gradient(135deg,#24443a 0%,#2f5a49 55%,#3f735f 100%);color:#fff;box-shadow:0 8px 22px #24443a3d}
.ins-page .course-hero .course-tag{padding:3px 11px;border-radius:99px;background:#ffffff26;border:1px solid #ffffff40;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e9f6ee}
.ins-page .course-hero strong{font-size:22px;line-height:1.2;font-weight:700;color:#fff;margin:2px 0 0}
.ins-page .course-hero .course-desc{font-size:15px;line-height:1.5;color:#e0efe6}
.ins-page .course-hero .course-cta{margin-top:6px;padding:13px 24px;border-radius:99px;background:#fff3c4;color:#2a2a10;border:0;font-size:16px;font-weight:700;box-shadow:0 4px 14px #0003}
.ins-page .course-hero .course-cta:hover{background:#ffe89a}
.ins-page .course-hero .course-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ins-page .course-hero .course-note{font-size:12.5px;color:#cfe6d8}
@media(max-width:560px){.ins-page .course-hero .course-cta{width:100%;text-align:center}}

/* ================= Toolbox: one fixed screen, nothing moves or scrolls ================= */
main:has(#toolbox.active){display:flex;flex-direction:column;overflow:hidden}
main:has(#toolbox.active)>header p{display:none}
main:has(#toolbox.active)>header{padding-top:8px;padding-bottom:8px}
#toolbox.active{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
#toolbox>.panel{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 14px;margin:0;overflow-y:auto;overflow-x:hidden}
#toolbox .page-hero{flex:none;margin:0;padding:8px 14px;gap:10px;min-height:0}
#toolbox .page-hero .wh-emblem{width:34px;height:34px;flex:none}
#toolbox .page-hero .wh-emblem svg{width:18px;height:18px}
#toolbox .page-hero .ins-htext small,#toolbox .page-hero .ins-htext p{display:none}
#toolbox .page-hero h2{margin:0;font-size:18px}
#toolbox .course-feature{flex:none;margin:0}
#toolbox .course-hero{padding:14px 16px;gap:6px;border-radius:18px}
#toolbox .course-hero strong{font-size:19px}
#toolbox .course-hero .course-desc{font-size:13.5px;line-height:1.4}
#toolbox .course-hero .course-cta{padding:10px 20px;font-size:15px;margin-top:2px}
#toolbox .course-hero .course-note{font-size:12px}
#toolbox #toolboxStats{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
#toolbox #toolboxStats .ins-stat{padding:6px 8px;gap:6px;border-radius:14px;min-height:0}
#toolbox #toolboxStats .ins-sico{width:26px;height:26px;flex:none;border-radius:9px}
#toolbox #toolboxStats .ins-stat b{font-size:18px;line-height:1}
#toolbox #toolboxStats .ins-stat>span:not(.ins-sico){font-size:11px;line-height:1.15}
#toolbox #toolboxBadge{flex:none}
#toolbox #toolboxBadge .lk-badge.bc{margin:0}
#toolbox .insight-section.fold{flex:none;margin:0}
#toolbox .insight-section.fold .fold-head{min-height:56px}
.fold-sheet{width:min(560px,100%)!important}
.fold-sheet .fold-body{display:block;padding:0}
#toolbox .insight-section.fold .fold-head .sec-sub{display:none}
#toolbox .insight-section.fold .fold-head{min-height:52px;padding-top:8px;padding-bottom:8px}
#toolbox .insight-section.fold .fold-title h3{margin:0;font-size:16.5px}
#toolbox #toolboxStats .ins-stat{padding:4px 8px}
#toolbox #toolboxStats .ins-stat>span:not(.ins-sico){display:flex;flex-direction:column}
#toolbox #toolboxBadge .lk-badge.bc{padding:8px 12px}
#toolbox>.panel{gap:8px}
#toolbox .course-hero .course-tag{font-size:10.5px;padding:2px 9px}
#toolbox .course-hero{padding:12px 14px}
#toolbox #toolboxStats .ins-stat>span:not(.ins-sico){font-size:10.5px}
#toolbox .course-hero .course-desc{margin:0}

/* the real "Let's chat" button glows when Vito invites you to chat */
#homeChatBtn.ask-glow{animation:chat-glow 1.3s ease-in-out infinite}
@keyframes chat-glow{0%,100%{box-shadow:0 0 0 3px #ffd23f99,0 6px 16px #d4b65355}50%{box-shadow:0 0 0 8px #ffd23fcc,0 0 26px 8px #ffe27aee}}

/* ---- Toolbox v2: bigger text, and the cards share the whole screen so there is no empty space ---- */
#toolbox #toolboxStats{display:none}
#toolbox>.panel{gap:12px;padding:14px 16px}
#toolbox .page-hero{padding:8px 16px}
#toolbox .page-hero h2{font-size:21px}
#toolbox .course-feature{flex:1.5 1 auto;display:flex;min-height:0}
#toolbox .course-hero{flex:1;justify-content:center;padding:16px 18px;gap:8px}
#toolbox .course-hero .course-tag{font-size:12px}
#toolbox .course-hero strong{font-size:23px}
#toolbox .course-hero .course-desc{font-size:16px;line-height:1.45}
#toolbox .course-hero .course-cta{padding:13px 22px;font-size:17px}
#toolbox .course-hero .course-note{font-size:13.5px}
#toolbox #toolboxBadge{flex:none}
#toolbox #toolboxBadge .lk-badge.bc{padding:12px 14px}
#toolbox .lk-badge.bc .bc-text b{font-size:16.5px}
#toolbox .lk-badge.bc .bc-text em{font-size:14.5px}
#toolbox .insight-section.fold{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:64px}
#toolbox .insight-section.fold .fold-head{min-height:0;padding:12px 16px;flex:1;align-items:center}
#toolbox .insight-section.fold .fold-title h3{font-size:19px}
#toolbox .insight-section.fold .fold-head .sec-sub{display:none;font-size:14.5px}
@media(min-height:760px){#toolbox .insight-section.fold .fold-head .sec-sub{display:block}}
.fold-count{margin-left:auto;margin-right:6px;padding:4px 12px;border-radius:99px;background:#eef4f0;border:1px solid #dbe7df;font-size:14px;font-weight:650;color:#3f735f;white-space:nowrap}

#toolbox .course-hero{flex-wrap:nowrap}
#toolbox .insight-section.fold .fold-title h3{font-size:18px;white-space:nowrap}
.fold-count{padding:3px 10px;font-size:13.5px;margin-right:2px}
#toolbox .insight-section.fold .fold-head{gap:10px}
#toolbox .course-feature{flex:none}
#toolbox .course-hero{flex:none;padding:14px 16px;gap:6px}
#toolbox .course-hero .course-tag{font-size:11px;padding:2px 10px}
#toolbox .course-hero strong{font-size:21px}
#toolbox .course-hero .course-desc{font-size:15px;line-height:1.4}
#toolbox .course-hero .course-cta{padding:11px 20px;font-size:16px;margin-top:2px}
#toolbox .course-hero .course-note{font-size:12.5px;white-space:nowrap}
#toolbox .lk-badge.bc .bc-text em{font-size:13.5px}
#toolbox .lk-badge.bc .bc-text b{font-size:15.5px}
#toolbox #toolboxBadge .lk-badge.bc{padding:10px 14px}
#toolbox .insight-section.fold .fold-title{min-width:0;flex:1}
#toolbox .insight-section.fold .fold-title h3{font-size:17.5px;white-space:normal;line-height:1.2}
#toolbox .insight-section.fold{flex:1 1 auto}
#toolbox .course-feature{display:block}
#toolbox .course-hero{width:100%;box-sizing:border-box}
#toolbox #toolboxBadge .lk-badge.bc{padding:8px 14px}
#toolbox .course-feature{flex:1.3 1 auto;display:flex}
#toolbox .course-hero{flex:1 1 auto;justify-content:center}
#toolbox .insight-section.fold{flex:1 1 auto}

/* Progress: two lines (before and after) for the same chats */
.ba-chart{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:stretch;margin:14px 0 4px}
.ba-chart .mood-y{display:flex;flex-direction:column;justify-content:space-between;font-size:12px;font-weight:700;color:#7a877f;padding:0;line-height:1;height:100%}
.ba-chart{height:132px;grid-template-rows:132px}.ba-plot{position:relative;min-height:0;height:132px}.ba-plot svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* A chart with too many points to fit comfortably (moodChart's W past MOOD_DEFAULT_W) keeps its natural pixel width
   instead of being squeezed to fit, and scrolls—every point stays individually distinguishable and tappable. */
.mood-chart-wide .ba-plot{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mood-chart-wide .ba-plot svg{position:static;width:auto;height:100%}
.ba-legend{display:flex;justify-content:center;gap:22px;margin:4px 0 0;font-size:13.5px;font-weight:650;color:#4f5f57}
.ba-legend span::before{content:'';display:inline-block;width:18px;height:4px;border-radius:99px;margin-right:7px;vertical-align:middle}
.ba-legend .ba-b::before{background:repeating-linear-gradient(90deg,#d2570f 0 6px,transparent 6px 9px)}.ba-legend .ba-a::before{background:#5b4fc4}

/* Rating faces are coloured like the graphs (set per button by tintFaces in app.js): red to green. */
.face-btn .face-bg{fill:var(--fc,#e4ede6);stroke:rgba(30,42,36,.14);stroke-width:2.5}
.face-btn:hover .face-bg{fill:var(--fc,#e4ede6);filter:brightness(1.06)}
.face-btn .face-eyes circle{fill:#1e2a24}
.face-btn .face-mouth{stroke:#1e2a24}

/* When you chat: four bars, morning to night. */
.tod-sum{margin:0 0 6px;font-size:14.5px;color:#4a5b53}
.tod-chart{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 2px 4px;align-items:end}
.tod-col{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.tod-col b{font-size:15px;color:#25392f}
.tod-bar{display:flex;align-items:flex-end;width:100%;max-width:48px;height:96px;background:#eef2ee;border-radius:12px;overflow:hidden}
.tod-bar i{display:block;width:100%;border-radius:12px}
.tod-col svg{width:20px;height:20px;color:#5b6f66;margin-top:2px}
.tod-col em{font-style:normal;font-weight:700;font-size:13px;color:#33453c}
.tod-col small{font-size:11px;color:#7a877f}
.tod-col.top em{color:#1f3a2c}

.tod-col svg{width:26px;height:26px}

.ins-stat[data-open]{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.ins-stat[data-open]:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(60,90,70,.12)}
.ins-stat[data-open]:focus-visible{outline:3px solid #6fbf97;outline-offset:2px}
.insight-section{scroll-margin-top:76px}

/* After a treat his aura really glows: it swells and pulses four times, and Vito glows gold with it. */
.vito-aura.glow-burst{opacity:1;background:radial-gradient(closest-side,#fffbe0 0%,#ffe680dd 38%,#ffd23f88 68%,#ffd23f00 100%);animation:aura-burst 1.7s ease-in-out 4}
@keyframes aura-burst{0%,100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}50%{transform:translate(-50%,-50%) scale(1.4);filter:brightness(1.3)}}
#endScreenTalk.glow-burst{animation:pet-glow 1.7s ease-in-out 4}
@keyframes pet-glow{0%,100%{filter:drop-shadow(0 0 6px #ffe27a99)}50%{filter:drop-shadow(0 0 18px #ffe27a) drop-shadow(0 0 40px #ffd23fcc)}}
@media(prefers-reduced-motion:reduce){.vito-aura.glow-burst,#endScreenTalk.glow-burst{animation:none}}

/* Long lists show three and keep the rest one tap away. */
.more-hidden{display:none!important}
.more-btn{display:block;margin:10px auto 2px;padding:9px 20px;border-radius:999px;border:1.5px solid #cfe0d4;background:#f4f9f5;color:#2f6b4f;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.more-btn:hover{background:#e8f3ec}
.more-btn:focus-visible{outline:3px solid #6fbf97;outline-offset:2px}
.more-li{list-style:none;padding:0}

/* ---- Journal calendar ---- */
.journal-cal{background:#fff;border:1.5px solid #e2ebe5;border-radius:20px;padding:14px 14px 12px;margin:14px 0 14px;box-shadow:0 2px 10px rgba(50,80,62,.05)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px}
.cal-head strong{font-size:16px;color:#1f3c30}
.cal-nav{width:36px;height:36px;border-radius:50%;border:1.5px solid #d7e6dc;background:#f4f9f5;color:#2f6b4f;font-size:20px;line-height:1;cursor:pointer;padding:0}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-week span{text-align:center;font-size:12px;font-weight:700;color:#7a877f;padding:2px 0}
.cal-day,.cal-blank{position:relative;min-width:0;padding:0;font-family:inherit;aspect-ratio:1;display:grid;place-items:center;border-radius:12px;font-size:15px;color:#9aa8a0;font-weight:600;border:0;background:transparent}
.cal-day.has{background:#e4f4ea;color:#1f3c30;font-weight:800;cursor:pointer}
.cal-day.has:hover{background:#d3ecdd}
.cal-day.today{box-shadow:inset 0 0 0 2px #6fbf97}
.cal-day.sel{background:#2f6b4f;color:#fff}
.cal-day i{position:absolute;right:3px;bottom:2px;font-style:normal;font-size:10px;font-weight:800;color:#2f6b4f}
.cal-day.sel i{color:#cfeedd}
.cal-hint{margin:8px 2px 0;font-size:13px;color:#7a877f;text-align:center}
.journal-daybar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.journal-daybar strong{font-size:16px;color:#1f3c30}
.journal-daybar button{padding:7px 14px;border-radius:999px;border:1.5px solid #cfe0d4;background:#f4f9f5;color:#2f6b4f;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.journal-scroll{max-height:min(60vh,540px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:1.5px solid #e2ebe5;border-radius:16px;padding:8px;background:#fcfdfc}
.journal-scroll:focus-visible{outline:3px solid #6fbf97;outline-offset:2px}

.field-note{margin:-4px 0 6px;font-size:13px;color:#7a877f;line-height:1.4}

/* Long lists scroll inside a window as tall as their first three items: nothing is cut in half, and shadows are not clipped. */
.list-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity;padding:3px 5px 3px 3px;margin:0 -5px 0 -3px;scrollbar-width:thin;scrollbar-color:#b9cfc1 transparent}
.list-scroll>*{scroll-snap-align:start}
.list-scroll:focus-visible{outline:3px solid #6fbf97;outline-offset:2px;border-radius:14px}
.scroll-hint{margin:6px 0 0;text-align:center;font-size:13px;font-weight:650;color:#7a877f}
.scroll-hint[hidden]{display:none}
.more-hidden{display:none!important}

/* ---- The sample conversation: every page says it is a sample ---- */
.demo-banner{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;background:#fbf3ea;border:1.5px solid #ecd9bf;border-radius:18px;padding:14px 16px;margin:12px 0}
.demo-tag{grid-row:1;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a5a1f;background:#f6e3c6;border-radius:999px;padding:4px 10px;margin-top:2px}
.demo-banner strong{display:block;color:#7d5220;font-size:15px;margin:0 0 3px}
.demo-banner p{margin:0;font-size:14px;line-height:1.5;color:#4a3d2a}
.demo-go{grid-column:2;justify-self:start;margin-top:4px;padding:8px 16px;border-radius:999px;background:#fff;border:1.5px solid #e2c99f;color:#7d5220;font-weight:800;font-size:14px;text-decoration:none}

/* The tasks that find Vito strawberries, always there in his strawberry menu */
.bk-earn-row{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.bk-earn-row span{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7a877f}
.bk-earn-row button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:14px;border:1.5px solid #f0c9c2;background:#fdf1ee;color:#7a2f22;font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-align:left}
.bk-earn-row button b{color:#b0432c}

/* ---- Journal: foldable calendar, compact day rows, a big popup for reading ---- */
.journal-cal-fold{background:#fff;border:1.5px solid #e2ebe5;border-radius:20px;margin:14px 0;box-shadow:0 2px 10px rgba(50,80,62,.05);overflow:hidden}
.journal-cal-fold>summary{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;list-style:none;font-weight:800;color:#1f3c30}
.journal-cal-fold>summary::-webkit-details-marker{display:none}
.journal-cal-fold>summary em{font-style:normal;font-weight:650;color:#6b7b72;font-size:14px;margin-left:auto}
.journal-cal-fold>summary .fold-chev{margin-left:0}
.journal-cal-fold .journal-cal{border:0;border-radius:0;box-shadow:none;margin:0;padding:2px 14px 12px}
.journal-rows{display:flex;flex-direction:column;gap:10px}
.journal-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1.5px solid #e2ebe5;border-radius:18px;padding:12px 16px;font:inherit;cursor:pointer;color:#1f3c30}
.journal-row:hover{background:#f6faf7}
.journal-row .jr-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#e4f4ea;color:#2f7a58;flex:none}
.journal-row .jr-main{flex:1;min-width:0}
.journal-row strong{display:block;font-size:16px}
.journal-row small{display:block;margin-top:2px;font-size:13px;color:#6b7b72}
.journal-openall{display:block;margin:12px auto 0;padding:10px 22px;border-radius:999px;border:1.5px solid #cfe0d4;background:#f4f9f5;color:#2f6b4f;font:inherit;font-weight:800;font-size:14.5px;cursor:pointer}
.berry-story.j-sheet.journal-sheet{width:min(760px,100%)!important;max-height:92vh;padding:20px 18px 16px;background:#fff;border-color:#e2ebe5}
.journal-sheet h3{margin:0 0 12px;font-size:19px;color:#1f3c30}
.journal-sheet .journal-day{margin:0 0 12px}
.journal-sheet .bs-actions{position:sticky;bottom:-16px;background:linear-gradient(180deg,#fff0,#fff 40%);padding-top:10px}
.journal-sheet.one-day .journal-day>summary{display:none}
.journal-cal-fold>summary .fold-chev{transition:transform .2s ease}
.journal-cal-fold[open]>summary .fold-chev{transform:rotate(90deg)}

/* Admin link is hidden until the server says this is the admin account (menu.js). */
.side-link[hidden]{display:none!important}

/* Sign-in and admin forms: fields fill the card (the global form{justify-content:flex-end} pushed them to one side). */
.auth-form,#codeForm,.add-person-form{justify-content:stretch;justify-items:stretch}
#codeForm{display:block}

.profile-form label.switch-row{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:13px;line-height:1.5;color:#5c6f66}.profile-form label.switch-row input{width:auto;margin-top:3px}.profile-form label.switch-row b{color:#315d4c;display:block}

.profile-form label[hidden]{display:none}   /* "Please specify" (gender) stays hidden until "Other" is chosen */

/* Journal calendar: a small widget, never a full-width grid. On wide screens it sits beside the list of days. */
.journal-cal-fold{width:min(100%,330px)}
.journal-cal-fold .cal-week,.journal-cal-fold .cal-grid{gap:2px}
.journal-cal-fold .cal-day,.journal-cal-fold .cal-blank{aspect-ratio:auto;height:38px;font-size:13px;border-radius:10px}
.journal-cal-fold .cal-day i{font-size:9px;right:4px;bottom:2px}
.journal-cal-fold .cal-nav{width:30px;height:30px;font-size:17px}
.journal-cal-fold .cal-head strong{font-size:14px}
.journal-cal-fold .cal-hint{font-size:12px}
@media(min-width:880px){
  .journal-body{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}
  .journal-body .journal-cal-fold{position:sticky;top:14px;margin:14px 0 0}
  .journal-body .journal-entries{margin-top:14px}
}

/* Tighter Toolbox lists and Journal chats: no dead space around text. */
.berry-story.fold-sheet{width:min(640px,100%)!important}
.helps-card{margin:6px 0}
.helps-card summary{padding:10px 13px}
.helps-card .helps-detail{padding:0 12px 8px}
.technique-row{padding:7px 0;gap:8px}
.technique-row strong{font-size:13.5px}
.technique-row p{font-size:13px;line-height:1.4;margin:1px 0 0}
.journal-conversation{gap:8px;padding:2px 0 10px}
.journal-message{position:relative;padding:8px 12px;max-width:90%}
.journal-message small{display:block;margin-bottom:2px}
.journal-message p,.journal-message .journal-text{margin:0}
.journal-message .journal-text{padding-right:22px}
.journal-message .journal-actions{position:absolute;top:3px;right:5px;margin:0;padding:0;min-height:0}
.journal-message .journal-edit{padding:2px 4px;min-height:0;min-width:0;line-height:1;font-size:11px;background:transparent;border:0;box-shadow:none;opacity:.55}
.journal-conv-head{padding:8px 0 6px}
.jc-card .pt-facts{gap:8px;margin-top:8px}
.jc-card .pt-def{padding:10px 12px}

/* The menu button and the page header stay put at the top while the page scrolls. */
.dashboard-header{position:sticky;top:0;z-index:150}

/* Tap-to-call help under a safety message (988 by call or text, 911 in danger). */
.crisis-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.crisis-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:#c0453a;color:#fff!important;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 2px 8px #c0453a44}
.crisis-btn:hover,.crisis-btn:focus-visible{background:#a53a30;outline:3px solid #f0c9c4;outline-offset:2px}
.message .crisis-actions{flex:0 0 100%;width:100%}

/* ---- Toolbox redesign: colour-coded themes + a live "find a strategy" search, so 476 techniques are easy to search and
   browse instead of one flat grey list (scoped to Toolbox-only classes; nothing shared with other pages). ---- */
.tb-chip{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-right:2px}
/* Main Behavioural Pattern Category chip—colour comes inline per category (PATTERN_FAMILY_META), never a CSS
   tone class, so all 14 stay independent of the Toolbox's own 8-theme tone system. */
.pf-chip{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-right:2px}
.pf-cell{display:inline-flex;align-items:center;gap:6px}
.pf-chip.sm{width:24px;height:24px;border-radius:8px;margin-right:0}
.tb-chip.tone-mint{background:#e4f4ea;color:#2f7a58}
.tb-chip.tone-lav{background:#ece7fa;color:#5f4ab0}
.tb-chip.tone-gold{background:#fbf0cc;color:#a07414}
.tb-chip.tone-coral{background:#fde8e1;color:#b8553e}
.tb-chip.tone-blue{background:#e3f1fa;color:#2f6f95}
.tb-chip.tone-slate{background:#e7edf2;color:#4f6577}
.tb-chip.tone-sand{background:#f5e9cf;color:#8a6420}
.tb-chip.tone-rose{background:#fbe3e3;color:#a44646}
.helps-card.technique-theme summary{display:flex;align-items:center;gap:10px}
.helps-card.technique-theme .helps-name{flex:1}
/* A category, nested one level inside a theme, keeps a thin tint of its theme's colour so you always know which theme
   you're browsing inside, without repeating the icon at every level. */
.tb-domain{border-left:3px solid transparent;border-radius:10px}
.tb-domain.tone-mint{border-left-color:#7fc9a3;background:#f4faf6}
.tb-domain.tone-lav{border-left-color:#b3a3ea;background:#f7f5fd}
.tb-domain.tone-gold{border-left-color:#e8bd4e;background:#fdfaf1}
.tb-domain.tone-coral{border-left-color:#ee9c86;background:#fdf6f4}
.tb-domain.tone-blue{border-left-color:#7fbfe3;background:#f4faff}
.tb-domain.tone-slate{border-left-color:#9fb3c2;background:#f5f8fa}
.tb-domain.tone-sand{border-left-color:#d9ac57;background:#fdf9f0}
.tb-domain.tone-rose{border-left-color:#ec9797;background:#fdf4f4}
.tb-domain .helps-detail{background:#fff;border-radius:0 0 8px 8px;margin:0 -15px -12px;padding:4px 15px 8px}
.technique-row{border-left:3px solid transparent;padding-left:10px;margin-left:-10px;border-radius:8px;transition:background .15s ease}
.technique-row:hover{background:#00000006}
.technique-row.tone-mint{border-left-color:#bfe3cf}
.technique-row.tone-lav{border-left-color:#d6cdf1}
.technique-row.tone-gold{border-left-color:#f0dc9a}
.technique-row.tone-coral{border-left-color:#f3cbbd}
.technique-row.tone-blue{border-left-color:#bcd9ea}
.technique-row.tone-slate{border-left-color:#cdd8e0}
.technique-row.tone-sand{border-left-color:#ecd6a7}
.technique-row.tone-rose{border-left-color:#f5cccc}
.tb-crumb{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:#7a887f;margin-bottom:2px;text-transform:uppercase}

/* The search box: the main way to find a strategy for a real problem, without opening the full library. */
.tb-find{margin:16px 0 4px}
.tb-find-label{display:block;font-size:13px;font-weight:700;color:#3f4f47;margin:0 0 6px}
.tb-find-box{position:relative;display:flex;align-items:center}
.tb-find-box svg{position:absolute;left:14px;color:#7a887f;pointer-events:none}
.tb-find-box input{width:100%;padding:12px 14px 12px 42px;border-radius:14px;border:1.5px solid #dce7df;background:#fff;font:inherit;font-size:15px;color:#26332f}
.tb-find-box input:focus-visible{outline:3px solid #8fcaa8;outline-offset:0;border-color:#7fc9a3}
.tb-find-box input::-webkit-search-cancel-button{cursor:pointer}
.tb-results{margin-top:10px;background:#fff;border:1.5px solid #dce7df;border-radius:16px;padding:6px 15px}
.tb-result-count{margin:8px 0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7a887f}
.tb-no-results{padding:14px 2px;text-align:center}

/* Toolbox v3: adding a real search box (and a results list of varying length) makes "squeeze everything into exactly one
   screen, never scroll" (Toolbox v2, above) impossible to keep without clipping results. Toolbox now scrolls normally,
   the same as every other tab (Insights, Dashboard, Journal) — simpler and more robust than fighting to fit it. */
main:has(#toolbox.active){overflow-y:auto!important;overflow-x:hidden}
#toolbox.active{flex:none!important;min-height:0}
#toolbox>.panel{overflow:visible!important}
#toolbox .course-feature,#toolbox .course-hero{flex:none!important}
#toolbox .insight-section.fold{flex:none!important;justify-content:flex-start!important;min-height:0!important}
/* Name and count stack tightly as one column at every width, instead of wrapping onto separate flex rows (that briefly
   left large empty gaps before the +/- toggle on narrow phones). Also: the technique library expands in place on the
   page now (see dashboard.js), never in a popup, and every row here is tighter so nothing feels like empty space. */
.helps-card{margin:4px 0}
.helps-card summary{padding:9px 12px;gap:8px}
.tb-title{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.helps-card .helps-name{line-height:1.25}
.helps-card .helps-ratio{font-size:12px;white-space:normal}
.technique-theme summary,.tb-domain summary{align-items:center}
.tb-domain .helps-detail{margin:0 -12px -9px;padding:2px 12px 6px}
.technique-list{gap:0}
.technique-row{padding:6px 0}

/* Fix: the negative-margin "full bleed" trick above clipped the first letters of technique names, since it compounded
   with .helps-card's own overflow:hidden and .tb-domain's zero padding. Replaced with a plain inset panel (no negative
   margins) and box-shadow accents (paint a colour without moving the box), which cannot clip content. */
.tb-domain .helps-detail{background:#fff;border-radius:8px;margin:0 2px 6px;padding:6px 10px 8px}
.technique-row{border-left:none!important;padding:7px 8px;margin-left:0!important;border-radius:8px}
.technique-row.tone-mint{box-shadow:inset 3px 0 0 #bfe3cf}
.technique-row.tone-lav{box-shadow:inset 3px 0 0 #d6cdf1}
.technique-row.tone-gold{box-shadow:inset 3px 0 0 #f0dc9a}
.technique-row.tone-coral{box-shadow:inset 3px 0 0 #f3cbbd}
.technique-row.tone-blue{box-shadow:inset 3px 0 0 #bcd9ea}
.technique-row.tone-slate{box-shadow:inset 3px 0 0 #cdd8e0}
.technique-row.tone-sand{box-shadow:inset 3px 0 0 #ecd6a7}
.technique-row.tone-rose{box-shadow:inset 3px 0 0 #f5cccc}

/* "What helps you": which situation each strategy was tried for, and a real way to learn more — the Toolbox's own
   matching category when the wording lines up, otherwise the same search every technique row uses. Lives inside
   .helps-detail on Toolbox (whatHelpsCard) and is unused on Insights' own capped ranked list. */
.wh-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.wh-situations{font-size:12.5px;color:#5c6f66;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.wh-situations.muted{color:#9aa8a0;font-style:italic}
.wh-learn{flex:none;font:inherit;font-size:12.5px;font-weight:700;color:#3f735f;background:#fff;border:1px solid #cfe0d4;border-radius:99px;padding:4px 11px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.wh-learn:hover{background:#f4f9f5}

/* "My Mood" (rewritten 2026-09-28, round 3): the calendar is the main view—the exact same look as Journal's
   (.cal-head/.cal-nav/.cal-week/.cal-grid/.cal-day, defined near Journal's own rules), just compact, and every day is
   tappable (not just days with a rating, since picking a range needs empty days too—Journal's own calendar leaves
   .cal-day unclickable without .has; this one overrides that). A day/range in progress is shown with a light tint;
   the two ends of a pick are solid dark green. Charts below reuse .ba-chart/.mood-y. */
.mood-cal-fold{width:min(100%,330px);margin:14px auto 4px}
.mood-cal-fold .cal-day,.mood-cal-fold .cal-blank{aspect-ratio:auto;height:38px;font-size:13px;border-radius:10px}
.mood-cal-fold .cal-day{cursor:pointer}
.mood-cal-fold .cal-day.has{color:#fff;font-weight:800}
.mood-cal-fold .cal-nav{width:30px;height:30px;font-size:17px}
.mood-cal-fold .cal-head strong{font-size:14px}
.mood-cal-fold .cal-hint{font-size:12px;margin-bottom:4px}
.mood-cal-clear{display:block;margin:2px auto 0;padding:6px 14px;border-radius:999px;border:1.5px solid #dce7df;background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:#3f4f47;cursor:pointer}
.mood-cal-clear:hover{background:#f4f9f5}
.mood-today-list{margin-top:10px;max-height:260px;overflow-y:auto}
.mdc-wrap{display:grid;grid-template-columns:16px 1fr;gap:4px;margin:8px 0 4px;align-items:stretch}
.mdc-ylabel{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:700;color:#5c6f66;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.mdc-plot{min-width:0}
.mdc-plot svg{display:block;width:100%;height:auto}
.mdl-fold{background:#f7faf8;border:1px solid #e6eee9;border-radius:14px;margin:12px 0 0;overflow:hidden}
.mdl-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;font-weight:700;font-size:13.5px;color:#26332f}
.mdl-fold>summary::-webkit-details-marker{display:none}
.mdl-fold[open]>summary .fold-chev{transform:rotate(45deg)}
.mdl-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;list-style:none;margin:0;padding:0 14px 12px}
.mdl-grid li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #eef2ef;font-size:13.5px}
.mdl-grid li:last-child{border-bottom:none}
.mdl-time{color:#66756d}
.mdl-mood{font-weight:700;color:#26332f}
@media(max-width:420px){.mdl-grid{grid-template-columns:1fr}}
/* Each piece of My Mood (chat times, the day/range chart, Progress, Patterns) is its own fold—real reported request:
   "Whatever section can be folded fold and allow to expand... make it easy to understand and follow." The calendar
   itself is never wrapped in one of these; it's the main view, always visible. */
.mood-fold{background:#f7faf8;border:1px solid #e6eee9;border-radius:14px;margin:0 0 10px;overflow:hidden}
.mood-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:700;font-size:14.5px;color:#26332f}
.mood-fold summary::-webkit-details-marker{display:none}
.mood-chev{margin-left:auto;flex-shrink:0;display:inline-block;border:solid #5c8a76;border-width:0 2px 2px 0;padding:4px;transform:rotate(45deg);transition:transform .2s ease}
.mood-fold[open] .mood-chev{transform:rotate(-135deg)}
.mood-fold-body{padding:0 14px 14px}
/* "My mood patterns": a real reported format request—an emoji, a short verdict, then the actual evidence sentence,
   as plain rows (no expand/collapse; the evidence is right there already). */
/* Mood Patterns cards (My Mood, real reported request)—a short title, a simple icon, a coordinated colour (the
   same per-time-of-day colours the "Mood throughout the day" chart already uses, or a consistent lavender for
   weekday patterns), a short explanation, and the real evidence underneath. */
.mood-pattern-cards{display:grid;gap:10px;margin:6px 0 0}
.mood-pattern-card{background:#fff;border:1px solid #e6eee9;border-left:4px solid #9cc7e8;border-radius:14px;padding:12px 14px}
.mp-head{display:flex;align-items:center;gap:10px}
.mp-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;font-size:16px;flex:none}
.mp-head h4{margin:0;font-size:14.5px;color:#26332f}
.mp-explain{margin:8px 0 0;font-size:13px;color:#3a4a42;font-weight:600}
.mp-evidence{margin:4px 0 0;font-size:13px;color:#5c6f66}
/* Reports: the two filters (Area of Life, Time frame) sit side by side above everything the page shows, so it is
   always clear what the numbers below are scoped to. */
.rep-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:6px 0 14px}
.rep-filter-area{margin:0}
.rep-time-fold{background:#f7faf8;border:1px solid #e6eee9;border-radius:14px;min-width:180px}
.rep-time-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 14px;font-weight:700;font-size:13px;color:#26332f}
.rep-time-fold summary::-webkit-details-marker{display:none}
.rep-time-fold summary em{font-style:normal;font-weight:600;color:#56836f}
.rep-time-fold[open] .fold-chev{transform:rotate(45deg)}
.rep-time-fold>div{padding:0 10px 10px}
/* The shared global filter bar's category checklists (Area of life / Pattern / Trigger / Strategy Category)—
   plain checkboxes in a scrollable fold, real reported request: nothing here existed as a multi-select before, so
   this is intentionally minimal rather than a new bespoke control. */
.filter-fold{max-width:260px}
.filter-checklist{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.filter-group-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b7a72;padding:8px 2px 2px}.filter-group-h:first-child{padding-top:2px}
.filter-check-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;font-size:13px;color:#2c3a34;cursor:pointer}
.filter-check-row:hover{background:#eef4f0}
.filter-check-row input[type="checkbox"]{width:16px;height:16px;flex:none;accent-color:#2f6b4f}
/* Download this report: a small action row, not a data section—a separate FILE the person downloads (real reported
   request: never rendered as more content on this page). */
.rep-download{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;font-size:13px;font-weight:700;color:#56645d}
.rep-dl-btn{min-height:36px;padding:6px 16px;border-radius:999px;border:1.5px solid #dce7df;background:#fff;font:inherit;font-size:13px;font-weight:700;color:#2c4c3f;cursor:pointer}
.rep-dl-btn:hover{background:#f4f9f5}
.rep-close-btn{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid #dce7df;background:#fff;color:#56645d;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.rep-close-btn:hover{background:#f4f9f5;color:#26332f}
/* The Reports tab's actual REPORT content: one cohesive, always-visible document—deliberately NOT styled like
   Insights' own clickable fold-cards (real reported request: "other information from insights page must not be
   here"). Every section is always open; nothing needs a tap to read, and every date/area shown is the exact
   resolved value, never a vague label. */
.report-doc{background:#fff;border-radius:20px;border:1px solid #e3ebe5;box-shadow:0 1px 2px #24352b0a,0 10px 28px #24352b0a;overflow:hidden;margin:10px 0 24px}
.report-doc-head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:26px 24px;background:linear-gradient(135deg,#eef5f0,#f9fbf9);border-bottom:1px solid #e3ebe5}
.report-logo{width:56px;height:56px;border-radius:14px;flex-shrink:0;box-shadow:0 2px 6px #24352b1a}
.report-meta{min-width:0}
.report-meta h2{margin:0 0 6px;font-size:21px;color:#1f3c30}
.report-meta p{margin:0 0 2px;font-size:13.5px;color:#4a5a52}
.report-meta p b{color:#26332f}
.report-sec{padding:24px}
.report-sec+.report-sec{border-top:1px solid #eef2ef}
.report-sec h3{margin:0 0 4px;font-size:18px;color:#1f3c30;display:flex;align-items:center;gap:9px}
.report-sec-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.report-sec-fold>summary::-webkit-details-marker{display:none}
.report-sec-fold>summary>h3{margin:0}
.report-sec-fold:not([open])>summary{margin-bottom:0}
.report-sec-fold[open]>summary{margin-bottom:4px}
.report-sec-fold[open]>summary .fold-chev{transform:rotate(45deg)}
.report-dot{width:9px;height:9px;border-radius:50%;background:#6fbf97;flex-shrink:0}
.report-sec.tone-gold .report-dot{background:#e8bd4e}
.report-sec.tone-coral .report-dot{background:#ee9078}
.report-sec.tone-lav .report-dot{background:#a08ee0}
.report-sec .sec-sub{margin:0 0 14px}
.report-sec .narrative-header{margin:2px 0 8px}
/* One block per pattern/trigger/strategy—plain, read top to bottom, no expand/collapse (this IS the report). */
.report-block{padding:14px 16px;border:1px solid #e6ede8;border-radius:14px;margin:0 0 12px;background:#fbfcfa;position:relative}
/* The single most frequent trigger/pattern/behavioural function IN THIS SCOPE (real reported request)—a visibly
   distinct card, not just a bigger number buried in the same style as everything else. */
.report-block-main{background:#fbf5e4;border-color:#e8bd4e;border-width:1.5px;padding-top:30px}
.report-main-badge{position:absolute;top:10px;right:14px;background:#e8bd4e;color:#4a3406;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.report-block:last-child{margin-bottom:0}
.report-block p{margin:0 0 6px}
.report-block p:last-child{margin-bottom:0}
.report-def{font-size:13px;color:#5c6f66}
.report-def b{color:#3f4f47}
.report-bar{height:10px;border-radius:99px;background:#e8dccf;overflow:hidden;display:flex;margin:8px 0}
.report-bar i{display:block;height:100%;background:#3f8f6f}
/* Real reported bug: a wide table just got cut off at a phone's edge with no way to see the rest. Every report
   table now sits inside its own horizontally-scrolling container, behind a fold so a long one doesn't dominate the
   page (real reported request: "Should be folded on the page"). */
.report-table-fold{background:#f7faf8;border:1px solid #e6eee9;border-radius:14px;margin:10px 0 18px;overflow:hidden}
.report-table-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;font-weight:700;font-size:13.5px;color:#26332f}
.report-table-fold summary::-webkit-details-marker{display:none}
.report-table-fold[open] .fold-chev{transform:rotate(45deg)}
.report-table-scroll{overflow-x:auto;padding:0 14px 14px;-webkit-overflow-scrolling:touch}
.report-table{width:100%;min-width:420px;border-collapse:collapse;font-size:13px;margin:0}
.report-table th,.report-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #e6ede8;white-space:nowrap}
.report-table th{color:#56645d;font-weight:700;background:#f4f9f5}
.report-appendix-chart{margin:0 0 20px}
.report-appendix-chart h4{margin:0 0 8px;font-size:14.5px;color:#3f4f47}
/* Mood over time (Reports): every rating shown, shaded by time of day—legend with the same sun/moon icons "When
   you chat" uses, plus a caption that fills in with the exact time once a point is tapped. */
.rmt-wrap{margin:0 0 4px}
.rmt-wrap .ba-chart{height:220px;grid-template-rows:220px}
.rmt-wrap .ba-plot{height:220px}
.rmt-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 10px;font-size:12.5px;font-weight:600;color:#3f4f47}
.rmt-legend-item{display:inline-flex;align-items:center;gap:5px}
.rmt-legend-item i{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.rmt-legend-item svg{flex-shrink:0}
.rmt-caption{margin:8px 0 0;font-size:12.5px;min-height:1.4em}

.pt-view-tabs{display:flex;gap:6px;margin:0 0 12px;padding:3px;background:#eef3f0;border-radius:12px;width:fit-content}
.pt-view-tab{border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:700;color:#56645d;padding:7px 18px;border-radius:9px;cursor:pointer}
.pt-view-tab.active{background:#fff;color:#2f3f37;box-shadow:0 1px 3px #0000001f}
.pt-view-tab:focus-visible{outline:2px solid #4f8f72;outline-offset:2px}
.pt-view-panel[hidden]{display:none}
.pt-fam-n{margin-left:auto;font-size:12px;font-weight:700;color:#56645d;background:#e9f0ec;border-radius:99px;padding:2px 9px;min-width:22px;text-align:center}
.pt-fam-group>summary .pt-fam-h{flex:1;min-width:0}
.ins-page .pt-dot.pt-dot-cat{background:var(--cat)!important}
.report-table-bare{margin:0}

.side-sub{display:flex;flex-direction:column;gap:2px;margin:0 0 4px 20px;padding-left:8px;border-left:2px solid rgba(63,115,95,.22)}
.side-nav .side-sub .side-link{min-height:34px;padding:0 10px;font-size:13.5px;font-weight:550}
.side-nav-top .side-sub .side-link::before{display:none}

/* ---- Reports page: two clear steps, bigger type, a highlighted download card ---- */
#reports .ins-htext small{font-size:13px;letter-spacing:.08em}
#reports .ins-htext h2{font-size:30px;line-height:1.15}
#reports .ins-htext p{font-size:16.5px;line-height:1.5}
.rep-step{margin:26px 0 0}
.rep-step-h{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:20px;font-weight:800;color:#24362e;letter-spacing:-.005em}
.rep-step-n{flex:none;width:32px;height:32px;border-radius:50%;background:#3f735f;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800}
.rep-step-sub{margin:0 0 14px 44px;font-size:16px;line-height:1.5;color:#56645d}
#reports .rep-time-fold{min-width:210px;border-radius:16px;background:#fff}
#reports .rep-time-fold summary{min-height:54px;padding:14px 18px;font-size:16px;gap:10px}
#reports .rep-time-fold summary em{font-size:15px}
#reports .filter-check-row{font-size:16px;padding:10px 8px;min-height:44px}
#reports .ghost-open{font-size:15px;min-height:44px;padding:0 18px}
.rep-download{margin:26px 0 8px}
.rep-dl-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:26px 28px;border-radius:26px;border:1.5px solid #b9d6c5;background:linear-gradient(135deg,#e6f3eb 0%,#f4f9f1 55%,#fbf6e9 100%);box-shadow:0 14px 34px rgba(31,106,83,.14)}
.rep-dl-text{flex:1 1 280px;min-width:0}
.rep-dl-text strong{display:block;font-size:21px;line-height:1.25;color:#1f4d3d;margin-bottom:6px}
.rep-dl-text p{margin:0;font-size:16px;line-height:1.55;color:#44574d}
.rep-dl-btns{display:flex;flex-wrap:wrap;gap:12px}
.rep-dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:2px solid #1f6a53;background:#fff;font:inherit;font-size:17px;font-weight:750;color:#1f6a53;cursor:pointer;transition:background .15s,transform .15s}
.rep-dl-btn:hover{background:#eef6f1}
.rep-dl-btn:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
.rep-dl-btn.rep-dl-primary{background:#1f6a53;color:#fff;box-shadow:0 8px 18px rgba(31,106,83,.28)}
.rep-dl-btn.rep-dl-primary:hover{background:#185743}
@media (max-width:560px){.rep-dl-card{padding:20px}.rep-dl-btns{width:100%}.rep-dl-btn{flex:1 1 100%}.rep-step-sub{margin-left:0}}

/* ---- Filters: one dropdown menu on every page that has the shared filter bar (Insights x4, Reports) ---- */
.gf-bar{display:block;position:relative;margin:4px 0 14px}
.gf-menu{position:relative}
.gf-menu-btn{list-style:none;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;border-radius:18px;background:#fff;border:1.5px solid #cfe0d6;cursor:pointer;font-size:18px;font-weight:750;color:#24362e;box-shadow:0 2px 8px rgba(40,80,60,.07)}
.gf-menu-btn::-webkit-details-marker{display:none}
.gf-menu-btn svg{color:#3f735f;flex:none}
.gf-menu-btn .fold-chev{margin-left:0}
.gf-menu-n{margin-left:auto;font-style:normal;font-size:15.5px;font-weight:700;color:#2f6b4f;background:#e6f2ec;border-radius:99px;padding:4px 14px}
.gf-menu[open]>.gf-menu-btn{border-color:#3f735f;box-shadow:0 0 0 4px rgba(63,115,95,.16)}
.gf-menu[open]>.gf-menu-btn .fold-chev{transform:rotate(45deg)}
.gf-menu-panel{position:absolute;z-index:60;left:0;top:calc(100% + 8px);width:min(540px,100%);max-height:min(74vh,600px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid #d3e3d9;border-radius:22px;box-shadow:0 20px 48px rgba(20,50,38,.24);padding:10px;display:flex;flex-direction:column;gap:8px}
.gf-menu-panel .rep-time-fold,.gf-menu-panel .filter-fold{max-width:none;min-width:0;width:100%;background:#f7faf8}
.gf-menu-panel .rep-time-fold summary{min-height:54px;padding:12px 16px;font-size:17px}
.gf-menu-panel .rep-time-fold summary em{margin-left:auto;font-size:15.5px}
.gf-menu-panel .filter-checklist{max-height:none;overflow:visible;padding:2px 4px 8px}
.gf-menu-panel .filter-check-row{font-size:16.5px;padding:10px 8px;min-height:46px}
.gf-menu-panel .filter-check-row input[type="checkbox"]{width:20px;height:20px}
.gf-menu-panel .filter-group-h{font-size:12.5px;padding-top:12px}
.gf-menu-foot{position:sticky;bottom:-10px;display:flex;gap:10px;justify-content:flex-end;padding:10px 0 4px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 35%)}
.gf-menu-foot .ghost-open{min-height:48px;padding:0 18px;border-radius:14px;font-size:16px}
.gf-done{min-height:48px;padding:0 26px;border-radius:14px;border:0;background:#1f6a53;color:#fff;font:inherit;font-size:16.5px;font-weight:750;cursor:pointer}
.gf-done:hover{background:#185743}
@media (max-width:640px){.gf-menu-panel{width:100%}}

/* ---- Insights pages (Insights, Areas of Life, Triggers, Patterns): bigger type, nothing hidden in scroll windows ---- */
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-htext small{font-size:13px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-htext h2{font-size:27px;line-height:1.15}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-htext p{font-size:16.5px;line-height:1.5}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-stat b{font-size:28px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-stat>span:last-child{font-size:15px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-group-h{font-size:14px;letter-spacing:.07em}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-group .fold-title h3,:is(#insights,#insAreas,#insTriggers,#insPatterns) .fold-title h3{font-size:20px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-group .fold-title .sec-sub,:is(#insights,#insAreas,#insTriggers,#insPatterns) .fold-title .sec-sub{font-size:15.5px;line-height:1.45}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .fold-badge{font-size:14.5px;padding:4px 12px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-subhead{font-size:15px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-fam-h{font-size:17.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-fam-n{font-size:15px;padding:3px 11px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-fam-group>summary{padding:14px 16px;min-height:60px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-main strong{font-size:18.5px;line-height:1.3}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-count b{font-size:24px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-count small{font-size:14px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-def{font-size:16.5px;line-height:1.5}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-def span{font-size:12.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-flab{font-size:13px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-chip,:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-chip.trig,:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-chip.area,:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-chip.pat,:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-chip.lib{font-size:15px;padding:7px 14px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-chip b{font-size:13.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-go,:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-go-btn{font-size:16px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-story,:is(#insights,#insAreas,#insTriggers,#insPatterns) .pattern-summary,:is(#insights,#insAreas,#insTriggers,#insPatterns) .pattern-card{font-size:16px;line-height:1.5}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-view-tab{font-size:16.5px;padding:10px 22px;min-height:46px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .wh-htext h4{font-size:20px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .wh-htext p{font-size:16px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .wh-h{font-size:17px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .wh-name{font-size:17.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .wh-rank,:is(#insights,#insAreas,#insTriggers,#insPatterns) .wh-frac{font-size:15px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .np-title{font-size:17.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .np-body{font-size:16.5px;line-height:1.55}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .np-group>summary{font-size:18px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .chg{font-size:16px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .ch-sum{font-size:15.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .tl-pick{font-size:15px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .tl-select{font-size:16px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .mood-y,:is(#insights,#insAreas,#insTriggers,#insPatterns) .mood-note{font-size:14px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .lk-count,:is(#insights,#insAreas,#insTriggers,#insPatterns) .lk-badge{font-size:15.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .trend-pill{font-size:13.5px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .fold-all,:is(#insights,#insAreas,#insTriggers,#insPatterns) .np-all{font-size:15.5px;min-height:44px}
/* Long lists are shown in full on these pages (the page scrolls, never a small window inside it). */
:is(#insights,#insAreas,#insTriggers,#insPatterns) .list-scroll{max-height:none!important;overflow:visible!important;margin:0;padding:0}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .scroll-hint{display:none}
/* Phone: the same pages, tighter spacing so more fits on one screen (type stays large). */
@media (max-width:640px){
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .insights-panel,:is(#insights,#insAreas,#insTriggers,#insPatterns).view>.panel{padding-left:10px;padding-right:10px}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-hero{padding:14px 14px;gap:12px}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-htext h2{font-size:23px}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .fold-head{padding:14px 14px}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .pt-card>summary{padding:12px 14px}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .ins-group{margin-top:14px}
}
/* Tables on Areas of Life, Patterns and Triggers: a real table on every screen (header, columns, rows). Text wraps so it always fits the width
   (nothing runs off to the side), cells are tight with thin grid lines, numbers sit in narrow centred columns, and several areas in one cell
   stack one per line. */
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table-scroll{overflow-x:visible;padding:0 0 2px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table{width:100%;min-width:0;table-layout:auto;border-collapse:collapse;font-size:14.5px;line-height:1.32}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table th,:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table td{white-space:normal;overflow-wrap:break-word;vertical-align:top;text-align:left;padding:7px 10px;border:1px solid #e3ece6}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table th{font-size:13px;line-height:1.25;vertical-align:middle;background:#eaf3ee;color:#3d5a4d}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table tbody tr:nth-child(even) td{background:#f6faf7}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table th.num,:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table td.num{text-align:center;white-space:nowrap;width:1%;padding-left:8px;padding-right:8px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table .pf-cell{display:flex;align-items:flex-start;gap:6px;max-width:100%;white-space:normal}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table .pf-cell + .pf-cell{margin-top:4px}
:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table .pf-cell .pf-chip{margin-top:1px}
@media (max-width:640px){
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table{font-size:12px;line-height:1.28;table-layout:fixed}   /* fixed: the columns always share exactly the width there is */
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table-fold.report-table-bare{margin-left:-10px;margin-right:-10px}   /* use the width the page padding was taking */
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table th{font-size:11px}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table th,:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table td{padding:6px 5px;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table th.num,:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table td.num{width:70px;min-width:70px;padding-left:3px;padding-right:3px;white-space:normal;hyphens:manual}
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table.cols-4 th.num,:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table.cols-4 td.num{width:54px;min-width:54px}   /* with four columns the words need the room */
  :is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table .pf-chip,:is(#insights,#insAreas,#insTriggers,#insPatterns) .report-table .pf-chip.sm{display:none}   /* on a phone the width goes to the words */
}

/* ---- Chat: the End conversation button (the end-call handset everyone knows as "hang up", in a warm red so it reads as "end") ---- */
#chat .chat-end{margin-left:auto;flex:none;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:linear-gradient(180deg,#d4695a,#b9473a);border:1px solid #a63d31;box-shadow:0 2px 6px #a63d3138,inset 0 1px 0 #ffffff40;transition:transform .15s,box-shadow .15s,filter .15s}
#chat .chat-end[hidden]{display:none}
#chat .chat-end:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 5px 12px #a63d3145,inset 0 1px 0 #ffffff50}
#chat .chat-end:active{transform:translateY(0) scale(.95)}
#chat .chat-end:focus-visible{outline:3px solid #8a6a22;outline-offset:2px}
#chat .chat-end svg{display:block}
@media(min-width:821px){#chat .chat-safe + .chat-end{margin-left:0}}   /* wide screens: the Private pill already pushes right */
@media(prefers-reduced-motion:reduce){#chat .chat-end{transition:none}}

/* ---- Reports: the "your report is ready" panel (Share / Save / Done), shown inside the download card instead of leaving the page ---- */
.rep-ready{flex:1 1 100%;display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1.5px solid #cfe0d6}
.rep-ready[hidden]{display:none}
.rep-ready-msg{margin:0;font-size:16px;line-height:1.5;color:#1f4d3d;font-weight:650}
.rep-dl-btn:disabled{opacity:.6;cursor:default}

/* ---- Reports: Preview (highlighted, first) and the full-screen preview window ---- */
.rep-dl-btn.rep-dl-preview{background:linear-gradient(180deg,#ffd75e,#f1a91b);border-color:#c78a0c;color:#3b2a00;box-shadow:0 8px 20px rgba(241,169,27,.45);animation:repPreviewPulse 2.2s ease-in-out 3}
.rep-dl-btn.rep-dl-preview:hover{background:linear-gradient(180deg,#ffe07a,#f6b12a)}
.rep-dl-btn.rep-dl-preview::before{content:'';width:22px;height:22px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 4.5 12 4.5 22.5 12 22.5 12 18.5 19.5 12 19.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes repPreviewPulse{0%,100%{box-shadow:0 8px 20px rgba(241,169,27,.45),0 0 0 0 rgba(241,169,27,.55)}50%{box-shadow:0 8px 20px rgba(241,169,27,.45),0 0 0 9px rgba(241,169,27,0)}}
@media(prefers-reduced-motion:reduce){.rep-dl-btn.rep-dl-preview{animation:none}}
.rep-preview{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;background:#fff}
.rep-preview-bar{flex:none;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:#1f4d3d;color:#fff}
.rep-preview-bar strong{flex:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-preview-close,.rep-preview-share{min-height:40px;padding:0 18px;border-radius:999px;border:0;font:inherit;font-size:15px;font-weight:750;cursor:pointer}
.rep-preview-close{background:#fff;color:#1f4d3d}
.rep-preview-share{background:#ffd75e;color:#3b2a00}
.rep-preview-close:focus-visible,.rep-preview-share:focus-visible{outline:3px solid #ffd75e;outline-offset:2px}
.rep-preview-frame{flex:1;width:100%;height:100%;border:0;background:#f1f3f2}
.rep-zoom{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.16);border-radius:999px;padding:2px}
.rep-zoom button{min-width:40px;min-height:36px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:20px;font-weight:700;line-height:1;cursor:pointer}
.rep-zoom button:hover:not(:disabled){background:rgba(255,255,255,.2)}
.rep-zoom button:disabled{opacity:.35;cursor:default}
.rep-zoom .rep-zoom-label{min-width:54px;font-size:14px;font-weight:700}
.rep-zoom button:focus-visible{outline:3px solid #ffd75e;outline-offset:1px}
.rep-preview-pages{flex:1;min-height:0;overflow-x:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch;background:#dce5df;padding:12px 12px 28px}
.rep-preview-pages.rep-preview-native{padding:0;overflow:hidden;display:flex}
.rep-preview-page{background:#fff;margin:0 auto 12px;box-shadow:0 2px 10px rgba(31,77,61,.22);border-radius:2px}
.rep-preview-page canvas{display:block}
.rep-preview-msg{margin:40px 0;text-align:center;color:#3d5a4d;font-size:16px;font-weight:650}
@media(max-width:480px){.rep-preview-bar{gap:8px;padding-left:10px;padding-right:10px}.rep-preview-bar strong{display:none}.rep-preview-bar .rep-zoom{margin-left:auto}.rep-preview-share{padding:0 14px}}
body.rep-preview-open{overflow:hidden}

/* ---- Reports page on a phone: everything on one screen, no empty gaps (hero on one row, the two downloads side by side, the "ready" buttons in two rows) ---- */
@media (max-width:560px){
  #reports .panel{padding-top:10px;padding-bottom:12px}
  #reports .ins-hero{flex-wrap:nowrap;align-items:center;gap:10px;padding:10px 12px;margin-bottom:0}
  #reports .ins-hero .wh-emblem{width:40px;height:40px}
  #reports .ins-htext small{font-size:10.5px}
  #reports .ins-htext h2{font-size:23px}
  #reports .ins-htext p{font-size:14px;line-height:1.35;margin:2px 0 0}
  #reports #refreshReports{flex:none;margin-left:auto;width:38px;height:38px}
  #reports .rep-step{margin:14px 0 0}
  #reports .rep-step-h{font-size:17px;gap:10px;margin-bottom:4px}
  #reports .rep-step-n{width:28px;height:28px;font-size:14px}
  #reports .rep-step-sub{font-size:14px;line-height:1.4;margin:0 0 8px}
  #reports .rep-download{margin:14px 0 0}
  #reports .rep-dl-card{padding:14px;gap:10px;border-radius:20px}
  #reports .rep-dl-text{flex:1 1 100%}
  #reports .rep-dl-text strong{font-size:18px;margin:0}
  #reports .rep-dl-btns{gap:8px}
  #reports .rep-dl-btn{flex:1 1 calc(50% - 4px);min-height:46px;padding:0 8px;font-size:15px;gap:6px}
  #reports .rep-dl-btn svg{display:none}   /* the words get the room: each label stays on one line */
  #reports .rep-dl-btn{white-space:nowrap}
  #reports .rep-ready .rep-dl-btn{font-size:14px}
  #reports .rep-ready{gap:8px;padding-top:10px}
  #reports .rep-ready-msg{font-size:14px;line-height:1.4}
}