/* Încă Una · the jurnal page. Tokens, fonts, buttons and the nav come from style.css. */

body.j{color:var(--chalk);background:var(--rubber)}
.j .nav{gap:14px;background:#14171C}
.j-name{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.j-back{margin-left:auto}
.j-main{max-width:620px;margin:0 auto;padding:90px 16px calc(80px + env(safe-area-inset-bottom))}

.j-warn,.j-demo{margin:0 0 16px;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.45}
.j-warn{background:rgba(214,58,34,.18);color:#FFC2B5}
.j-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;background:rgba(135,148,166,.18)}
.j-demo button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:var(--chalk);color:var(--ink);font-weight:700;cursor:pointer}

/* tabs: one pill, the active one lit */
.j-tabs{position:sticky;top:74px;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 22px;padding:5px;border-radius:999px;background:#1D2129;box-shadow:0 0 0 1px rgba(236,237,231,.08),0 10px 30px -12px rgba(0,0,0,.6)}
.j-tabs button{min-height:42px;border:0;border-radius:999px;background:transparent;color:var(--fog);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .35s var(--e1),color .35s var(--e1)}
.j-tabs button[aria-selected="true"]{background:var(--chalk);color:var(--ink)}
.j-panel{animation:jin .5s var(--e1)}
@keyframes jin{from{opacity:0;transform:translateY(8px)}}

.j-h{font:850 clamp(28px,7vw,38px)/1.05 var(--f-display);font-stretch:114%;letter-spacing:-.025em;margin:4px 0 10px}
.j-lead{color:var(--fog);font-size:16px;line-height:1.5;margin-bottom:18px}
.j-sub{margin:28px 0 10px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.j-card{margin-top:12px;padding:16px;border-radius:22px;background:var(--rubber-2);border:6px solid rgba(236,237,231,.04);background-clip:padding-box;box-shadow:0 0 0 1px rgba(236,237,231,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.j-cap{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin-bottom:6px}
.j-note{margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--fog)}
.j-fine{margin-top:22px;font-size:13.5px;line-height:1.5;color:var(--fog)}

.j-field{display:grid;gap:7px;margin-top:12px;font-size:14.5px;font-weight:600}
.j-field input,.j-field select{width:100%;min-height:50px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line-d-strong);background:var(--rubber);color:var(--chalk);font:400 16px/1.3 var(--f-body);color-scheme:dark}
.j-field select{-webkit-appearance:none;appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23A9B0BA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.j-field input:focus-visible,.j-field select:focus-visible{outline:2px solid var(--accent-lit);outline-offset:2px}
.j-date{max-width:240px}

/* the four days of the split */
.j-days{margin-top:0}
.j-days button{min-height:44px;font-size:14.5px}
.j-days button b{font-weight:800}

/* one exercise */
.j-exs{display:grid;gap:12px;margin:18px 0 18px}
.jx{padding:16px 16px 12px;border-radius:22px;background:var(--rubber-2);border:6px solid rgba(236,237,231,.04);background-clip:padding-box;box-shadow:0 0 0 1px rgba(236,237,231,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.jx header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.jx h3{font:850 19px/1.15 var(--f-display);font-stretch:112%;letter-spacing:-.015em}
.jx-t{flex:none;font:500 13px/1 var(--f-mono);color:var(--fog)}
.jx-last{margin-top:8px;font-size:14px;line-height:1.4;color:var(--fog)}
.jx-sug{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:14.5px;line-height:1.4;font-weight:600}
.jx-sug i{flex:none;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,var(--rubber-2) 0 2px,var(--steel) 2.6px);transform:translateY(1px)}
.jx.up .jx-sug i{background:radial-gradient(circle,var(--rubber-2) 0 2px,var(--accent) 2.6px)}
.jx.up .jx-sug{color:#FFB4A4}
.jx-sets{margin-top:10px;display:grid;gap:6px}
.jx-sets li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line-d)}
.jx-n{flex:none;width:22px;font:500 13px/1 var(--f-mono);color:var(--fog)}
.jx-in{position:relative;flex:1 1 0;min-width:0}
.jx-in span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:500 11.5px/1 var(--f-mono);color:var(--fog);pointer-events:none}
.jx-in input{width:100%;min-height:46px;padding:8px 40px 8px 12px;border-radius:12px;border:1.5px solid var(--line-d-strong);background:var(--rubber);color:var(--chalk);font:700 17px/1 var(--f-body);font-variant-numeric:tabular-nums}
.jx-in input:focus-visible{outline:2px solid var(--accent-lit);outline-offset:1px}
.jx-x{flex:none;color:var(--fog)}
.jx-ok{position:relative;flex:none;width:46px;height:46px;border:0;border-radius:50%;background:rgba(236,237,231,.08);box-shadow:inset 0 0 0 1.5px var(--line-d-strong);cursor:pointer;transition:background-color .3s var(--e1),box-shadow .3s var(--e1),transform .3s var(--e1)}
.jx-ok::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:8px;border-left:2.5px solid var(--fog);border-bottom:2.5px solid var(--fog);transform:translate(-50%,-62%) rotate(-45deg);opacity:.5;transition:opacity .3s var(--e1),border-color .3s var(--e1)}
.jx-ok[aria-pressed="true"]{background:var(--accent);box-shadow:none}
.jx-ok[aria-pressed="true"]::after{border-color:#fff;opacity:1}
.jx-ok:active{transform:scale(.94)}

.j-msg{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(236,237,231,.1);font-size:15px;line-height:1.45}
.j-msg.bad{background:rgba(214,58,34,.18);color:#FFC2B5}
#j-save.pop{animation:jpop .6s var(--e1)}
@keyframes jpop{40%{transform:scale(1.03)}}

/* charts */
.j .chart{display:block;width:100%;height:auto}

.j-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.j-stats div{padding:10px;border-radius:14px;background:rgba(236,237,231,.05)}
.j-stats b{display:block;font:850 19px/1.1 var(--f-display);font-stretch:112%}
.j-stats span{display:block;margin-top:5px;font-size:12.5px;line-height:1.3;color:var(--fog)}
.j-stats .plus b{color:var(--accent-lit)}
.j-stats .j-note{grid-column:1/-1;margin:0}

/* twelve weeks, four dots each */
.j-weeks{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end}
.jw{display:flex;flex-direction:column-reverse;align-items:center;gap:5px;padding:6px 0;border-radius:10px}
.jw.now{background:rgba(236,237,231,.07)}
.jw i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-d-strong)}
.jw i.on{background:var(--accent);box-shadow:none}

.j-hist{margin-top:6px}
.j-hist li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-top:1px solid var(--line-d);font-size:15px}
.j-hist li span{display:block;margin-top:3px;font-size:13px;color:var(--fog)}
.j-hist .j-none{color:var(--fog)}
.j-del{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:rgba(236,237,231,.07);color:var(--fog);font-size:14px;cursor:pointer}
.j-del:hover{color:var(--chalk)}

.j-body{display:grid;gap:4px}
.j-body .btn{margin-top:14px}
.j-actions{display:grid;gap:10px;margin-top:6px}
.j-actions .btn.ghost{color:var(--chalk)}

@media (pointer:coarse){.j-del{min-height:44px}}
@media (prefers-reduced-motion: reduce){.j-panel{animation:none}}

/* the four days as a tidy grid: day on top, muscles under it */
.j-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.j-days button{min-height:56px;padding:8px 14px;border-radius:18px;text-align:left;line-height:1.25}
.j-days button b{display:block;font-size:15px}
@media (min-width:600px){.j-days{grid-template-columns:repeat(4,minmax(0,1fr))}}