/* JoyFit D1 · Editorial rhythm / home-first visual system.
   Presentation-only changes. No records, auth, routes or business rules altered.
   Canonical colors are declared in vivo.css; this file composes them. */

/* Global rhythm: quiet surfaces, one orange action, clear hierarchy. */
html,body{background:var(--bg)}
body{background-image:none}
.jf-screen{max-width:1320px}
.jf-panel,.card{
  border-color:var(--line);border-radius:20px;
  box-shadow:0 3px 14px rgba(31,42,49,.035);
}
.jf-panel{padding:24px}
.jf-page-header{margin-bottom:14px;min-height:78px}
.jf-page-header .jf-head-text h1{
  font-size:clamp(29px,3vw,40px);letter-spacing:-.045em;line-height:1.11;
}
.jf-head-text p{line-height:1.4}
.jf-eyebrow,.jf-vivo-eyebrow,.jf-vivo-kicker,.jf-fire-eyebrow,.jf-tag{
  letter-spacing:.08em;font-size:10px;
}
.jf-primary{background:var(--action)!important;color:#fff!important;border-color:var(--action)!important;box-shadow:none}
.jf-primary:hover{background:var(--action-hover)!important;box-shadow:0 6px 15px rgba(151,65,30,.15)}
.jf-link{color:var(--action-text)!important}
.jf-section-title h2{font-size:20px}

/* Desktop: one dominant food card + a Joy Fire companion, not two full-width banners. */
.jf-vivo-home{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(288px,.9fr);column-gap:18px;row-gap:18px;align-items:start}
.jf-vivo-home>.jf-page-header{grid-column:1/-1;grid-row:1}
.jf-vivo-home>.jf-vivo-hero{grid-column:1;grid-row:2;min-width:0}
.jf-vivo-home>.jf-fire-home{grid-column:2;grid-row:2;min-width:0;margin-top:0}
.jf-vivo-home>.jf-vivo-home-grid{grid-column:1/-1;grid-row:3;min-width:0;margin-top:1px}
.jf-vivo-hero{
  height:400px;border:1px solid #f1dccc;background:#fff0e6;
  box-shadow:none;overflow:hidden;
}
.jf-vivo-hero:before{background:linear-gradient(90deg,#ffede1 0%,#ffede1 26%,#ffede1ea 43%,#ffede140 69%,transparent 92%)}
.jf-vivo-hero-main{max-width:66%;height:calc(100% - 93px);padding:22px 26px 10px}
.jf-vivo-hero h2{font-size:clamp(23px,1.95vw,29px);margin:7px 0 10px;line-height:1.13}
.jf-vivo-donut{width:108px;height:108px}
.jf-vivo-donut:before{inset:11px}
.jf-vivo-donut strong{font-size:29px}
.jf-vivo-calorie-row{gap:13px}
.jf-vivo-cal-copy strong{font-size:19px}
.jf-vivo-cal-copy button{font-size:12px;min-height:43px}
.jf-vivo-hero-foot{min-height:93px;padding:15px 24px;gap:16px;background:#fffdfaec}
.jf-vivo-macro strong{font-size:11px}

/* Joy Fire: a dark, distinct chapter; the mascot remains the only animated focal object. */
.jf-fire-home{
  min-height:400px;height:400px;grid-template-columns:minmax(0,1fr) 86px;
  gap:8px;padding:24px 21px;background:var(--fire-bg);border:1px solid var(--fire-edge);
  box-shadow:none;align-items:center;color:var(--fire-text);
}
.jf-fire-home:before{display:none}
.jf-fire-copy{max-width:100%}
.jf-fire-eyebrow{color:var(--fire-accent);font-size:10px}
.jf-fire-copy h2,.jf-fire-copy h2 small,.jf-fire-copy>p,.jf-fire-bottom strong,.jf-fire-bottom small,
.jf-fire-visual-caption{color:var(--fire-text)}
.jf-fire-copy h2{font-size:clamp(34px,3vw,51px);letter-spacing:-.055em;margin:8px 0 4px}
.jf-fire-copy h2 small{display:block;font-size:14px;font-weight:650;line-height:1.5;color:#e2e9e7}
.jf-fire-copy>p{font-size:12px;line-height:1.5;color:#d5e0df;margin:7px 0 13px}
.jf-fire-pills{gap:5px}
.jf-fire-pills span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;padding:6px 9px;border-radius:9px;font-size:10px}
.jf-fire-pills .is-done{background:#e1f0e6;border-color:#c5e4d0;color:#286c49}
.jf-fire-bottom{margin-top:11px;gap:5px}
.jf-fire-bottom strong{font-size:11px;color:#fff}
.jf-fire-bottom small{font-size:10px;color:#bbcdd0}
.jf-fire-link{color:var(--fire-accent)!important;text-decoration:none;min-height:36px;font-size:11px}
.jf-fire-link:hover{text-decoration:underline}
.jf-fire-visual{min-width:0;align-self:center}
.jf-fire-visual .jf-fire-svg{width:86px;max-width:100%;filter:drop-shadow(0 7px 10px #e4673766)}
.jf-fire-visual-caption{font-size:9px;white-space:normal;text-align:center;color:#d4dde0}

/* Supporting modules: quieter, paired surfaces. */
.jf-vivo-home-grid{gap:15px}
.jf-vivo-water-card,.jf-vivo-workout-card{min-height:198px;padding:21px}
.jf-vivo-water-card{background:#e7f4f8;border-color:#dbe9ef}
.jf-vivo-workout-card{background:#fff1e5;border-color:#f1e3d8}
.jf-vivo-reward-card{min-height:203px;background:#f4effa;border-color:#e9e3f0}
.jf-vivo-week-card{min-height:203px}
.jf-vivo-card-copy h2{font-size:21px}
.jf-vivo-card-number{font-size:39px}
.jf-vivo-card-copy{gap:5px}
.jf-vivo-water-art{max-height:215px}
.jf-vivo-workout-art{max-height:175px}
.jf-vivo-reward-card h2{font-size:21px}
.jf-vivo-chest-art{max-height:185px}
.jf-vivo-week-card .jf-week-track{height:61px}

/* Bring secondary destinations into the same typography/border system. */
.jf-ranking .jf-rank-hero{border-radius:21px}
.jf-rank-person{border-color:var(--line);background:var(--card);border-radius:14px}
.jf-rank-person.is-you{background:var(--soft);border-color:var(--soft-border)}
.jf-rank-stat,.jf-reward-tile{border-radius:18px}
.jf-rank-categories button.on{background:var(--action)!important;border-color:var(--action);color:#fff!important}
.jf-reward-grid{gap:14px}
.jf-reward-tile{min-height:250px}
.jf-reward-symbol{border-radius:13px}

/* Global controls and navigation remain reachable on touch and keyboard. */
button,a,[role="button"]{ -webkit-tap-highlight-color:transparent }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus-ring)!important;outline-offset:3px;
}
button:disabled{cursor:not-allowed}
:root, :where(body, .jf-screen, .jf-panel){scrollbar-color:var(--scroll-thumb) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:12px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
::-webkit-scrollbar-track{background:var(--bg)}

@media(min-width:960px){
 #nav{width:230px;background:var(--card);border-color:var(--line);padding:29px 14px}
 #nav:before{content:"✹ joyfit";color:var(--action);font-size:28px;padding-bottom:29px}
 #nav:after{color:var(--t2)}
 #nav button{min-height:48px;border-radius:12px;margin-bottom:0;font-size:12px}
 #nav button.on{color:var(--action-text)!important;background:var(--soft)!important;box-shadow:inset 3px 0 0 var(--action)}
 #app{margin-left:230px;padding:25px clamp(24px,3.2vw,48px) 62px}
}
/* Medium desktop: preserve readability rather than squeeze the food hero. */
@media(min-width:960px) and (max-width:1380px){
 .jf-vivo-home{grid-template-columns:minmax(0,1fr)}
 .jf-vivo-home>.jf-vivo-hero{grid-column:1;grid-row:2}
 .jf-vivo-home>.jf-fire-home{grid-column:1;grid-row:3;height:auto;min-height:200px;grid-template-columns:minmax(0,1fr) 126px}
 .jf-vivo-home>.jf-vivo-home-grid{grid-column:1;grid-row:4}
 .jf-fire-copy h2 small{display:inline;font-size:14px}
 .jf-fire-visual .jf-fire-svg{width:106px}
}
@media(max-width:959px){
 #app{max-width:660px;padding:16px 0 calc(108px + env(safe-area-inset-bottom,0px))}
 .jf-screen{padding:0 14px}
 .jf-vivo-home{grid-template-columns:minmax(0,1fr);gap:12px}
 .jf-vivo-home>.jf-page-header{grid-column:1;grid-row:1}
 .jf-vivo-home>.jf-fire-home{grid-column:1;grid-row:2}
 .jf-vivo-home>.jf-vivo-hero{grid-column:1;grid-row:3}
 .jf-vivo-home>.jf-vivo-home-grid{grid-column:1;grid-row:4}
 .jf-page-header{min-height:62px;margin-bottom:3px}
 .jf-page-header .jf-head-text h1{font-size:clamp(25px,6.8vw,33px)}
 .jf-head-text p{font-size:12px}
 .jf-vivo-hero{height:420px;border-radius:20px}
 .jf-vivo-hero-main{max-width:100%;height:calc(100% - 110px);padding:19px 19px 10px}
 .jf-vivo-hero-image{background-size:auto 80%;background-position:right 8px;top:95px}
 .jf-vivo-hero:before{background:linear-gradient(180deg,#ffede1 0%,#ffede1f2 28%,#ffede17a 55%,transparent 85%)}
 .jf-vivo-hero h2{font-size:clamp(22px,5.6vw,28px);max-width:320px;margin:7px 0 8px}
 .jf-vivo-calorie-row{margin-top:15px;gap:12px}
 .jf-vivo-donut{width:92px;height:92px}
 .jf-vivo-donut:before{inset:9px}
 .jf-vivo-donut strong{font-size:25px}
 .jf-vivo-cal-copy strong{font-size:17px}
 .jf-vivo-cal-copy button{min-height:42px;font-size:11px}
 .jf-vivo-hero-foot{min-height:110px;padding:12px 12px;gap:9px}
 .jf-vivo-macro>div{font-size:10px;gap:4px}
 .jf-vivo-home-grid{grid-template-columns:1fr 1fr;gap:11px;margin-top:0}
 .jf-vivo-home-grid>*{grid-column:1/-1}
 .jf-vivo-water-card,.jf-vivo-workout-card{min-height:178px;padding:19px}
 .jf-vivo-reward-card,.jf-vivo-week-card{min-height:186px;padding:19px}
 .jf-vivo-week-card .jf-week-track{height:61px}
 .jf-fire-home{height:auto;min-height:190px;grid-template-columns:minmax(0,1fr) 98px;gap:7px;padding:18px 17px;border-radius:20px}
 .jf-fire-copy h2{font-size:clamp(29px,7.8vw,38px);margin:5px 0 2px}
 .jf-fire-copy h2 small{font-size:12px;display:block}
 .jf-fire-copy>p{font-size:11px;margin:5px 0 10px}
 .jf-fire-pills span{padding:5px 7px;font-size:10px}
 .jf-fire-bottom{margin-top:8px}
 .jf-fire-bottom strong{font-size:10px}
 .jf-fire-bottom small{font-size:9px}
 .jf-fire-visual .jf-fire-svg{width:94px}
 .jf-fire-visual-caption{display:none}
 .jf-fire-link{min-height:35px;margin-top:4px}
 .jf-reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #nav{background:var(--card);border-color:var(--line);box-shadow:0 -4px 18px rgba(31,42,49,.08);padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))}
 #nav button{min-height:48px}
}
@media(max-width:430px){
 .jf-screen{padding:0 12px}
 .jf-panel{border-radius:18px}
 .jf-fire-home{grid-template-columns:minmax(0,1fr) 78px;padding:16px 13px;gap:4px}
 .jf-fire-visual .jf-fire-svg{width:78px}
 .jf-fire-pills{gap:4px}
 .jf-fire-pills span{font-size:9px;padding:5px 6px}
 .jf-vivo-hero{height:405px}
 .jf-vivo-hero-main{height:calc(100% - 116px)}
 .jf-vivo-hero h2{font-size:23px}
 .jf-vivo-water-card,.jf-vivo-workout-card{min-height:180px}
 .jf-reward-grid{grid-template-columns:1fr}
}
@media(max-width:350px){
 .jf-fire-home{grid-template-columns:minmax(0,1fr) 65px}
 .jf-fire-visual .jf-fire-svg{width:64px}
 .jf-vivo-calorie-row{gap:7px}
 .jf-vivo-cal-copy strong{font-size:15px}
 .jf-vivo-cal-copy button{font-size:10px;padding:9px}
 .jf-vivo-hero h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 .jf-fire-svg,.jf-fire-motion,.jf-fire-spark,.jf-screen{animation:none!important}
}
:root[data-theme=dark] .jf-vivo-hero,:root[data-theme=dark] .jf-vivo-water-card,:root[data-theme=dark] .jf-vivo-workout-card,:root[data-theme=dark] .jf-vivo-reward-card{color:#29313A}
:root[data-theme=dark] .jf-fire-home{background:#1c3540;border-color:#46606a}
:root[data-theme=dark] .jf-rank-person{background:var(--card)}
:root[data-theme=dark] .jf-rank-person.is-you{background:var(--soft)}
/* Dark appearance: preserve the existing intentional dark illustrations, but
   keep diagnostic text and affordances readable on those surfaces. */
:root[data-theme=dark] .jf-fire-home .jf-fire-copy>p{color:#dde8e9!important}
:root[data-theme=dark] .jf-fire-home .jf-fire-bottom small{color:#cbd8da!important}
:root[data-theme=dark] .jf-vivo-hero .jf-vivo-macro>div{color:#f6ded2!important}
:root[data-theme=dark] .jf-vivo-water-card .jf-stat-link{color:#a7e5ff!important}
:root[data-theme=dark] .jf-vivo-reward-card .jf-link{color:#e0c3fb!important}