/* My Journal (3 Nov, Joshua's mockup): All · Focus · Match · Practice · Coach, in the round 2 look (white cards, purple, soft shadows) */
.jn{--jn-ink:var(--k-ink,#101B40);--jn-ink2:#6E6E73;--jn-p:var(--k-purple,#7C3AED);--jn-ps:var(--k-purple-soft,#F1EAFF);--jn-card:0 1px 2px rgba(16,27,64,.05),0 10px 24px -16px rgba(76,58,170,.35)}
.jn .mt-h{margin-bottom:14px}

/* filter row */
.jn-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;margin:0 0 18px;border-radius:20px;background:#fff;box-shadow:var(--jn-card)}
.jn-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;border:0;border-radius:16px;background:none;color:#8E8E93;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;transition:background .15s,color .15s}
.jn-tabs button svg{width:22px;height:22px}
.jn-tabs button.on{background:var(--jn-ps);color:var(--jn-p)}

.jn-h{margin:24px 2px 10px;font-size:17px;font-weight:900;color:var(--jn-ink)}
.jn .b3.jn-add{margin-top:14px}
.jn-none{margin:4px 2px;color:var(--jn-ink2);font-size:15px;font-weight:700;line-height:1.4}

/* this week's focus */
.jn-fc{border-radius:22px;background:#fff;box-shadow:var(--jn-card);overflow:hidden}
.jn-fct{display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px 10px;border:0;background:linear-gradient(180deg,var(--jn-ps),#fff);text-align:left;font:inherit;color:var(--jn-ink);cursor:pointer}
.jn-fct>span:nth-child(2){flex:1;min-width:0}
.jn-fct small{display:block;color:var(--jn-p);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.jn-fct b{display:block;margin-top:3px;font-size:18px;font-weight:900;line-height:1.2}
.jn-fct>svg{width:20px;height:20px;flex:none;color:#B5B5BD}
.jn-fp{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:18px;background:#fff;box-shadow:0 0 0 1.5px #EDE7FB inset}
.jn-fp img{max-width:56px;max-height:56px;object-fit:contain}
.jn-fp.lg{width:84px;height:84px;border-radius:22px}.jn-fp.lg img{max-width:74px;max-height:74px}
.jn-fpr{display:flex;align-items:center;gap:10px;padding:2px 16px 0}
.jn-bar{position:relative;flex:1;display:block;height:8px;border-radius:9px;background:#EEEDF3;overflow:hidden}
.jn-bar i{position:absolute;inset:0 auto 0 0;border-radius:9px;background:linear-gradient(90deg,#34C759,#22A55A);transition:width .4s}
.jn-fpr em{font-style:normal;font-size:13px;font-weight:800;color:var(--jn-ink2)}
.jn-fst{display:flex;gap:6px;padding:10px 12px 14px}
.jn-fst span{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:34px;border-radius:12px;background:#F5F5F8;color:#8E8E93;font-size:12.5px;font-weight:800;white-space:nowrap}
.jn-fst span i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1.5px #C7C7CC inset}
.jn-fst span.on{background:#ECFBF2;color:#166534}
.jn-fst span.on i{background:#22A55A;box-shadow:none;color:#fff}
.jn-fst i svg{width:11px;height:11px;stroke-width:3.4}

/* quick add */
.jn-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.jn-quick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 9px;border:0;border-radius:18px;background:#fff;box-shadow:var(--jn-card);font:inherit;color:var(--jn-ink);cursor:pointer}
.jn-quick img{width:46px;height:46px;object-fit:contain}
.jn-quick b{font-size:12.5px;font-weight:800;white-space:nowrap}

/* a line in the journal */
.jn-row{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:10px 14px 10px 10px;border:0;border-radius:18px;background:#fff;box-shadow:var(--jn-card);text-align:left;font:inherit;color:var(--jn-ink);cursor:pointer}
.jn-row.flat{cursor:default}
.jn-ri{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:#F5F3FC;overflow:hidden}
.jn-ri img{max-width:40px;max-height:40px;object-fit:contain}
.jn-ri.talk img{max-width:none;max-height:none;width:48px;height:48px;object-fit:cover}
.jn-ri.coach{background:#EAF2FF}.jn-ri.match{background:#E6F7F3}.jn-ri.prac{background:#FFF6E0}
.jn-rb{flex:1;min-width:0}
.jn-rb b{display:block;font-size:16px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jn-rb small{display:block;margin-top:2px;color:var(--jn-ink2);font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jn-row>em{flex:none;font-style:normal;font-size:12.5px;font-weight:700;color:#A1A1AA}
.jn-more{display:block;margin:4px auto 0}

/* match totals */
.jn-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jn-sum span{display:flex;flex-direction:column;align-items:center;padding:12px 4px;border-radius:18px;background:#fff;box-shadow:var(--jn-card);color:var(--jn-ink2);font-size:13px;font-weight:800}
.jn-sum b{font-size:26px;font-weight:900;color:var(--jn-ink);line-height:1.1}
.jn-sum .w b{color:#22A55A}.jn-sum .l b{color:#8E8E93}

/* empty states */
.jn-empty{display:flex;flex-direction:column;align-items:center;padding:22px 18px 18px;border-radius:24px;background:#fff;box-shadow:var(--jn-card);text-align:center}
.jn-empty>img{width:150px;height:150px;object-fit:contain;margin-bottom:8px}
.jn-empty>b{font-size:23px;font-weight:900;color:var(--jn-ink)}
.jn-empty>p{margin:6px 0 0;max-width:260px;color:var(--jn-ink2);font-size:15.5px;font-weight:600;line-height:1.4}
.jn-empty .b3{align-self:stretch}
.jn-hints{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-self:stretch;margin-top:14px}
.jn-hints span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;background:#F7F6FB;color:var(--jn-ink2);font-size:12.5px;font-weight:800;line-height:1.2}
.jn-hints svg{width:22px;height:22px;color:var(--jn-p)}
.jn-coach{margin:14px 4px 0;text-align:center;color:var(--jn-ink2);font-size:14.5px;font-weight:700}

/* sheets: pick a focus, add a match / practice, see one */
.jn-sth{margin:0 0 16px}
.jn-sth b{display:block;font-size:24px;font-weight:900;line-height:1.2;color:var(--jn-ink,#101B40)}
.jn-sth small{display:block;margin-top:4px;color:#6E6E73;font-size:15px;font-weight:600}
.jn-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.jn-opts button{display:flex;align-items:center;gap:12px;height:58px;padding:0 14px 0 8px;border:0;border-radius:16px;background:#F7F6FB;box-shadow:0 0 0 1.5px transparent inset;font:inherit;color:#101B40;text-align:left;cursor:pointer;transition:box-shadow .15s,background .15s}
.jn-opts img{width:46px;height:46px;object-fit:contain}
.jn-opts b{flex:1;font-size:17px;font-weight:800}
.jn-opts i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px #C7C7CC inset;color:transparent}
.jn-opts i svg{width:15px;height:15px;stroke-width:3.4}
.jn-opts button.on{background:#F1EAFF;box-shadow:0 0 0 2px #7C3AED inset}
.jn-opts button.on i{background:#7C3AED;box-shadow:none;color:#fff}
.jn-pen{display:grid;place-items:center;width:46px;height:46px;color:#7C3AED}.jn-pen svg{width:24px;height:24px}
#jfOwn{margin-bottom:12px}
.jn-q{margin-bottom:16px}
.jn-q>b{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:16.5px;font-weight:900;color:#101B40}
.jn-q>b svg{width:20px;height:20px;color:#7C3AED}
.jn-q>b.ok svg{color:#22A55A}.jn-q>b.tg svg{color:#E5484D}
.jn-q>b small{color:#8E8E93;font-size:13px;font-weight:700}
.jn-cue{display:block;margin:-2px 0 8px;color:#6E6E73;font-size:14px;font-weight:700}
.jn-q .jn-cue{margin:8px 0 0}
.jn-seg{display:flex;gap:6px;padding:4px;border-radius:16px;background:#F2F1F7}
.jn-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:44px;border:0;border-radius:12px;background:none;font:inherit;font-size:15px;font-weight:800;color:#6E6E73;cursor:pointer}
.jn-seg button.on{background:#7C3AED;color:#fff;box-shadow:0 6px 14px -8px rgba(124,58,237,.9)}
.jn-seg.feel button{flex-direction:column;gap:2px;height:72px;font-size:13px}
.jn-seg.feel svg{width:34px;height:34px}
.jn-seg.feel button.on{background:#fff;color:#101B40;box-shadow:0 0 0 2px #7C3AED inset}
.jn-score{display:flex;align-items:center;justify-content:center;gap:12px}
.jn-score label{display:flex;flex-direction:column;align-items:center;gap:4px;color:#8E8E93;font-size:13px;font-weight:800}
.jn-score input{width:78px;height:62px;border:0;border-radius:16px;background:#fff;box-shadow:0 0 0 2px #E4E2EE inset;text-align:center;font:inherit;font-size:30px;font-weight:900;color:#101B40}
.jn-score input:focus{outline:0;box-shadow:0 0 0 2.5px #7C3AED inset}
.jn-score>i{font-style:normal;font-size:26px;font-weight:900;color:#C7C7CC;margin-bottom:20px}
.jn-chips{display:flex;flex-wrap:wrap;gap:8px}
.jn-chips button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:99px;background:#F2F1F7;font:inherit;font-size:14.5px;font-weight:800;color:#4A5379;cursor:pointer}
.jn-chips button svg{width:16px;height:16px}
.jn-chips button.on{background:#7C3AED;color:#fff}
.jn-sh .hwin textarea{min-height:58px}

/* the focus, big */
.jn-fh{display:flex;align-items:center;gap:14px;padding:14px;border-radius:22px;background:linear-gradient(160deg,#F1EAFF,#fff)}
.jn-fh small{display:flex;align-items:center;gap:5px;color:#7C3AED;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.jn-fh small svg{width:15px;height:15px}
.jn-fh b{display:block;margin-top:4px;font-size:21px;font-weight:900;line-height:1.2;color:#101B40}
.jn-fh em{display:block;margin-top:4px;font-style:normal;color:#6E6E73;font-size:13.5px;font-weight:700}
.jn-why{margin:12px 4px 0;color:#4A5379;font-size:15.5px;font-weight:600;line-height:1.4}
.jn-box{margin:12px 0;padding:14px;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px #EEEDF3 inset}
.jn-bh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.jn-bh b{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:900;color:#101B40}
.jn-bh b svg{width:19px;height:19px;color:#7C3AED}
.jn-bh em{font-style:normal;font-size:13.5px;font-weight:800;color:#6E6E73}
.jn-step{display:flex;align-items:center;gap:12px;padding:11px 2px 0;font-size:16px;font-weight:700;color:#101B40}
.jn-step+.jn-step{margin-top:10px;border-top:1px solid #F0EFF5}
.jn-step i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px #D1D1D6 inset;color:#fff}
.jn-step.on i{background:#22A55A;box-shadow:none}
.jn-step i svg{width:15px;height:15px;stroke-width:3.4}
.jn-step span{flex:1}.jn-step:not(.on) span{color:#6E6E73}
.jn-step em{font-style:normal;font-size:14px;font-weight:700;color:#8E8E93}
.jn-box textarea{display:block;width:100%;border:0;border-radius:14px;padding:12px;background:#F7F6FB;font:inherit;font-size:16px;font-weight:600;color:#101B40;resize:none}
.jn-box textarea:focus{outline:0;box-shadow:0 0 0 2px #7C3AED inset}
.jn-fs .b3{margin-top:10px}
.jn-dl{margin-bottom:14px;padding:14px;border-radius:18px;background:#F7F6FB}
.jn-dl b{display:flex;align-items:center;gap:7px;color:#6E6E73;font-size:13.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.jn-dl b svg{width:17px;height:17px;color:#7C3AED}
.jn-dl p{margin:6px 0 0;color:#101B40;font-size:17px;font-weight:700;line-height:1.35}
.jn-del{display:flex;align-items:center;gap:6px;margin:14px auto 0;color:#E5484D !important}
.jn-del svg{width:16px;height:16px}
.jn-del.sure{font-weight:900}
.jn-tip{display:flex;align-items:center;gap:12px;margin-top:24px;padding:14px 16px 14px 10px;border-radius:22px;background:#fff;box-shadow:var(--jn-card)}
.jn-tip img{width:104px;flex:none}
.jn-tip p{margin:0;color:var(--jn-ink2);font-size:14.5px;font-weight:600;line-height:1.4}
.jn-tip b{display:block;margin-bottom:3px;color:var(--jn-ink);font-size:16.5px;font-weight:900}

/* ---------- journal pop-ups, round 2 (3 Nov, Joshua: "too grey and boring", score centred, "two-thirds, not the whole screen")
   Sits on top of sheets.css (the grouped Apple look) with a touch of colour: each question gets its own coloured icon tile,
   "I won" goes green, Yes/A bit/No get colours; result + score share one card; the Save button stays pinned at the bottom. */
html.pm2 #sheet:has(.jn-sh){max-height:68%}
html.pm2 #sheet .jn-sh .jn-sth.pic{display:flex;align-items:center;gap:12px;margin-bottom:14px}
html.pm2 #sheet .jn-sh .jn-sth.pic>span{flex:1}
html.pm2 #sheet .jn-sh .jn-sth.pic img{width:62px;height:62px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 10px rgba(16,24,40,.18))}
html.pm2 #sheet .jn-sh .jn-q{margin-bottom:18px}
html.pm2 #sheet .jn-sh .jn-q>b{gap:10px;margin-bottom:9px;font-size:16.5px}
html.pm2 #sheet .jn-sh .jn-q>b svg{box-sizing:content-box;width:16px !important;height:16px !important;padding:6px;border-radius:9px;background:var(--qt,#F1EAFF);color:var(--qc,#7C3AED) !important;stroke-width:2.4}
html.pm2 #sheet .jn-sh .c-win{--qt:#FFF4D6;--qc:#D97706}
html.pm2 #sheet .jn-sh .c-ok{--qt:#E3F8EA;--qc:#16A34A}
html.pm2 #sheet .jn-sh .c-tg{--qt:#FFEBEC;--qc:#E5484D}
html.pm2 #sheet .jn-sh .c-fo{--qt:#F1EAFF;--qc:#7C3AED}
html.pm2 #sheet .jn-sh .c-sc{--qt:#E6F0FF;--qc:#2563EB}
html.pm2 #sheet .jn-sh .c-tm{--qt:#E0F7F5;--qc:#0D9488}
html.pm2 #sheet .jn-sh .jn-cue{margin:-3px 0 8px;font-size:13.5px;font-weight:600}
/* result: I won goes green, I lost stays white */
html.pm2 #sheet .jn-sh .jn-seg.res button.on[data-jseg=won]{background:linear-gradient(180deg,#34C759,#22A55A);color:#fff;box-shadow:0 6px 14px -8px rgba(34,165,90,.9)}
/* the score sits in the same card, lined up on the left */
html.pm2 #sheet .jn-sh .jn-score{justify-content:flex-start;gap:8px;margin-top:10px}
html.pm2 #sheet .jn-sh .jn-score>span{flex:1;font-size:15px;font-weight:700;color:var(--pm-ink)}
html.pm2 #sheet .jn-sh .jn-score>span small{display:block;color:var(--pm-ink2);font-size:12.5px;font-weight:600}
html.pm2 #sheet .jn-sh .jn-score input{width:64px;height:46px;border-radius:12px;font-size:20px !important}
html.pm2 #sheet .jn-sh .jn-score input::placeholder{font-size:14px;font-weight:700;color:#AEAEB2}
html.pm2 #sheet .jn-sh .jn-score>i{margin:0;font-size:18px}
/* Yes / A bit / No: each its own colour when picked */
html.pm2 #sheet .jn-sh .jn-seg.yn button.on[data-jseg=yes]{background:#22A55A;color:#fff}
html.pm2 #sheet .jn-sh .jn-seg.yn button.on[data-jseg=abit]{background:#F59E0B;color:#fff}
html.pm2 #sheet .jn-sh .jn-seg.yn button.on[data-jseg=no]{background:#8E8E93;color:#fff}
/* chips + feel: picked = filled colour, not just a ring */
html.pm2 #sheet .jn-sh .jn-chips button.on{background:#7C3AED;color:#fff;box-shadow:none}
html.pm2 #sheet .jn-sh .jn-seg.feel button{height:70px}
html.pm2 #sheet .jn-sh .jn-seg.feel button.on{background:#fff;color:var(--pm-ink);box-shadow:0 0 0 2px #7C3AED inset,0 8px 16px -10px rgba(124,58,237,.6)}
/* text boxes: one line to start, one outline only (no second ring inside), quieter mic */
html.pm2 #sheet .jn-sh .hwin textarea{min-height:50px;padding:13px 56px 13px 14px;font-size:16px;line-height:1.4;box-shadow:none !important;outline:0}
html.pm2 #sheet .jn-sh .hwin textarea:focus{box-shadow:none !important;outline:0;background:transparent}
html.pm2 #sheet .jn-sh .micsm{width:36px;height:36px;right:7px}
html.pm2 #sheet .jn-sh .micsm svg{width:17px;height:17px}
/* Save stays at the bottom while the rest scrolls */
html.pm2 #sheet .jn-sh .jn-save{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:3;margin:6px -16px calc(-18px - env(safe-area-inset-bottom));padding:14px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(242,242,247,0),var(--pm-bg,#F2F2F7) 34%)}
html.pm2 #sheet .jn-sh .jn-save .b3{margin:0;width:100%}
html.pm2 #sheet .jn-sh .jn-chips+.jn-cue{margin:9px 0 0}