/* Journal 3.2 shell + pages (mockup journal-3.2). Uses the shared tokens from ef-design.css. */
.j-app{min-height:100vh}
.j-shell{display:block}
.j-side{display:none}
.j-main{min-width:0;flex:1}
.j-wrap{max-width:1600px;margin:0 auto;padding:1rem 1rem 6rem}
.j-mtop{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.5rem;height:3.5rem;padding:0 1rem;border-bottom:1px solid rgb(var(--ef-border));background:rgb(var(--ef-bg)/.96);backdrop-filter:blur(6px)}
.j-av{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;flex-shrink:0;border-radius:9999px;background:var(--ef-brand-600,#15862C);color:#fff;font:700 .8125rem/1 var(--ef-font);text-decoration:none}
.j-av.is-va{background:#0284C7}
.j-upd{display:inline-flex;align-items:center;border-radius:.5rem;background:var(--ef-brand-600,#15862C);color:#fff!important;padding:.3125rem .625rem;font:600 .75rem/1rem var(--ef-font);text-decoration:none}
.j-upd:hover{filter:brightness(1.1)}
.j-bnav{display:flex}
.j-bnav .is-disabled,.j-more .is-disabled{opacity:.4;pointer-events:none}
.j-more{display:flex;flex-direction:column;gap:.125rem}
.j-more a,.j-more button{display:flex;align-items:center;gap:.75rem;width:100%;border:0;background:none;border-radius:.625rem;padding:.75rem .625rem;font:500 .9375rem/1.25rem var(--ef-font);color:rgb(var(--ef-text));text-decoration:none;text-align:left;cursor:pointer}
.j-more a:hover,.j-more button:hover{background:rgb(var(--ef-hover))}
.j-more .is-danger{color:rgb(var(--c-loss-400))}
.j-more-theme{margin-top:.75rem;padding:.75rem .625rem 0;border-top:1px solid rgb(var(--ef-border))}
.j-more-theme p{margin:0 0 .5rem;font:600 .6875rem/1 var(--ef-font);letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--ef-muted))}
.ef-sheet .j-ver{margin:.75rem .625rem 0}
.ef-sheet .j-legal{margin:.75rem .625rem 0}
.j-ver{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;color:rgb(var(--ef-muted))}
.j-ok{font-size:.6875rem;color:rgb(var(--ef-brand-text))}
.j-legal{display:flex;flex-wrap:wrap;gap:.25rem .75rem;font-size:.6875rem}
.j-legal a{color:rgb(var(--ef-muted));text-decoration:none}.j-legal a:hover{color:rgb(var(--ef-text))}
@media (min-width:1024px){
  .j-shell{display:flex;min-height:100vh}
  .j-mtop,.j-bnav{display:none}
  .j-wrap{padding:1.25rem 1.75rem 1.5rem}
  .j-side{position:sticky;top:0;display:flex;flex-direction:column;width:15.5rem;flex-shrink:0;height:100vh;overflow-y:auto;padding:1.25rem .875rem 1rem;background:#0B0D0F;color:#D1D5DB;border-right:1px solid rgb(255 255 255/.08)}
  .j-side-logo{display:block;padding:0 .5rem}
  .j-side-logo img{display:block;height:2.75rem;width:auto}
  .j-back{display:block;margin:.75rem .5rem 1rem;font-size:.75rem;color:#9CA3AF;text-decoration:none}
  .j-back:hover{color:#fff}
  .j-nav{display:flex;flex-direction:column;gap:.125rem}
  .j-nav a,.j-nav button{display:flex;align-items:center;gap:.75rem;width:100%;border:0;background:none;border-radius:.625rem;padding:.625rem .75rem;font:500 .875rem/1.25rem var(--ef-font);color:#9CA3AF;text-decoration:none;text-align:left;cursor:pointer}
  .j-nav a span,.j-nav button span{flex:1}
  .j-nav a:hover,.j-nav button:hover{background:rgb(255 255 255/.05);color:#fff}
  .j-nav a.is-active{background:rgb(28 166 56/.15);color:#3CC165}
  .j-nav a.is-disabled{opacity:.4;pointer-events:none}
  .j-nav em{font-style:normal;border-radius:.25rem;background:rgb(255 255 255/.1);padding:.125rem .375rem;font-size:.625rem;font-weight:600;color:#6B7280}
  .j-nav hr{border:0;border-top:1px solid rgb(255 255 255/.08);margin:.5rem .25rem}
  .j-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.75rem;padding-top:1rem}
  .j-side .j-ver{color:#9CA3AF;padding:0 .25rem}
  .j-side .j-ok{color:#3CC165}
  .j-me-wrap{position:relative}
  .j-me{display:flex;align-items:center;gap:.625rem;padding:.375rem;border-radius:.75rem;cursor:pointer;list-style:none;color:#9CA3AF}
  .j-me::-webkit-details-marker{display:none}
  .j-me:hover{background:rgb(255 255 255/.05)}
  .j-me-t{display:flex;flex-direction:column;min-width:0;flex:1}
  .j-me-t b{font-size:.8125rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .j-me-t small{font-size:.6875rem;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .j-menu{position:absolute;left:0;right:0;bottom:calc(100% + .375rem);z-index:50;padding:.375rem;border-radius:.75rem;background:#16191D;border:1px solid rgb(255 255 255/.1);box-shadow:0 12px 30px rgb(0 0 0/.4)}
  .j-menu a,.j-menu button{display:block;width:100%;border:0;background:none;border-radius:.5rem;padding:.5rem .75rem;font:500 .875rem/1.25rem var(--ef-font);color:#fff;text-decoration:none;text-align:left;cursor:pointer}
  .j-menu a:hover,.j-menu button:hover{background:rgb(255 255 255/.06)}
  .j-menu .is-danger{color:#F87171}
  .j-side .j-legal a{color:#6B7280}.j-side .j-legal a:hover{color:#fff}
  .j-copy{margin:0;font-size:.6875rem;color:#6B7280}
  .j-side .ef-tgroup{background:#16191D;border-color:rgb(255 255 255/.1);color:#9CA3AF}
  .j-side .ef-tgroup button[aria-pressed=true]{background:#0B0D0F;color:#fff;box-shadow:0 0 0 1px rgb(255 255 255/.12)}
  .j-side .ef-tgroup--block button{min-height:2rem;font-size:.75rem}
}

/* ---- auth pages (login / signup / forgot / reset) ---- */
.j-auth{min-height:100vh;display:flex;flex-direction:column;background:rgb(var(--ef-bg));color:rgb(var(--ef-text))}
.j-auth-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1600px;width:100%;margin:0 auto;padding:1rem 1.25rem}
.j-auth-top a.j-back2{font-size:.8125rem;color:rgb(var(--ef-muted));text-decoration:none}.j-auth-top a.j-back2:hover{color:rgb(var(--ef-text))}
.j-auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem 3rem}
.j-auth-card{width:100%;max-width:26rem;border-radius:1rem;border:1px solid rgb(var(--ef-border));background:rgb(var(--ef-surface));padding:1.75rem 1.5rem;box-shadow:0 20px 50px rgb(0 0 0/.12)}
@media (min-width:640px){.j-auth-card{padding:2.25rem 2rem}}
.j-auth-foot{border-top:1px solid rgb(var(--ef-border));padding:1rem 1.25rem}
.j-auth-foot-in{max-width:1600px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;font-size:.75rem;color:rgb(var(--ef-muted))}
.j-auth-foot a{color:rgb(var(--ef-muted));text-decoration:none}.j-auth-foot a:hover{color:rgb(var(--ef-text))}
.j-auth-foot .ef-mark{margin-left:auto;height:1.5rem;width:auto;opacity:.8}

/* ---- dashboard bits ---- */
.j-pager{margin-top:.75rem}
.j-grp-toggle{border:0;background:none;color:rgb(var(--ef-brand-text));font:600 .75rem/1 var(--ef-font);cursor:pointer;padding:.125rem .25rem;border-radius:.25rem}
.j-grp-toggle:hover{background:rgb(var(--ef-hover))}
tr.j-child td{background:rgb(var(--ef-hover)/.5)}
tr.j-child[hidden]{display:none}
.j-steps{display:grid;gap:.75rem}
@media (min-width:768px){.j-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.j-step{position:relative;border-radius:.875rem;border:1px solid rgb(var(--ef-border));background:rgb(var(--ef-bg));padding:1rem}
.j-step .n{display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;border-radius:.5rem;background:var(--ef-brand-600,#15862C);color:#fff;font:700 .8125rem/1 var(--ef-font)}
.j-step.is-done .n{background:rgb(var(--ef-brand-tint));color:rgb(var(--ef-brand-text))}
.j-step h3{margin:.625rem 0 .25rem;font:700 .9375rem/1.3 var(--ef-font-display);color:rgb(var(--ef-text))}
.j-step p{margin:0;font-size:.8125rem;line-height:1.45;color:rgb(var(--ef-muted))}

/* calendar */
.j-cal{display:grid;gap:.75rem}
@media (min-width:1024px){.j-cal{grid-template-columns:minmax(0,1fr) 20rem}.j-cal-side{position:sticky;top:1rem;align-self:start}}
.j-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) ;gap:.25rem}
@media (min-width:768px){.j-cal-grid{grid-template-columns:repeat(7,minmax(0,1fr)) 5.5rem}}
.j-cal-h{font:600 .6875rem/1 var(--ef-font);text-transform:uppercase;letter-spacing:.05em;color:rgb(var(--ef-muted));padding:.25rem .375rem}
.j-day{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:3.25rem;border-radius:.5rem;border:1px solid rgb(var(--ef-border));background:rgb(var(--ef-bg));padding:.25rem .375rem;font-size:.6875rem;color:rgb(var(--ef-muted));text-align:left;cursor:default}
@media (min-width:1024px){.j-day{min-height:clamp(3.5rem,calc((100vh - 23rem)/6),6rem)}}
button.j-day{cursor:pointer;font:inherit}
.j-day.is-out{opacity:.35}
.j-day.is-win{background:rgb(28 166 56/.12);border-color:rgb(28 166 56/.35)}
.j-day.is-loss{background:rgb(var(--c-loss)/.10);border-color:rgb(var(--c-loss)/.35)}
.j-day.is-sel{outline:2px solid rgb(var(--ef-brand-text));outline-offset:1px}
.j-day.is-today .d{color:rgb(var(--ef-brand-text));font-weight:700}
.j-day .v{font-weight:700;font-size:.6875rem;line-height:1.1;font-variant-numeric:tabular-nums;color:rgb(var(--ef-text));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j-day .v.pos{color:rgb(var(--ef-brand-text))}.j-day .v.neg{color:rgb(var(--c-loss-400))}
.j-day .t{font-size:.625rem;color:rgb(var(--ef-muted))}
@media (min-width:768px){.j-day .v{font-size:.8125rem}}
.j-week{display:none}
@media (min-width:768px){.j-week{display:flex;flex-direction:column;justify-content:space-between;border-radius:.5rem;border:1px dashed rgb(var(--ef-border));padding:.25rem .375rem;font-size:.6875rem;color:rgb(var(--ef-muted))}}
.j-week .v{font-weight:700;font-variant-numeric:tabular-nums}
.j-week .v.pos{color:rgb(var(--ef-brand-text))}.j-week .v.neg{color:rgb(var(--c-loss-400))}
#day-panel-m{max-height:80vh}

/* leaderboard */
.j-lb td,.j-lb th{white-space:nowrap}
.j-disc{font-size:.75rem;line-height:1.5;color:rgb(var(--ef-muted))}
.j-switch{position:relative;display:inline-flex;align-items:center;gap:.625rem;cursor:pointer}
.j-switch input{position:absolute;opacity:0;width:1px;height:1px}
.j-switch i{width:2.25rem;height:1.25rem;border-radius:9999px;background:rgb(var(--ef-border));position:relative;transition:background .15s;flex-shrink:0}
.j-switch i::after{content:"";position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:50%;background:#fff;transition:transform .15s}
.j-switch input:checked+i{background:var(--ef-brand-600,#15862C)}
.j-switch input:checked+i::after{transform:translateX(1rem)}
.j-switch input:focus-visible+i{outline:2px solid rgb(var(--ef-brand-text));outline-offset:2px}
.j-switch input:disabled+i{opacity:.4}
@media (min-width:1024px){.j-shell{background:linear-gradient(to right,#0B0D0F 15.5rem,transparent 15.5rem)}}