/* Jure's Back member app. Base: the member-zone prototype (app-prototype.html), homepage design tokens. */
:root{
  --cream:#F4F0E4; --paper:#FBF9F3; --forest:#173A2B; --forest-2:#1F4B37;
  --sage:#DCE6CC; --sage-2:#C9DAB4; --sage-ink:#7E9B68; --lime:#D4EB6C; --lime-deep:#BFD94F;
  --lavender:#D7C8F2; --ink:#15241C; --ink-soft:#4A5A51; --line:#E1DACB; --white:#FFFFFF;
  --font:"neulis-sans","Neulis Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:32px; --r-md:24px; --r-sm:16px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1); --sab:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{color:var(--forest);font-weight:600;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(28px,7vw,36px)}
h2{font-size:22px;letter-spacing:-.01em}
h3{font-size:17px;letter-spacing:-.005em}
p{text-wrap:pretty}
.muted{color:var(--ink-soft)}
.small{font-size:14px}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:8px}

.app{max-width:560px;margin:0 auto;padding:20px 20px calc(110px + var(--sab))}
.screen{display:none}
.screen.on{display:block;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.top img{height:22px;width:auto}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--forest);color:var(--paper);display:grid;place-items:center;font-weight:700;font-size:14px;text-decoration:none}

/* building blocks */
.card{background:var(--paper);border-radius:var(--r-md);padding:20px}
.card + .card,.stack > * + *{margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:5px 12px;border-radius:var(--r-pill);background:var(--sage);color:var(--forest)}
.chip.lav{background:var(--lavender)}
.chip.lime{background:var(--lime)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;padding:14px 24px;border-radius:var(--r-pill);border:2px solid transparent;font:700 16px/1.2 var(--font);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--lime);color:var(--forest)}
.btn-primary:hover{background:var(--lime-deep)}
.btn-dark{background:var(--forest);color:var(--paper)}
.btn-dark:hover{background:var(--forest-2)}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:var(--paper)}
.btn:active{transform:scale(.98)}
.link{font-weight:700;color:var(--forest)}
input[type=email],input[type=text],input[type=number],input[type=search],textarea{width:100%;font:16px var(--font);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 18px}
input:focus,textarea:focus{outline:2px solid var(--forest);outline-offset:0;border-color:transparent}
.bar{height:8px;background:var(--sage);border-radius:var(--r-pill);overflow:hidden}
.bar i{display:block;height:100%;background:var(--forest);border-radius:inherit}
.row{display:flex;align-items:center;gap:12px}
.row .grow{flex:1;min-width:0}
.ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.ico svg{width:18px;height:18px}

/* login */
.login{min-height:calc(100vh - 140px);display:flex;flex-direction:column;justify-content:center;text-align:center;gap:18px}
.login .top{justify-content:center;margin-bottom:12px}
.login .top img{height:28px}
.login form{display:grid;gap:12px;text-align:left;margin-top:6px}
.sent-ico{width:72px;height:72px;margin:0 auto;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.sent-ico svg{width:30px;height:30px;color:var(--forest)}

/* today */
.hello{font-size:15px;color:var(--ink-soft);margin-bottom:4px}
.dayline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.streak{font-size:14px;font-weight:600;color:var(--forest)}
.hero-lesson{background:var(--forest);color:var(--paper);border-radius:var(--r-lg);overflow:hidden;margin-top:22px}
.hero-lesson .media{display:block;position:relative;aspect-ratio:16/10;background:#0f241a center/cover}
.hero-lesson .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,36,27,.75),rgba(15,36,27,0) 60%)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--forest);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.play svg{width:26px;height:26px;margin-left:3px}
.hero-lesson .media .chip{position:absolute;left:16px;bottom:14px;z-index:2}
.hero-lesson .body{padding:20px 20px 22px}
.hero-lesson h2{color:var(--paper);margin:2px 0 6px}
.hero-lesson p{color:rgba(251,249,243,.75);font-size:15px;margin-bottom:16px}
.next{display:flex;gap:12px;align-items:center;font-size:14.5px}
.next .ico{background:var(--sage)}
.prompt{background:var(--lavender)}
.prompt .ico{background:var(--paper)}
.aid{background:var(--sage)}
.aid .ico{background:var(--paper)}
a.card{display:block;text-decoration:none;transition:transform .2s var(--ease)}
a.card:hover{transform:translateY(-2px)}
.arrow{width:20px;height:20px;color:var(--forest);flex:none}

/* path */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0 8px}
.phase{background:var(--paper);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;line-height:1.3}
.phase b{display:block;color:var(--forest);font-size:14px}
.phase.on{background:var(--forest);color:rgba(251,249,243,.75)}
.phase.on b{color:var(--paper)}
.days{list-style:none;margin-top:16px;display:grid;gap:8px}
.day{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:var(--r-sm);padding:12px 14px;text-decoration:none}
.day .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;background:var(--sage);color:var(--forest)}
.day .t{flex:1;min-width:0}
.day .t b{display:block;font-weight:600;color:var(--forest);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day .t span{font-size:13px;color:var(--ink-soft)}
.day.done .n{background:var(--forest);color:var(--lime)}
.day.today{background:var(--lime)}
.day.today .n{background:var(--forest);color:var(--lime)}
.day.locked{opacity:.6}
.day.locked .n{background:transparent;border:1.5px dashed var(--sage-ink);color:var(--ink-soft)}
.day svg{width:18px;height:18px;color:var(--forest);flex:none}
.more{text-align:center;font-size:14px;color:var(--ink-soft);padding:10px}

/* lesson */
.back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;text-decoration:none;color:var(--forest);margin-bottom:16px}
.back svg{width:18px;height:18px}
.player{border-radius:var(--r-md);overflow:hidden;background:#0f241a;aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:cover}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
.points{list-style:none;display:grid;gap:10px;margin-top:12px}
.points li{display:flex;gap:10px;font-size:15px}
.points li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sage-ink);margin-top:8px}
.note{border-left:4px solid var(--lavender);padding:4px 0 4px 16px;font-size:15px;color:var(--ink-soft)}
.note b{color:var(--forest)}
.donebox{background:var(--sage);border-radius:var(--r-md);padding:18px;text-align:center;display:none}
.donebox.on{display:block}
.donebox b{display:block;color:var(--forest);font-size:18px;margin-bottom:4px}

/* check-in */
.q{margin-top:22px}
.q h3{margin-bottom:10px}
.scale{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.scale button{aspect-ratio:1;border:0;border-radius:10px;background:var(--paper);font:700 14px var(--font);color:var(--forest);cursor:pointer}
.scale button.on{background:var(--forest);color:var(--lime)}
.scale-legend{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-pill);padding:9px 14px;font:600 14px var(--font);color:var(--forest);cursor:pointer}
.chips button.on{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.flag{margin-top:22px;font-size:13.5px;color:var(--ink-soft);background:var(--paper);border-radius:var(--r-sm);padding:14px 16px}
.flag b{color:#8A2B1E}
.trend{display:flex;align-items:flex-end;gap:10px;height:90px;margin:18px 0 6px}
.trend i{flex:1;background:var(--sage-2);border-radius:8px 8px 4px 4px}
.trend i.now{background:var(--forest)}
.trend-x{display:flex;gap:10px;font-size:12px;color:var(--ink-soft)}
.trend-x span{flex:1;text-align:center}

/* first aid */
.aid-list{display:grid;gap:12px;margin-top:18px}
.aid-item{display:flex;gap:14px;align-items:center;background:var(--paper);border-radius:var(--r-md);padding:12px;text-decoration:none}
.aid-item .th{width:84px;height:64px;border-radius:14px;background:var(--sage) center/cover;flex:none;position:relative}
.aid-item .th svg{position:absolute;inset:0;margin:auto;width:26px;height:26px;color:var(--paper);filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

/* account */
.kv{display:grid;gap:2px}
.kv span{font-size:13px;color:var(--ink-soft)}
.kv b{font-weight:600;color:var(--forest)}
.plan{background:var(--forest);color:var(--paper)}
.plan h2{color:var(--paper)}
.plan .muted{color:rgba(251,249,243,.7)}
.plan .btn-primary{margin-top:16px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.setting:first-of-type{border-top:0;padding-top:4px}
.toggle{width:50px;height:30px;border-radius:var(--r-pill);background:var(--forest);position:relative;flex:none;border:0;cursor:pointer}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:var(--lime);transition:.2s}
.toggle.off{background:var(--sage-2)}
.toggle.off::after{right:23px;background:var(--paper)}
.seg{display:inline-flex;background:var(--sage);border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:transparent;border-radius:var(--r-pill);padding:6px 12px;font:600 13px var(--font);color:var(--forest);cursor:pointer}
.seg button.on{background:var(--paper)}

/* bottom tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(251,249,243,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 8px calc(8px + var(--sab))}
.tabs ul{list-style:none;max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:14px;font-size:12px;font-weight:600;color:var(--ink-soft);text-decoration:none}
.tabs a svg{width:22px;height:22px}
.tabs a.on{color:var(--forest);background:var(--sage)}
body.no-tabs .tabs{display:none}

/* ===== member app additions (beyond the prototype) ===== */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.forest{color:var(--forest)}
.eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sage-ink);margin-bottom:2px}
.err{color:#8A2B1E;font-size:14px;font-weight:600;margin-top:4px}
.dev{background:var(--lavender);border-radius:var(--r-sm);padding:14px 16px;font-size:14px;text-align:left;word-break:break-all}
.saved{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:600;color:var(--forest)}
.saved svg{width:18px;height:18px}
.top > a:first-child{display:block}
.arrow svg{width:20px;height:20px}
.ico{background:var(--sage)}
.ico svg{color:var(--forest)}
fieldset{border:0;min-width:0}
.qh{display:block;font-size:17px;font-weight:600;color:var(--forest);letter-spacing:-.005em;margin-bottom:10px}
.field{display:grid;gap:8px;margin-top:18px}
.field span{font-weight:600;color:var(--forest)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--forest)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--forest);text-decoration:underline;cursor:pointer}

/* first login: pattern choice */
.patterns{display:grid;gap:8px;margin-top:20px}
.pattern-opt{display:block;cursor:pointer}
.pattern-opt input{position:absolute;opacity:0;pointer-events:none}
.pattern-opt span{display:block;background:var(--paper);border:2px solid transparent;border-radius:var(--r-sm);padding:12px 16px}
.pattern-opt b{display:block;color:var(--forest);font-weight:600}
.pattern-opt small{font-size:13px;color:var(--ink-soft)}
.pattern-opt input:checked + span{border-color:var(--forest);background:var(--sage)}
.pattern-opt input:focus-visible + span{outline:3px solid var(--forest);outline-offset:2px}
.startform .btn{margin-top:22px}

/* today: "Understand your back" card */
.why{background:var(--paper)}
.card.why,.card.aid,.card.prompt{gap:14px}
.th{width:84px;height:64px;border-radius:14px;background:var(--sage) center/cover;flex:none;position:relative}
.th svg{position:absolute;inset:0;margin:auto;width:26px;height:26px;color:var(--paper);filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

/* lesson: player, steps */
.player.soon{display:grid;place-items:center;background:var(--forest);color:var(--paper);text-align:center;padding:20px}
.soon-in{display:grid;justify-items:center;gap:6px}
.soon-in .play{position:static;transform:none;width:60px;height:60px;margin-bottom:6px}
.soon-in b{font-size:17px}
.soon-in span:not(.play):not(.chip){font-size:14px;color:rgba(251,249,243,.7)}
.player iframe{width:100%;height:100%;border:0;display:block}
.player:not(.soon){margin-inline:auto}
.player-ai{margin-top:8px}
.playing{margin-top:14px}
.playing h2{margin-top:2px}
.dose{font-weight:700;color:var(--forest);margin-top:4px}
.part{margin-top:26px}
.part-h{font-size:18px}
.part > .small{margin-top:4px}
.steps{list-style:none;display:grid;gap:8px;margin-top:12px}
.step{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:var(--r-sm);padding:12px 14px;text-decoration:none;border:2px solid transparent}
.step .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;background:var(--sage);color:var(--forest)}
.step .t{flex:1;min-width:0}
.step .t b{display:block;font-weight:600;color:var(--forest);font-size:15px}
.step .t span{font-size:13.5px;color:var(--ink-soft)}
.step svg{width:16px;height:16px;color:var(--forest);flex:none}
.step.on{border-color:var(--forest)}
.step.on .n{background:var(--forest);color:var(--lime)}
.walk{margin-top:14px}
.aid-item.locked{opacity:.7}
.donebox span{display:block}

/* check-in: 0-10 scale and chips as real form inputs */
.scale label{display:block;cursor:pointer}
.scale input,.chips input{position:absolute;opacity:0;pointer-events:none}
.scale span{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:var(--paper);font:700 14px var(--font);color:var(--forest)}
.scale input:checked + span{background:var(--forest);color:var(--lime)}
.scale input:focus-visible + span,.chips input:focus-visible + span{outline:3px solid var(--forest);outline-offset:2px}
.chips label{cursor:pointer}
.chips span{display:inline-block;border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-pill);padding:9px 14px;font:600 14px var(--font);color:var(--forest)}
.chips input:checked + span{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.flag p{margin:0}
.flag .check{margin-top:12px;color:var(--ink)}
.trend i{position:relative}
.trend i span{position:absolute;top:-20px;left:0;right:0;text-align:center;font-size:12px;font-weight:700;color:var(--forest);font-style:normal}
.alert{background:#F6DCD5;margin-bottom:20px}
.alert .ico{background:var(--paper);margin-bottom:10px}
.alert .ico svg{color:#8A2B1E}
.alert h2{color:#8A2B1E}
.alert p{margin-top:6px}

/* account */
.kv-row{display:flex;align-items:flex-end;gap:12px}
.kv-row .grow{display:grid;gap:2px}
.setting{width:100%}
form.setting:first-child{border-top:0;padding-top:4px}
.tabs a svg{width:22px;height:22px}
.trend i,.trend-x span{flex:0 0 56px}
.kv + .kv{margin-top:12px}

/* team admin (/admin): wider pages, tables */
.app.wide{max-width:1100px}
.btn-sm{width:auto;min-height:40px;padding:8px 18px;font-size:14px}
.plain{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.admin-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:22px 0 14px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-pill);padding:7px 14px;font-size:14px;font-weight:600;color:var(--forest);text-decoration:none}
.fchip.on{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.admin-bar .search{display:flex;gap:8px;align-items:center}
.admin-bar input[type=search]{width:240px;padding:10px 14px}
.tbl-wrap{overflow-x:auto;margin-top:10px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sage-ink);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.flagged td{background:#FBEDE9}
.tbl td.txt{max-width:320px;overflow-wrap:anywhere}
.chip.warn{background:#F6DCD5;color:#8A2B1E}
.chip.st-ended,.chip.st-none{background:var(--line);color:var(--ink-soft)}
.chip.st-team{background:var(--lavender)}
.admin-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px;align-items:end}
.admin-form .check{display:flex;gap:8px;align-items:center;margin-top:16px;grid-column:1/-1;font-size:15px}
.admin-form > .btn{grid-column:1/-1;justify-self:start;margin-top:16px}
.days{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.days span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--line);color:var(--ink-soft)}
.days .done{background:var(--forest);color:var(--paper)}
.days .open{background:transparent;border:1.5px solid var(--forest);color:var(--forest)}
@media (max-width:640px){.admin-bar .search{width:100%}.admin-bar input[type=search]{flex:1;width:auto}}