/* Journal */
.jstart { margin-top: 14px; padding: var(--pad-y) var(--pad-x); }
.jstart-h { display: flex; align-items: center; gap: var(--sp-3); }
.jstart-h > div { flex: 1; min-width: 0; }
.jstart-h b { display: block; font-size: var(--t-title); font-weight: 650; letter-spacing: -.01em; }
.jstart-h small { display: block; color: var(--muted); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.jgo { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; height: var(--h-btn); margin-top: var(--sp-4); border-radius: var(--r-md);
  background: var(--inv); color: var(--on-inv); font-size: var(--t-lg); font-weight: 650; transition: transform .12s ease; }
.jgo:active { transform: scale(.98); }
.jgo svg { width: var(--g-md); height: var(--g-md); }
.jqd { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--t-md); }
.jqd summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-weight: 600; }
.jqd summary::-webkit-details-marker { display: none; }
.jqd summary svg { width: var(--g-xs); height: var(--g-xs); transition: transform .2s; }
.jqd[open] summary svg { transform: rotate(90deg); }
.jqd .jq { margin-top: var(--sp-2); padding-bottom: 0; border-bottom: 0; }
.jrec { padding: 0 var(--pad-x); }
.jr { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 13px 0; text-align: left; }
.jr + .jr { border-top: 1px solid var(--line); }
.jr .jr-m { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--raised); color: var(--faint);
  font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.jr .jr-m.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.jr .jr-m.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.jr .jr-m.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.jr .jr-t { flex: 1; min-width: 0; }
.jr .jr-t b { display: block; font-size: var(--t-base); font-weight: 600; }
.jr .jr-t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: var(--t-sm); line-height: 1.4; }
.jr .chev { flex: none; color: var(--faint); }
.jr .chev svg { width: var(--g-sm); height: var(--g-sm); }
.jr:active { opacity: .7; }
.jw { margin-top: 14px; padding: 16px 16px 10px; }
.jq { margin: 0; padding: 0 0 12px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--t-md); line-height: 1.65; }
.jq li::marker { color: var(--faint); font-weight: 600; }
/* fixed height that fits above the iPhone keyboard; it scrolls inside, so iOS keeps the cursor in view itself.
   Never resize it when the keyboard comes or goes: it was found jumpy (tried and removed) */
.jw textarea { display: block; width: 100%; height: 40svh; min-height: 220px; overflow-y: auto; padding: 12px 2px 8px; border: 0; outline: 0; resize: none; background: transparent;
  color: var(--text); font: inherit; font-size: var(--t-xl); line-height: 1.55; }
.jw textarea::placeholder { color: var(--faint); }
.jfoot { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-md); }
.jtm { min-width: 40px; font-weight: 650; font-variant-numeric: tabular-nums; }
.jtm.ok, .jwc.ok { color: var(--good); }
.jwc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jst { flex: none; min-width: 44px; text-align: right; color: var(--faint); font-size: var(--t-sm); }
.jsave { flex: none; padding: 9px 18px; border-radius: var(--r-full); background: var(--inv); color: var(--on-inv); font-size: var(--t-base); font-weight: 650; }
.jsave:disabled { opacity: .5; }
.jclose { flex: none; display: grid; place-items: center; width: var(--ib-sm); height: var(--ib-sm); border-radius: 50%; background: var(--raised); color: var(--muted); }
.jclose svg { width: var(--g-sm); height: var(--g-sm); }
.jdn { display: block; width: 100%; margin-top: 14px; padding: var(--pad-y) var(--pad-x); text-align: left; }
.jdn-h { display: flex; align-items: center; gap: 12px; }
.jdn-h > div { flex: 1; min-width: 0; }
.jdn-h b { display: block; font-size: var(--t-xl); font-weight: 650; }
.jdn-h small { display: block; color: var(--muted); font-size: var(--t-sm); }
.jdn-h .icon-btn { width: var(--ib-sm); height: var(--ib-sm); background: var(--raised); }
.jdn-h .icon-btn svg { width: var(--g-sm); height: var(--g-sm); }
.jmood { flex: none; display: flex; align-items: baseline; justify-content: center; gap: 1px; width: 52px; height: 52px; padding-top: 11px; border-radius: var(--r-md); background: var(--raised); }
.jmood b { font-size: var(--t-h2); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.jmood small { font-size: var(--t-2xs); font-weight: 600; opacity: .7; }
.jmood.good, .jth-e em.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.jmood.warn, .jth-e em.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.jmood.bad, .jth-e em.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.jsum { margin-top: 14px; font-size: var(--t-lg); line-height: 1.5; }
.jsum.wait { padding: 2px 0 2px 12px; border-left: 2px solid var(--src-ai); color: var(--faint); font-size: var(--t-md); }
.jsum.wait b { color: var(--text); font-weight: 600; }
.jsum.wait .linkbtn { padding: 0; border: 0; background: none; color: var(--src-ai); font: inherit; font-weight: 600; cursor: pointer; }
button.jmood { cursor: pointer; }
.jmine { color: var(--src-you); font-weight: 600; }
/* Your own mood score (sheet #jms): number, slider, up to 3 feelings, an optional why */
.jms-n { display: flex; align-items: baseline; gap: 2px; margin: var(--sp-1) 2px 0; }
.jms-n b { font-size: var(--t-stat); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.jms-n small { font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.jms-n span { margin-left: auto; font-size: var(--t-base); font-weight: 600; }
.jms-n.good b, .jms-n.good span { color: var(--good); } .jms-n.warn b, .jms-n.warn span { color: var(--warn); } .jms-n.bad b, .jms-n.bad span { color: var(--bad); }
.jms-r { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--h-btn-sm); margin-top: var(--sp-2); background: transparent; --c: var(--warn); --p: 50%; }
.jms-r.good { --c: var(--good); } .jms-r.bad { --c: var(--bad); }
.jms-r::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--p) 100% no-repeat, var(--raised); }
.jms-r::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--pop); box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(0,0,0,.25); }
.jms-r::-moz-range-track { height: 6px; border-radius: 3px; background: var(--raised); }
.jms-r::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c); }
.jms-r::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--pop); box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(0,0,0,.25); }
.jms-ends { display: flex; justify-content: space-between; margin: 0 2px; color: var(--faint); font-size: var(--t-xs); }
.jms-l { margin: var(--sp-5) 2px var(--sp-2); font-size: var(--t-sm); font-weight: 600; }
.jms-l small { color: var(--faint); font-weight: 500; font-size: var(--t-sm); }
.jms-fs { display: flex; flex-wrap: wrap; gap: 6px; }
.jms-f { height: var(--h-chip); padding: 0 12px; border-radius: var(--r-full); background: var(--raised); color: var(--muted); font-size: var(--t-md); font-weight: 500; }
.jms-f.on { background: var(--sel); color: var(--on-sel); font-weight: 600; }
.jms-why { display: block; width: 100%; height: var(--h-field); padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); font-size: var(--t-lg); }
.jms-why::placeholder { color: var(--faint); }
.jms-note { margin: var(--sp-2) 2px 0; color: var(--faint); font-size: var(--t-xs); line-height: 1.45; }
.jms-acts { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.jms-acts button { flex: 1; height: var(--h-btn); border-radius: var(--r-md); font-size: var(--t-lg); font-weight: 650; }
.jms-reset { background: var(--raised); }
.jms-save { background: var(--inv); color: var(--on-inv); }
.jms-acts button:disabled { opacity: .5; }
.jtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.jtags span { padding: 4px 10px; border-radius: var(--r-full); background: var(--raised); font-size: var(--t-sm); font-weight: 600; text-transform: capitalize; }
.jtext { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-base); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
#j-today .jtext { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.jc.on.m-good b { background: var(--good); color: var(--on-acc); }
.jc.on.m-warn b { background: var(--warn); color: var(--on-acc); }
.jc.on.m-bad b { background: var(--bad); color: var(--on-acc); }
.jlegend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--faint); font-size: var(--t-xs); }
.jlegend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.jlegend .good { background: var(--good); } .jlegend .warn { background: var(--warn); } .jlegend .bad { background: var(--bad); }
.jic { flex: none; display: grid; place-items: center; width: var(--ic-sm); height: var(--ic-sm); border-radius: var(--r-sm); background: var(--raised); }
.jic svg { width: var(--g-md); height: var(--g-md); }
.seg.jrange { display: flex; margin-top: 14px; }
.seg.jrange button { flex: 1; white-space: nowrap; }
.jth { margin-top: 12px; padding: var(--pad-y) var(--pad-x) 12px; }
.jstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.jstats b { display: block; font-size: var(--t-h2); font-weight: 700; letter-spacing: -.02em; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jstats small { display: block; color: var(--muted); font-size: var(--t-sm); }
.jstrip { display: grid; gap: 3px; align-items: end; height: 64px; margin-top: 16px; }
.jstrip i { display: block; min-height: 5px; border-radius: 3px; background: var(--raised); }
.jstrip i.pend { background: var(--src-ai); }  /* written, mood arrives by morning */
.jstrip i.good { background: var(--good); } .jstrip i.warn { background: var(--warn); } .jstrip i.bad { background: var(--bad); }
.jstrip-l { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font-size: var(--t-xs); }
.jth-e { display: block; width: 100%; margin-top: 10px; padding: var(--pad-y) var(--pad-x); text-align: left; }
.jth-e h4 { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); font-size: var(--t-base); font-weight: 650; }
.jth-e em { font-style: normal; padding: 3px 9px; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 700; }
.jth-e p { margin-top: 6px; color: var(--muted); font-size: var(--t-base); line-height: 1.5; }
.jth-e p.wait { color: var(--faint); }
.jshare { display: flex; gap: 8px; margin-top: 16px; }
.jf input { display: block; width: 100%; height: var(--h-btn); padding: 0 var(--pad-x); border: 0; outline: 0; background: transparent; font-size: var(--t-lg); }
.jf-row + input { border-top: 1px solid var(--line); }
.jf-row { display: flex; align-items: center; }
.jf-row input { flex: 1; min-width: 0; }
.jf-row .seg { flex: none; margin-right: 10px; }
.jf-row .seg button { padding: 4px 10px; font-size: var(--t-sm); }
.jf input::placeholder { color: var(--faint); }
.jf-scope { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap); margin-top: 12px; }
.jth-e h4 small { color: var(--faint); font-size: var(--t-sm); font-weight: 500; }
.jf-day { font: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.jshare button[disabled] { opacity: .5; }
.jq-x { flex: none; padding: 6px 12px; border-radius: var(--r-full); background: var(--raised); font-size: var(--t-sm); font-weight: 650; }
.jq-x:disabled { opacity: .45; }
.jq-go { background: var(--inv); color: var(--on-inv); }
.jq-acts { display: flex; align-items: center; gap: var(--sp-2); }
.jq-st { color: var(--src-ai); font-size: var(--t-sm); font-weight: 600; }
.jq-all { margin-top: 0; }
.row-btn[disabled] { opacity: .55; }
.jth-e p .jf-w { display: flex; align-items: center; gap: 5px; margin: 4px 0 2px; color: var(--faint); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.jth-e p .jf-w svg { width: 13px; height: 13px; flex: none; }
.jth-e p .jf-w.text { color: var(--src-you); }
.jth-e p .jf-w.summary { color: var(--src-ai); }
.jth-e p .jf-w.people { color: var(--src-ppl); }
.jth-e p mark { background: none; color: var(--text); font-weight: 650; box-shadow: inset 0 -.45em 0 color-mix(in srgb, var(--warn) 32%, transparent); }
.jshare button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: var(--h-btn); border-radius: var(--r-md); background: var(--raised); font-size: var(--t-base); font-weight: 650; }
.jshare button.pri { background: var(--inv); color: var(--on-inv); }
.jshare svg { width: var(--g-sm); height: var(--g-sm); }
.jwk { margin-top: 10px; padding: var(--pad-y) var(--pad-x); }
.jwk.ready { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--week) 50%, transparent), var(--shadow); }
.jwk h4 { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); font-size: var(--t-base); font-weight: 650; }
.jwk h4 span { display: flex; align-items: center; gap: 6px; }
.jwk h4 svg { width: var(--g-xs); height: var(--g-xs); color: var(--week); }
.jwk h4 small { color: var(--faint); font-size: var(--t-sm); font-weight: 500; }
.jwk .jsum.wait { margin-top: 12px; border-left-color: var(--week); }  /* the weekly summary has its own colour (magenta), apart from the daily AI purple */
.jwk-line { margin-top: 12px; font-size: var(--t-lg); line-height: 1.5; }
.jwk h5 { margin-top: 16px; color: var(--faint); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.jwk ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--t-base); line-height: 1.5; }
.jwk li + li { margin-top: 6px; }
.jwk li::marker { color: var(--faint); }
.jwk li.more { display: none; }
.jwk.open li.more { display: list-item; }
.jwk-row { margin-top: var(--gap); }
#jther-open .jic, .jwk-row .jic { color: var(--week); }  /* therapy's colour: the weekly summary's magenta */
.jwk-all { margin-top: 8px; color: var(--week); font-size: var(--t-md); font-weight: 600; }
.jwk .jtags { margin-top: 14px; }
.jwk-f { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--faint); font-size: var(--t-sm); }
.jwk-f button { flex: none; display: grid; place-items: center; width: var(--ib-sm); height: var(--ib-sm); border-radius: var(--r-sm); background: var(--raised); color: var(--text); }
.jwk-f svg { width: var(--g-xs); height: var(--g-xs); }
.jwk-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 14px; }
.jwk-dots i { height: 6px; border-radius: 3px; background: var(--raised); }
.jwk-dots i.on { background: var(--week); }
.jwk-n { margin-top: 6px; color: var(--faint); font-size: var(--t-sm); }
.jwk-pop { background: color-mix(in srgb, var(--week) 9%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--week) 45%, transparent), var(--shadow); }
.jwk-pop .jic { width: var(--ic); height: var(--ic); border-radius: var(--r-full); background: color-mix(in srgb, var(--week) 16%, transparent); color: var(--week); animation: jbreathe 5s ease-in-out infinite; }
.jwk-pop .jic svg { width: var(--g-xl); height: var(--g-xl); }
@keyframes jbreathe { 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .jwk-pop .jic, .jlt-pop .jic { animation: none; } }
/* the month's letter (2026-11-01): a card on the day it's written, then Letters from your journal; --letter (warm coral) wherever it shows */
.jlt-pop { background: color-mix(in srgb, var(--letter) 9%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--letter) 45%, transparent), var(--shadow); }
.jlt-pop .jic { width: var(--ic); height: var(--ic); border-radius: var(--r-full); background: color-mix(in srgb, var(--letter) 16%, transparent); color: var(--letter); animation: jbreathe 5s ease-in-out infinite; }
.jlt-pop .jic svg { width: var(--g-xl); height: var(--g-xl); }
#jlet-open .jic { color: var(--letter); }
#jlet .jd-card h3 > svg { color: var(--letter); }
.jlt-txt p { margin-top: var(--sp-3); color: var(--text); font-size: var(--t-lg); line-height: 1.6; }
#jent-del { color: var(--bad); }
/* Night log: the night's plan, ticked off */
.nl-seg { margin-top: 0 !important; }
.nl-sum2 { margin: var(--sp-4) 4px 0; color: var(--muted); font-size: var(--t-base); line-height: 1.45; }
.nl-sum2 b { font-weight: 650; } .nl-sum2 b.good { color: var(--good); } .nl-sum2 b.bad { color: var(--bad); }
.nl-list { padding: 0 var(--pad-x); }
.nl-r + .nl-r { border-top: 1px solid var(--line); }
.nl-h { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 14px 0; text-align: left; }
.nl-tm { flex: none; width: 66px; color: var(--muted); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.nl-tx { flex: 1; min-width: 0; }
.nl-tx b { display: block; font-size: var(--t-base); font-weight: 600; }
.nl-tx small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--t-sm); line-height: 1.4; }
.nl-r.skip .nl-tx b, .nl-r.skip .nl-tm { color: var(--faint); }
.nl-pill { flex: none; padding: 3px var(--sp-2); border-radius: var(--r-full); background: var(--raised); color: var(--muted); font-size: var(--t-xs); font-style: normal; font-weight: 650; white-space: nowrap; }
.nl-pill.good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.nl-pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.nl-pill.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.nl-pill.run { background: color-mix(in srgb, var(--deep) 16%, transparent); color: var(--deep); }
.nl-dot.run { background: var(--deep); animation: jdtw 1.6s ease-in-out infinite; }
.nl-h .chev, .nl-sp { flex: none; width: var(--g-sm); color: var(--faint); transition: transform .15s ease; }
.nl-h .chev svg { width: var(--g-sm); height: var(--g-sm); }
.nl-h .chev.up { transform: rotate(90deg); }
.nl-dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line-2); }
.nl-dot.good { background: var(--good); } .nl-dot.warn { background: var(--warn); } .nl-dot.bad { background: var(--bad); }
.nl-det { padding: 0 0 var(--sp-4) calc(66px + 8px + var(--sp-3) * 2); }
.nl-l { margin-top: var(--sp-2); color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.nl-l.nl-err { color: var(--bad); }
.nl-step { margin-top: var(--sp-3); }
.nl-step > p { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-md); }
.nl-step > p b { flex: 1; min-width: 0; font-weight: 600; }
.nl-step > p span { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.nl-step .nl-l, .nl-step .nl-ai { margin-left: calc(8px + var(--sp-2)); }
.nl-ai { margin-top: var(--sp-2); border-radius: var(--r-md); background: var(--raised); }
.nl-ai div { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); }
.nl-ai div + div { border-top: 1px solid var(--line); }
.nl-ai span { flex: 1; min-width: 0; }
.nl-ai b { display: block; font-size: var(--t-sm); font-weight: 600; }
.nl-ai small { display: block; color: var(--faint); font-size: var(--t-2xs); }
.nl-ai em { flex: none; display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.nl-ai .rt { padding: 2px 7px; border-radius: var(--r-full); background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-size: var(--t-2xs); font-style: normal; }
/* Deep insights (moon over water): --deep (sea glass) for everything of its own, weekly summaries keep --week (pink); the hero is a night scene in both themes */
.jd-pop { background: color-mix(in srgb, var(--deep) 9%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 42%, transparent), var(--shadow); }
.jd-pop .jic { width: var(--ic); height: var(--ic); border-radius: var(--r-full); background: color-mix(in srgb, var(--deep) 16%, transparent); color: var(--deep); animation: jbreathe 5s ease-in-out infinite; }
.jd-pop .jic svg { width: var(--g-xl); height: var(--g-xl); }
.jmw { animation: jmw 5s ease-in-out infinite; }
@keyframes jmw { 50% { transform: translateX(1.5px); } }
.jd-hero { overflow: hidden; background: #13202d; color: #eef3f8; }
.jd-hero svg { display: block; width: 100%; height: auto; }
.jd-hero .t { padding: var(--sp-3) var(--pad-x) var(--pad-y); }
.jd-hero b { display: block; font-size: var(--t-h2); font-weight: 700; letter-spacing: -.02em; }
.jd-hero small { display: block; margin-top: var(--sp-1); color: rgba(238,243,248,.62); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.jd-hero p { margin-top: var(--sp-3); color: rgba(238,243,248,.9); font-size: var(--t-base); line-height: 1.5; }
.jd-star { animation: jdtw 4s ease-in-out infinite; }
@keyframes jdtw { 50% { opacity: .2; } }
.jd-glow { animation: jdgw 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes jdgw { 50% { opacity: .15; transform: scale(1.12); } }
.jd-wv { animation: jdwv 10s ease-in-out infinite; }
@keyframes jdwv { 50% { transform: translateX(-10px); } }
.jd-glint { animation: jdgl 5s ease-in-out infinite; }
@keyframes jdgl { 50% { opacity: .4; transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .jd-pop .jic, .jmw, .jd-star, .jd-glow, .jd-wv, .jd-glint { animation: none; } }
.jd-card { display: block; width: 100%; margin-top: var(--sp-3); padding: var(--pad-y) var(--pad-x); text-align: left; }
.jd-card h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-base); font-weight: 650; }
.jd-card h3 > svg { flex: none; width: var(--g-sm); height: var(--g-sm); color: var(--deep); }
.jd-card h3 > span { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-2); }
.jd-card h3 small { flex: none; margin-left: auto; color: var(--faint); font-size: var(--t-sm); font-weight: 500; }  /* a date or count, always on the right */
.jd-card > p, .jd-card .jd-th p { margin-top: var(--sp-2); color: var(--muted); font-size: var(--t-base); line-height: 1.5; }
.jd-card .jd-th p { color: var(--text); }
.jd-card p.jd-calm { margin: 0; }
.jd-soft { background: color-mix(in srgb, var(--deep) 8%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 22%, transparent), var(--shadow); }
.jd-back p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jd-k { margin-top: var(--sp-3) !important; color: var(--faint) !important; font-size: var(--t-xs) !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.jd-help { font-size: var(--t-sm) !important; }
.jd-help a { color: var(--deep); font-weight: 650; }
.jd-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.jd-list li { position: relative; padding-left: var(--sp-4); list-style: none; font-size: var(--t-base); line-height: 1.45; }
.jd-list li::before { content: ''; position: absolute; left: 3px; top: .58em; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--deep); opacity: .75; }
.jd-fs { margin-top: var(--sp-3); }
.jd-f { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.jd-fs .jd-f:first-child, .jd-card > .jd-f:first-child, .jd-p:first-child .jd-f { border-top: 0; padding-top: 0; }
.jd-f > span:not(.jd-av) { flex: 1; min-width: 0; }
.jd-f b { display: block; font-size: var(--t-base); font-weight: 600; }
.jd-f small { display: block; color: var(--muted); font-size: var(--t-sm); }
.jd-f em { flex: none; padding: 3px var(--sp-2); border-radius: var(--r-full); background: var(--raised); color: var(--muted); font-size: var(--t-sm); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.jd-f em.up { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.jd-f em.down { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.jd-p + .jd-p .jd-f { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.jd-p { padding-bottom: var(--sp-2); }
.jd-av { flex: none; display: grid; place-items: center; width: var(--ib-sm); height: var(--ib-sm); border-radius: var(--r-full); background: color-mix(in srgb, var(--deep) 16%, transparent); color: var(--deep); font-size: var(--t-base); font-weight: 700; }
.jd-ds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.jd-p .jd-ds { margin: 0 0 0 calc(var(--ib-sm) + var(--sp-3)); }
.jd-d { padding: 3px 10px; border-radius: var(--r-full); background: var(--raised); color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.jd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.jd-chips span { padding: 4px 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--deep) 13%, transparent); color: var(--text); font-size: var(--t-sm); font-weight: 600; }
.jd-th + .jd-th { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.jd-ch { display: block; width: 100%; height: auto; margin-top: var(--sp-3); }
.jd-ch .g { stroke: var(--line-2); stroke-dasharray: 3 4; }
.jd-ch .a { fill: color-mix(in srgb, var(--deep) 12%, transparent); }
.jd-ch .l { fill: none; stroke: var(--deep); stroke-width: 2; stroke-linejoin: round; }
.jd-ch circle { stroke: var(--card); stroke-width: 1.5; }
.jd-ch .good { fill: var(--good); } .jd-ch .warn { fill: var(--warn); } .jd-ch .bad { fill: var(--bad); }
.jd-fe { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--sp-3) var(--sp-3); margin-top: var(--sp-3); }
.jd-fe .n, .jd-strip .n { font-size: var(--t-md); font-weight: 600; text-transform: capitalize; }
.jd-fe .b { height: 8px; border-radius: var(--r-full); background: var(--raised); overflow: hidden; }
.jd-fe .b i { display: block; height: 100%; border-radius: var(--r-full); background: var(--deep); }
.jd-fe .c { min-width: 22px; text-align: right; font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.jd-fe .c small { display: block; color: var(--deep); font-size: var(--t-2xs); font-weight: 600; white-space: nowrap; }
.jd-strip { display: grid; grid-template-columns: 92px repeat(8, 1fr); align-items: center; gap: 6px; margin-top: var(--sp-3); }
.jd-strip i { height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--deep) var(--o), var(--raised)); }
.jd-strip small { color: var(--faint); font-size: var(--t-2xs); }
.jd-strip .s { grid-column: 2 / span 4; } .jd-strip .e { grid-column: 6 / span 4; text-align: right; }
.jd-q { display: block; width: 100%; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--raised); text-align: left; }
.jd-q.now { background: color-mix(in srgb, var(--deep) 12%, var(--raised)); }
.jd-q small { display: block; color: var(--faint); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.jd-q p { margin-top: var(--sp-1); font-size: var(--t-lg); line-height: 1.5; font-style: italic; }
.jd-big { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--t-title); font-weight: 700; }
.jd-big span { color: var(--deep); }
.jd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--sp-3); }
.jd-stats div { padding: var(--sp-3); border-radius: var(--r-md); background: var(--raised); }
.jd-stats b { display: block; font-size: var(--t-title); font-weight: 700; }
.jd-stats small { display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.3; }
.jd-tabs { margin-top: var(--sp-5) !important; }
.jd-note { margin: var(--sp-4) 4px 0; color: var(--faint); font-size: var(--t-md); line-height: 1.45; }
.jd-sec { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--h-btn); margin-top: var(--sp-3); border-radius: var(--r-md); background: var(--raised); font-size: var(--t-lg); font-weight: 650; }
.jd-x { display: block; margin-top: var(--sp-4); color: var(--bad); font-size: var(--t-sm); font-weight: 600; }
.jd-rm { flex: none; display: grid; place-items: center; width: var(--ib-sm); height: var(--ib-sm); border-radius: var(--r-full); background: var(--raised); color: var(--muted); }
.jd-rm svg { width: var(--g-xs); height: var(--g-xs); }
.jd-in { display: block; width: 100%; height: var(--h-field); margin-top: var(--sp-3); padding: 0 var(--sp-4); border: 0; outline: 0; border-radius: var(--r-md); background: var(--raised); color: var(--text); font: inherit; font-size: var(--t-lg); -webkit-appearance: none; appearance: none; }
.jd-in::placeholder, .jd-ta::placeholder { color: var(--faint); }
.jd-in[type=date] { display: flex; align-items: center; text-align: left; }  /* iOS sits the date at the top otherwise */
.jd-in[type=date]::-webkit-date-and-time-value { margin: 0; text-align: left; }
.jd-ta { display: block; width: 100%; height: 30svh; min-height: 180px; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); overflow-y: auto; border: 0; outline: 0; border-radius: var(--r-md); background: var(--raised); color: var(--text); font: inherit; font-size: var(--t-lg); line-height: 1.5; resize: none; -webkit-appearance: none; }
.jd-ta.jd-lt { height: 40svh; min-height: 220px; }
.jd-new { margin-top: var(--sp-3); }
.jd-morning { background: color-mix(in srgb, var(--deep) 7%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 30%, transparent), var(--shadow); }
.jd-card p.jd-lead { color: var(--text); font-size: var(--t-lg); line-height: 1.5; }
.jd-card p.jd-t { color: var(--text); }
.jd-card p.jd-sm, .jd-th p.jd-sm { color: var(--faint); font-size: var(--t-sm); }
.jd-rng { display: flex; margin-top: var(--sp-3); }
.jd-rng button { flex: 1; }
.jd-ch .bl { stroke: var(--line-2); }
.jd-ch .ld { stroke: var(--line-2); stroke-width: 1; }
.jd-ch .ld.x { stroke: var(--line); }
.jd-ch .sm { stroke: var(--line-2); stroke-dasharray: 2 3; }
.jd-ch text.mo { fill: var(--faint); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.jd-ch .l.dt { stroke-dasharray: 1.5 5; stroke-linecap: round; }
.jd-ch .hit { fill: transparent; stroke: none; cursor: pointer; }
.jd-ch text { fill: var(--muted); font-size: var(--t-2xs); font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.jd-ch text.v { fill: var(--text); font-weight: 700; }
.jd-st { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; height: 64px; margin-top: var(--sp-3); }
.jd-st div { display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.jd-st i { width: 40%; min-height: 2px; border-radius: 3px 3px 1px 1px; }
.jd-st i.k, .jd-leg i.k { background: var(--deep); }
.jd-st i.h, .jd-leg i.h { background: color-mix(in srgb, var(--warn) 70%, transparent); }
.jd-leg { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); color: var(--muted); font-size: var(--t-sm); }
.jd-leg i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.jd-chs { margin-top: var(--sp-3); }
.jd-chp { display: flex; gap: var(--sp-3); }
.jd-chp > i { position: relative; flex: none; width: 10px; }
.jd-chp > i::before { content: ''; position: absolute; left: 1px; top: 5px; width: 8px; height: 8px; border-radius: var(--r-full); background: color-mix(in srgb, var(--deep) 45%, transparent); }
.jd-chp:not(:last-child) > i::after { content: ''; position: absolute; left: 4.5px; top: 17px; bottom: -3px; width: 1px; background: var(--line-2); }
.jd-chp.now > i::before { background: var(--deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--deep) 18%, transparent); }
.jd-chp > div { padding-bottom: var(--sp-4); }
.jd-chp b { display: block; font-size: var(--t-base); font-weight: 650; }
.jd-chp small { display: block; color: var(--faint); font-size: var(--t-sm); }
.jd-chp p { margin-top: var(--sp-1); color: var(--muted); font-size: var(--t-md); line-height: 1.45; }
.jd-letter { margin-top: var(--sp-3); color: var(--text) !important; font-size: var(--t-lg) !important; line-height: 1.6 !important; white-space: pre-line; }
.jd-ta.jd-sh { height: 110px; min-height: 110px; }
#jdeep .jsum.wait, #jdsub .jsum.wait { border-left-color: var(--deep); }  /* waiting lines here take the Deep insights colour, not the AI purple */
.jd-wkc h3 > svg { color: var(--week); }  /* weekly summaries are pink wherever they show */
.jd-wkc .jd-list li::before { background: var(--week); }
.jd-wkc .jd-chips span { background: color-mix(in srgb, var(--week) 13%, transparent); }
.jd-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: var(--pad-y) var(--pad-x); text-align: left; transition: transform .12s ease; }
.row-btn b { font-size: var(--t-base); font-weight: 600; display: block; }
.row-btn small { display: block; color: var(--muted); font-size: var(--t-sm); }
.row-btn .chev { margin-left: auto; color: var(--faint); }
#home-refresh { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.row-btn .chev svg { width: var(--g-sm); height: var(--g-sm); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.ok { background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }

.ask { padding: 6px; display: flex; gap: 6px; align-items: center; }
.ask { align-items: flex-end; }
.ask textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 12px; font: inherit; font-size: var(--t-lg);
  line-height: 1.4; resize: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-height: 40vh; color: inherit; }  /* grows, then scrolls inside */
.ask textarea::placeholder { color: var(--faint); }
.pill { flex: none; height: var(--h-field); padding: 0 18px; border-radius: var(--r-md); background: var(--inv); color: var(--on-inv); font-weight: 600; font-size: var(--t-base); }
.answer { margin-top: 10px; padding: var(--pad-y) var(--pad-x); font-size: var(--t-lg); line-height: 1.6; white-space: pre-wrap; }
.answer[hidden] { display: none; }
.answer .q { color: var(--faint); font-size: var(--t-sm); margin-bottom: 6px; white-space: normal; }

.list { padding: 2px 18px; }
.ev { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.ev:first-child { border-top: 0; }
.ev time { flex: none; width: 92px; color: var(--muted); font-size: var(--t-md); padding-top: 1px; }
.ev span { font-size: var(--t-base); min-width: 0; }
.ev em { display: block; font-style: normal; color: var(--faint); font-size: var(--t-sm); }
.sub { font-size: var(--t-sm); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 14px 0 2px; border-top: 1px solid var(--line); }
.sec h3 .si { flex: none; align-self: center; width: var(--g-md); height: var(--g-md); color: var(--muted); }
.flight .si { width: var(--g-sm); height: var(--g-sm); margin-right: 6px; vertical-align: -3px; color: var(--muted); }
.chk svg { width: var(--g-xs); height: var(--g-xs); }
.flight { margin: 10px 0 12px; padding: 13px 15px; border-radius: var(--r-md); background: var(--raised); font-size: var(--t-base); }

.clock { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.clock:first-child { border-top: 0; }
.clock .c { flex: 1; min-width: 0; }
.clock b { display: block; font-size: var(--t-lg); font-weight: 600; }
.clock small { display: block; color: var(--faint); font-size: var(--t-sm); }
.clock time { position: relative; display: flex; align-items: baseline; gap: 4px; font-size: var(--t-stat); font-weight: 600; letter-spacing: -.03em; }
.clock time small { display: inline; color: var(--muted); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; }
.cday { position: absolute; top: -9px; right: -12px; padding: 1px 5px; border-radius: var(--r-xs); font-size: 10.5px; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.cday.pv { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.cday.nx { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
#clocks .clock { padding-right: 8px; }
.clock small em { font-style: normal; font-weight: 600; }
.clock small em.nx { color: var(--good); }
.clock small em.pv { color: var(--bad); }
.clock .moon { flex: none; width: 26px; height: 26px; display: grid; place-items: center; --moon: #8b5cf6; --moon-2: #a78bfa; }
.clock .moon svg { width: 26px; height: 26px; overflow: visible; }
.clock .moon .mn { fill: var(--moon); }
.clock .moon .st { fill: var(--moon-2); transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
.clock .moon .s2 { animation-delay: .8s; }
.clock .moon .s3 { animation-delay: 1.6s; }
.clock small em { display: block; white-space: nowrap; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .clock .moon .st { animation: none; } }
:root[data-theme="dark"] .clock .moon { --moon: #a78bfa; --moon-2: #ddd6fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clock .moon { --moon: #a78bfa; --moon-2: #ddd6fe; } }
.clk-acts { display: flex; gap: var(--sp-3); }
.clk-del { flex: none; width: var(--ib-sm); height: var(--ib-sm); border-radius: 50%; background: var(--raised); color: var(--muted); font-size: var(--t-lg); line-height: 1; }
.clk-add { padding: var(--sp-3) var(--pad-x); margin-bottom: var(--sp-3); }
.clk-add input { width: 100%; height: var(--h-field); padding: 0 var(--sp-3); border-radius: var(--r-md); background: var(--raised); color: var(--text); font-size: var(--t-base); }
.clk-hit { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); border-top: var(--hair) solid var(--line); text-align: left; }
.clk-hit b { font-size: var(--t-base); font-weight: 600; }
.clk-hit small { color: var(--faint); font-size: var(--t-sm); }
.clk-sub { margin: var(--sp-2) var(--sp-1) 0; color: var(--faint); font-size: var(--t-sm); }