/* Leaf skin (shared by Aroha Journey and Kai Pai) – light by default over a photo backdrop (sunset lake, ngahere bokeh or the kai bowl), with a translucent forest-glass banner.
   Applies while Appearance › Look is on the app's own look (html[data-skin=leaf]); photos follow Appearance › Texture (kp-sunset / kp-ngahere / kp-kai).
   Palette: forest #03150f · green #4df28c · lime #d9ff4f · teal #10d8bd · cream #f6faf5 */
:root{--kp-forest:#03150f;--kp-green:#4df28c;--kp-lime:#d9ff4f;--kp-teal:#10d8bd;--kp-cream:#f6faf5;
  --kp-grad:linear-gradient(100deg,#caff69,#2cf2a4);--kp-bar:linear-gradient(180deg,var(--kp-lime),var(--kp-green) 55%,var(--kp-teal));
  --kp-glass:rgba(3,21,15,.56);--kp-glass-nav:rgba(3,21,15,.86);--kp-glass-line:rgba(246,250,245,.12)}
/* App wordmark in the banner (Kai Pai) – sized whatever Look is picked, not just the app's own look */
.brand:has(.wm){display:flex;align-items:center}
.brand .wm{height:26px;width:auto;max-width:46vw;display:block}
.brand:has(.wm) small{display:none}
@media (min-width:1080px){.brand .wm{height:30px}}
html[data-skin=leaf]{--radius:18px}
html[data-skin=leaf] body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:-.05px}

/* ---------- photo backdrops (fixed, behind everything) ---------- */
html[data-texture^=kp-]{background:var(--kp-forest)}
html[data-texture^=kp-] body{background:transparent!important}
html[data-texture^=kp-] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--kp-shade),var(--kp-photo) var(--kp-pos,center top)/cover no-repeat,var(--kp-forest)}
html[data-texture=kp-sunset]{--kp-photo:url(bg-sunset.jpg);--kp-pos:center 40%}
html[data-texture=kp-ngahere]{--kp-photo:url(bg-ngahere.jpg)}
html[data-texture=kp-kai]{--kp-photo:url(bg-kai.jpg);--kp-pos:center 60%}
@media (min-width:760px){html[data-texture=kp-sunset]{--kp-photo:url(bg-sunset-wide.jpg);--kp-pos:center 30%}html[data-texture=kp-ngahere]{--kp-photo:url(bg-ngahere-wide.jpg)}}
/* light: the photo shows strongly under the banner and title, then softens so cards read cleanly */
html[data-theme=light][data-texture^=kp-]{--kp-shade:linear-gradient(180deg,rgba(3,21,15,.28) 0,rgba(3,21,15,.06) 180px,rgba(3,21,15,0) 50%,rgba(3,21,15,.12) 100%)}   /* the photo as it is – no white wash; the frosted cards carry the text */
html[data-theme=dark][data-texture^=kp-]{--kp-shade:linear-gradient(180deg,rgba(3,21,15,.25) 0,rgba(3,21,15,.5) 240px,rgba(3,21,15,.84) 70%,rgba(3,21,15,.92) 100%)}
.tx-kp-sunset{background:url(bg-sunset.jpg) center 30%/cover}
.tx-kp-ngahere{background:url(bg-ngahere.jpg) center/cover}
.tx-kp-kai{background:url(bg-kai.jpg) center/cover}
.tx-kp-sunset .tname,.tx-kp-ngahere .tname,.tx-kp-kai .tname{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* text that sits straight on the photo */
html[data-texture^=kp-] .hello,html[data-texture^=kp-] .pagehead{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
html[data-texture^=kp-] .hello .tiny{color:var(--kp-lime)!important;text-shadow:0 1px 8px rgba(0,0,0,.5)}
html[data-texture^=kp-] .pagehead .backhome{color:#fff!important;background:rgba(3,21,15,.5)!important;border-color:rgba(246,250,245,.28)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-texture^=kp-] .pagehead .backhome .ic,html[data-texture^=kp-] .pagehead .backhome svg{color:#fff}
html[data-texture^=kp-] .hub h2{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(3,21,15,.55);color:var(--kp-green)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-texture^=kp-] .foot{background:rgba(255,255,255,.6);border-radius:12px;padding:8px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-theme=dark][data-texture^=kp-] .foot{background:rgba(3,21,15,.6)}

/* ---------- the banner: translucent forest glass, as in the concept ---------- */
html[data-skin=leaf] .top{background:var(--kp-glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--kp-glass-line);
  --text:var(--kp-cream);--muted:#bdd0c5;--line:rgba(246,250,245,.18);color:var(--kp-cream)}
html[data-skin=leaf] .top .blogo{width:30px;height:auto;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 10px #4df28c55)}
html[data-skin=leaf] .brand{display:flex;align-items:center}
html[data-skin=leaf] .brand .wm{height:26px;width:auto;display:block}
html[data-skin=leaf] .brand small{display:none}
html[data-skin=leaf] .top .sync{color:#bdd0c5}
html[data-skin=leaf] .top .iconbtn{border:1.5px solid var(--kp-green);border-radius:999px;color:#fff;background:rgba(3,21,15,.35);box-shadow:0 0 14px #4df28c33}
html[data-skin=leaf] .top .chip,html[data-skin=leaf][data-theme] .top .chips .chip{background:rgba(246,250,245,.08);border-color:rgba(246,250,245,.2);color:var(--kp-cream)}
html[data-skin=leaf] .top .chip.on,html[data-skin=leaf][data-theme] .top .chips .chip.on{border-color:var(--kp-green);background:rgba(77,242,140,.16);box-shadow:0 0 12px #4df28c33}
/* phone tab bar: same glass */
html[data-skin=leaf] .tabs{background:var(--kp-glass-nav);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--kp-glass-line)}
html[data-skin=leaf] .tabs button{color:rgba(246,250,245,.72)}
html[data-skin=leaf] .tabs button.on{color:var(--kp-green)}
html[data-skin=leaf] .tabs button.on svg{filter:drop-shadow(0 0 6px #4df28c88)}
@media (min-width:1080px){
  html[data-skin=leaf] .tabs{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
  html[data-skin=leaf] .tabs button{background:none!important;border-radius:0;color:rgba(246,250,245,.85);font-weight:500;padding:0 16px;height:40px}
  html[data-skin=leaf] .tabs button svg{display:none}
  html[data-skin=leaf] .tabs button:hover{color:#fff}
  html[data-skin=leaf] .tabs button.on{color:var(--kp-green);box-shadow:inset 0 -2px 0 var(--kp-green);font-weight:600}
  html[data-skin=leaf] .brand .wm{height:30px}
  html[data-skin=leaf] .top .blogo{width:34px}
}

/* ---------- light (default) ---------- */
html[data-skin=leaf][data-theme=light]{--line:#d3e6da;--line-hi:#bcd9c7;--pline:#d8eadf}
html[data-skin=leaf][data-theme=light] .card,html[data-skin=leaf][data-theme=light] .ht{background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-color:rgba(211,230,218,.9);box-shadow:0 8px 28px rgba(3,21,15,.10)}
html[data-skin=leaf][data-theme=light] .stat,html[data-skin=leaf][data-theme=light] .day{background:rgba(241,248,243,.8)}
html[data-skin=leaf][data-theme=light] .subnav button,html[data-skin=leaf][data-theme=light] .chips .chip,html[data-skin=leaf][data-theme=light] .weeks .btn:not(.primary){background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html[data-skin=leaf][data-theme=light] .chip.on{border-color:#12924f;background:rgba(18,146,79,.10)}
html[data-skin=leaf][data-theme=light] .ht:hover{border-color:#12924f}

/* ---------- dark ---------- */
html[data-skin=leaf][data-theme=dark]{--line:#1b4231;--line-hi:#27583f;--pline:#1f4c37;--card-muted:#a9c2b3;--panel-muted:#a9c2b3;--bg-muted:#a9c2b3;--input:#03150f}
html[data-skin=leaf][data-theme=dark] .card,html[data-skin=leaf][data-theme=dark] .ht,html[data-skin=leaf][data-theme=dark] dialog{background:linear-gradient(145deg,rgba(10,42,29,.86),rgba(4,23,15,.88));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:#1e4a35;box-shadow:0 10px 30px rgba(0,0,0,.3)}
html[data-skin=leaf][data-theme=dark] dialog{background:linear-gradient(145deg,#0a2a1d,#04170f)}
html[data-skin=leaf][data-theme=dark] .stat,html[data-skin=leaf][data-theme=dark] .day{background:rgba(13,51,36,.55);border-color:#1f4c37}
html[data-skin=leaf][data-theme=dark] .ht:hover{border-color:#36df8a;box-shadow:0 0 0 1px #36df8a33,0 0 22px #31f38b1f}
html[data-skin=leaf][data-theme=dark] .chip,html[data-skin=leaf][data-theme=dark] .subnav button,html[data-skin=leaf][data-theme=dark] .btn:not(.primary):not(.danger){background:rgba(10,42,29,.8);border-color:#21503a}
html[data-skin=leaf][data-theme=dark] .in{background:#031a12;border-color:#21503a}
html[data-skin=leaf][data-theme=dark] .in:focus{border-color:var(--kp-green);box-shadow:0 0 0 3px #4df28c26}

/* ---------- both modes ---------- */
html[data-skin=leaf] .card{border-radius:var(--radius)}
html[data-skin=leaf] .card h2{border-left:0;padding-left:14px;position:relative;letter-spacing:-.3px}
html[data-skin=leaf] .card h2::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:4px;background:var(--kp-bar)}
html[data-skin=leaf] .btn{border-radius:999px}
html[data-skin=leaf] .btn.primary,html[data-skin=leaf] .subnav button.on,html[data-skin=leaf] .weeks .btn.primary{background:var(--kp-grad);border-color:transparent;color:#052016;font-weight:700;box-shadow:0 6px 22px #2cf2a42e}
html[data-skin=leaf] .subnav button.on .ic{color:#052016}
html[data-skin=leaf] .btn.primary:hover{filter:brightness(1.05);box-shadow:0 8px 28px #2cf2a445}
html[data-skin=leaf] .hi{border-radius:50%;border:1px solid color-mix(in srgb,var(--g) 70%,transparent);background:color-mix(in srgb,var(--g) 10%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--g) 16%,transparent)}
html[data-skin=leaf] .g-day .ht,html[data-skin=leaf] .g-food .ht{--g:#16a35a}
html[data-skin=leaf] .g-prog .ht{--g:#0ea89a}
html[data-skin=leaf] .g-learn .ht{--g:#6aa313}
html[data-skin=leaf][data-theme=dark] .g-day .ht,html[data-skin=leaf][data-theme=dark] .g-food .ht{--g:var(--kp-green)}
html[data-skin=leaf][data-theme=dark] .g-prog .ht{--g:var(--kp-teal)}
html[data-skin=leaf][data-theme=dark] .g-learn .ht{--g:#b8f25a}
html[data-skin=leaf] .hub h2{letter-spacing:3px;font-size:11px}
html[data-skin=leaf] .hello h1,html[data-skin=leaf] .pagehead h1{letter-spacing:-1px;font-weight:800}
html[data-skin=leaf] .hello .tiny{text-transform:uppercase;letter-spacing:3px;font-weight:700}

/* ---------- splash: the concept's sunset screen ---------- */
#splash.kp{background:linear-gradient(180deg,rgba(3,21,15,.6) 0,rgba(3,21,15,.28) 36%,rgba(3,21,15,0) 58%,rgba(3,21,15,.3) 100%),url(bg-sunset.jpg) center/cover,#03150f;gap:0;justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 15vh)}
#splash.kp .sp-k{width:min(26vw,118px);height:auto;filter:drop-shadow(0 0 30px #2cf2a455);animation:spIn .9s ease both}
#splash.kp .sp-wm{width:min(64vw,300px);height:auto;margin-top:18px;animation:spIn .9s .15s ease both}
#splash.kp .sp-tag{margin-top:16px;font:600 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:4px;color:var(--kp-cream);text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6);animation:spIn .9s .3s ease both}
#splash.kp .sp-tag b{color:var(--kp-green);padding:0 8px}
#splash.kp .sp-sub{margin-top:40px;font:400 19px/1.5 Inter,system-ui,sans-serif;color:#fff;font-weight:500;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 18px rgba(0,0,0,.75);animation:spIn .9s .45s ease both}
@media (prefers-reduced-motion:reduce){#splash.kp *{animation:none!important}}

/* ---------- brand text in the banner when there's no wordmark image (Aroha Journey) ---------- */
html[data-skin=leaf] .brand:not(:has(.wm)){font-weight:800;font-size:19px;letter-spacing:-.5px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
html[data-skin=leaf] .top .blogo.lg-light{display:none!important}
html[data-skin=leaf] .top .blogo.lg-dark{display:block!important;border-radius:9px;box-shadow:0 0 14px #4df28c33}
@media (min-width:1080px){html[data-skin=leaf] .brand:not(:has(.wm)){font-size:22px}}
/* ---------- Aroha Journey splash: the branding phone screen – gold heart, wordmark and YOURSELF • YOUR HEALTH • YOUR JOURNEY over the sunset ---------- */
#splash.leaf{background:linear-gradient(180deg,rgba(3,21,15,.6) 0,rgba(3,21,15,.28) 36%,rgba(3,21,15,0) 58%,rgba(3,21,15,.3) 100%),url(bg-sunset.jpg) center/cover,#03150f;   /* same backdrop and position as the Kai Pai splash */justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 19vh);gap:0}
#splash.leaf .sp-heart{width:min(32vw,140px);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));animation:spIn .9s ease both}
#splash.leaf .sp-word{width:min(82vw,360px,calc(100vw - 40px));height:auto;margin-top:12px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));animation:spIn .9s .15s ease both}
#splash.leaf .sp-tile{display:none}
#splash.leaf .sp-tag{max-width:calc(100vw - 24px);overflow:hidden;margin-top:18px;font:500 clamp(10px,2.9vw,13px)/1.4 Inter,system-ui,sans-serif;letter-spacing:clamp(1.5px,.6vw,4.5px);white-space:nowrap;color:#f6faf5;text-shadow:0 1px 8px rgba(0,0,0,.5);animation:spIn .9s .3s ease both}
#splash.leaf .sp-tag b{font-weight:400;padding:0 clamp(5px,1.6vw,10px);color:#d8b25a}

/* the banner logo and name replay the splash */
.top .blogo,.top .brand{cursor:pointer}

/* laptops: a soft dark pool behind the name and tagline so the gold reads on the brighter wide sky (phones are fine without it) */
@media (min-width:760px){#splash.leaf{background:radial-gradient(min(80vw,600px) 120px at 50% calc(env(safe-area-inset-top) + 19vh + min(29.5vw,129px) + 52px),rgba(3,21,15,.62) 0,rgba(3,21,15,.38) 45%,rgba(3,21,15,0) 100%),linear-gradient(180deg,rgba(3,21,15,.6) 0,rgba(3,21,15,.28) 36%,rgba(3,21,15,0) 58%,rgba(3,21,15,.3) 100%),url(bg-sunset.jpg) center/cover,#03150f}}