/* The Journal (/english/journal/): a closed notebook on the Writing Desk.
   Uses the section's own tokens (--bg, --bg2, --ink, --soft, --acc …) from
   /english/assets/style.css and adds only what a notebook needs. Every class
   is prefixed j- so nothing here can restyle the rest of the section, and
   nothing in app.js (which fills .cal, .tilt, .row …) can reach in here.

   Text colours below are the section's own hues darkened (light theme) or
   lightened (dark theme) until small text passes WCAG AA on the paper. */

.j-main{
  --j-mute:#6B6454;--j-acct:color-mix(in srgb,var(--acc) 76%,#000);
  --j-blue:#1F55C4;--j-purple:#6E43A8;--j-green:#167A52;--j-brown:#8C5523;
  --j-ink:var(--ink);--j-L:32px;
  --j-cover:#191712;--j-cover-fg:#F1ECDD;
}
html[data-theme=dark] .j-main{
  --j-mute:#A39B87;--j-acct:color-mix(in srgb,var(--acc) 70%,#fff);
  --j-blue:#8FB3EC;--j-purple:#C9A6DC;--j-green:#6CCBB4;--j-brown:#E0A06A;
  --j-cover:#2C2820;
}
html[data-ink=blue] .j-main{--j-ink:#1F55C4}
html[data-ink=sepia] .j-main{--j-ink:#7A4A1E}
html[data-theme=dark][data-ink=blue] .j-main{--j-ink:#9DBDF0}
html[data-theme=dark][data-ink=sepia] .j-main{--j-ink:#E2AE7E}
html[data-cover=rust] .j-main{--j-cover:#8F3A1F;--j-cover-fg:#F6EBDD}
html[data-cover=navy] .j-main{--j-cover:#1F3F86;--j-cover-fg:#EEF1F8}
html[data-cover=olive] .j-main{--j-cover:#4D5A2A;--j-cover-fg:#F1F0E0}
html[data-cover=sand] .j-main{--j-cover:#CBB58A;--j-cover-fg:#191712}

.j-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.j-cur{display:inline-block;width:.5em;height:.82em;background:var(--acc);margin-left:.14em;vertical-align:-.04em;animation:jblink 1.05s steps(1) infinite}
@keyframes jblink{50%{opacity:0}}

/* ---------- settings */
.j-settings{margin-top:22px}
.j-settings details{border:1.5px solid var(--ink);background:var(--bg2);border-radius:5px}
.j-settings summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:8px 14px;min-height:46px;font:700 11px/1.3 "Space Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.j-settings summary::-webkit-details-marker{display:none}
.j-settings summary::after{content:"+";margin-left:auto;color:var(--j-acct);font-size:15px}
.j-settings details[open] summary::after{content:"–"}
.j-settings summary span{color:var(--j-mute);letter-spacing:.06em;text-transform:none;font-weight:400}
.j-bar{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;padding:14px;border-top:1px solid var(--line)}
.j-set{display:flex;align-items:center;gap:9px}
.j-setl{font:700 10.5px "Space Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.j-bar select,.j-bar input,.j-tog{font:700 12.5px "Space Mono",monospace;border:1.5px solid var(--ink);background:var(--bg);color:var(--ink);padding:0 10px;min-height:44px;border-radius:4px;cursor:pointer}
.j-bar input{width:76px;text-transform:uppercase;text-align:center;cursor:text}
.j-bar input::placeholder{color:var(--j-mute)}
.j-tog{min-width:64px}
.j-tog[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.j-sws{display:flex;gap:7px}
.j-sws button{width:44px;height:44px;border:1.5px solid var(--ink);border-radius:4px;background:var(--c);cursor:pointer;position:relative}
.j-sws button[aria-pressed=true]{outline:2px solid var(--acc);outline-offset:2px}
.j-sws button[aria-pressed=true]::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font:700 15px "Space Mono",monospace;color:var(--f)}

.j-warn{margin:14px 0 0;border-left:3px solid var(--acc);background:var(--bg2);padding:10px 14px;font-size:.85rem;color:var(--ink)}

/* ---------- the window */
.j-win{margin-top:22px}
.j-frame{border:1.5px solid var(--ink);border-radius:6px;background:var(--bg2);box-shadow:4px 4px 0 var(--ink)}
.j-tbar{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);padding:4px 6px 4px 14px;min-height:52px;border-radius:4px 4px 0 0;font:700 11.5px "Space Mono",monospace;letter-spacing:.2em}
.j-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
.j-ttl{flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j-saved{font-weight:400;letter-spacing:.04em;font-size:11px;white-space:nowrap}
.j-lockbtn{font:700 10.5px "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--bg);border-radius:99px;background:transparent;color:var(--bg);padding:0 16px;min-height:44px;cursor:pointer}
.j-lockbtn:hover{background:var(--bg);color:var(--ink)}
.j-lockbtn:focus-visible{outline-color:var(--bg)}
.j-desk{position:relative;padding:40px 70px 70px 44px;perspective:2400px}

/* ---------- the book (spread) */
.j-book{position:relative;margin:0 auto;width:100%;min-width:0;max-width:max(940px,calc((100vh - 170px) * 1.36));aspect-ratio:1.36/1;min-height:680px;transition:transform 1s cubic-bezier(.5,0,.2,1)}
/* 3D only while the cover moves: a flat book repaints reliably and keeps text crisp */
.j-book.j-3d{transform-style:preserve-3d}
.j-board{position:absolute;inset:-10px -12px;border:1.5px solid var(--ink);border-radius:6px;background:var(--j-cover);box-shadow:3px 3px 0 var(--ink);transition:opacity .5s}
.j-spread{position:absolute;inset:0;perspective:2400px;transition:opacity .4s .6s}
.jjs .j-book.closed{transform:translateX(-25%)}
.jjs .j-book.closed .j-board,.jjs .j-book.closed .j-spread{opacity:0;pointer-events:none}
.j-pages{position:absolute;inset:0}
.j-page{position:absolute;top:0;bottom:0;width:50%;background-color:var(--bg2);overflow:hidden;border:1.5px solid var(--ink);
  background-image:radial-gradient(circle,rgba(25,23,18,.17) 1px,transparent 1.4px);background-size:20px 20px;background-position:10px 8px}
html[data-theme=dark] .j-page{background-image:radial-gradient(circle,rgba(241,236,221,.14) 1px,transparent 1.4px)}
html[data-paper=line] .j-page{background-image:repeating-linear-gradient(180deg,transparent 0 calc(var(--j-L) - 1px),var(--line) calc(var(--j-L) - 1px) var(--j-L));background-size:auto;background-position:0 10px}
html[data-paper=grid] .j-page{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px;background-position:0 0}
html[data-paper=blank] .j-page{background-image:none}
.j-l{left:0;border-right:0;border-radius:4px 0 0 4px;box-shadow:inset -22px 0 26px -22px var(--sh)}
.j-r{right:0;border-left:0;border-radius:0 4px 4px 0;box-shadow:inset 22px 0 26px -22px var(--sh)}
.j-in{position:absolute;inset:0;padding:26px 62px 46px 38px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.j-r .j-in{padding:26px 40px 46px 40px}
.j-gutter{position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--line);z-index:4;pointer-events:none}
.j-ribbon{position:absolute;top:-10px;width:9px;height:calc(100% + 52px);clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%);z-index:7;pointer-events:none}
.j-r1{left:calc(50% - 40px);background:var(--acc)}
.j-r2{left:calc(50% - 26px);height:calc(100% + 30px);background:var(--j-mute)}
.j-pn{position:absolute;bottom:12px;font:400 11px "Space Mono",monospace;color:var(--j-mute)}
.j-l .j-pn{left:38px}.j-r .j-pn{right:40px}

/* fore-edge tabs */
.j-tabs{position:absolute;right:-48px;top:7%;display:flex;flex-direction:column;gap:6px;z-index:9}
.j-tabs button{writing-mode:vertical-rl;min-width:44px;min-height:92px;padding:12px 0;font:700 10.5px "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;border:1.5px solid var(--ink);border-left:0;border-radius:0 6px 6px 0;background:var(--bg2);color:var(--ink);cursor:pointer;transition:transform .2s,background .2s,color .2s}
.j-tabs button:hover{transform:translateX(2px)}
.j-tabs button[aria-selected=true]{background:var(--ink);color:var(--bg2);transform:translateX(4px)}
html:not(.jjs) .j-tabs{display:none}

/* the cover */
.j-cover{position:absolute;top:-10px;bottom:-10px;right:-12px;width:calc(50% + 12px);transform-origin:left center;transform-style:preserve-3d;z-index:20;transition:transform 1.5s cubic-bezier(.55,.05,.25,1),visibility 0s 0s}
html:not(.jjs) .j-cover,html:not(.jjs) .j-lockpanel{display:none}
.j-book.open .j-cover{transform:rotateY(-178deg);visibility:hidden;pointer-events:none;transition:transform 1.5s cubic-bezier(.55,.05,.25,1),visibility 0s 1.45s}
.j-face,.j-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1.5px solid var(--ink)}
.j-face{background-color:var(--j-cover);color:var(--j-cover-fg);border-radius:0 8px 8px 0;box-shadow:3px 3px 0 var(--ink);overflow:hidden;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.07),transparent 60%)}
.j-face::before{content:"";position:absolute;inset:16px 22px 16px 26px;border:1px solid color-mix(in srgb,var(--j-cover-fg) 22%,transparent);border-radius:3px;pointer-events:none}
.j-face::after{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent)}
.j-back{transform:rotateY(180deg);background:var(--bg2);border-radius:8px 0 0 8px}
.j-ctitle{position:absolute;left:0;right:0;top:30%;margin:0;text-align:center;font:700 clamp(22px,2.4vw,32px)/1.1 "Space Mono",monospace;letter-spacing:-.02em}
.j-ctitle b{color:var(--acc)}
html[data-cover=sand] .j-ctitle b{color:#8F3A1F}
html[data-cover=rust] .j-ctitle b,html[data-cover=navy] .j-ctitle b,html[data-cover=olive] .j-ctitle b{color:color-mix(in srgb,var(--acc) 45%,#fff)}
.j-csub{position:absolute;left:0;right:0;top:calc(30% + 50px);margin:0;text-align:center;font:400 10.5px "Space Mono",monospace;letter-spacing:.26em;color:color-mix(in srgb,var(--j-cover-fg) 80%,var(--j-cover))}
.j-cini{position:absolute;left:0;right:0;bottom:17%;margin:0;text-align:center;font:700 15px "Space Mono",monospace;letter-spacing:.4em;color:var(--j-cover-fg)}
.j-band{position:absolute;top:0;bottom:0;right:13%;width:44px;margin-right:-22px;border:0;background:none;padding:0;cursor:pointer;transition:transform .6s cubic-bezier(.5,0,.2,1),opacity .6s}
.j-band::before{content:"";position:absolute;top:0;bottom:0;left:16px;width:12px;background:var(--acc);border-left:1.5px solid #191712;border-right:1.5px solid #191712;transition:transform .25s}
.j-band:hover::before{transform:translateX(4px)}
.j-band:focus-visible{outline:3px solid var(--j-cover-fg);outline-offset:-3px}
.j-band.off{transform:translateX(90px);opacity:0;pointer-events:none}
.j-clasp{display:none;position:absolute;right:-14px;top:50%;width:52px;height:60px;margin-top:-30px;border:1.5px solid #191712;border-radius:6px;background:#F1ECDD;color:#191712;box-shadow:3px 3px 0 #191712;cursor:pointer;font:700 18px "Space Mono",monospace;z-index:3}
.j-clasp:hover{transform:translateX(-2px)}
.j-book.locked .j-clasp,.j-was-locked .j-clasp{display:block}
.j-book.locked .j-band,.j-was-locked .j-band{display:none}
.j-chint{position:absolute;left:0;right:0;bottom:7%;margin:0;padding:0 18%;text-align:center;font:400 11.5px/1.5 "Space Mono",monospace;color:color-mix(in srgb,var(--j-cover-fg) 82%,var(--j-cover))}
.j-lockpanel{display:none}

/* page turn */
.j-leaf{position:absolute;top:0;bottom:0;right:0;width:50%;transform-origin:left center;transform-style:preserve-3d;z-index:8;pointer-events:none;display:none}
.j-la,.j-lb{position:absolute;inset:0;background:var(--bg2);border:1.5px solid var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.j-la{box-shadow:inset 22px 0 26px -22px var(--sh)}
.j-lb{transform:rotateY(180deg);box-shadow:inset -22px 0 26px -22px var(--sh)}
.j-leaf.fwd{display:block;animation:jturn .9s cubic-bezier(.45,.05,.25,1) forwards}
.j-leaf.bwd{display:block;animation:jturnb .9s cubic-bezier(.45,.05,.25,1) forwards}
@keyframes jturn{0%{transform:rotateY(0)}50%{transform:rotateY(-90deg) skewY(-3deg)}100%{transform:rotateY(-180deg)}}
@keyframes jturnb{0%{transform:rotateY(-180deg)}50%{transform:rotateY(-90deg) skewY(3deg)}100%{transform:rotateY(0)}}

/* ---------- writing on the page */
.j-hd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--ink);padding-bottom:8px;margin:0 0 14px;min-height:36px;font:700 10.5px/1.3 "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase}
.j-hdr{color:var(--j-mute);letter-spacing:.06em;font-weight:400;text-align:right}
.j-hdn{display:flex;align-items:center;gap:4px}
.j-nb{width:44px;height:44px;margin:-6px 0;border:1px solid transparent;background:transparent;color:var(--ink);font:700 16px "Space Mono",monospace;border-radius:4px;cursor:pointer}
.j-nb:hover{border-color:var(--ink)}
.j-nb:disabled{opacity:.35;cursor:default;border-color:transparent}
.j-lbl{display:block;font:700 10px/1.4 "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--j-mute);margin:16px 0 5px}
.j-lbl.first{margin-top:0}
.j-txt{margin:0;font:400 14px/1.7 "JetBrains Mono",monospace;color:var(--ink)}
.j-txt a,.j-wl a,.j-empty a{color:var(--j-acct);text-decoration:underline;text-underline-offset:2px}
.j-parse{margin:4px 0 6px;font:500 clamp(16px,1.55vw,20px)/2.05 "JetBrains Mono",monospace;color:var(--ink)}
.j-parse span{white-space:nowrap}
.j-parse sup{font:700 .4em "Space Mono",monospace;letter-spacing:.08em;margin-left:2px;vertical-align:1.25em;text-transform:uppercase}
.t-noun>sup,.j-legend .t-noun,.t-propn>sup,.j-legend .t-propn{color:var(--j-acct)}
.t-verb>sup,.j-legend .t-verb,.t-aux>sup,.j-legend .t-aux{color:var(--j-blue)}
.t-adj>sup,.j-legend .t-adj,.t-num>sup,.j-legend .t-num{color:var(--j-green)}
.t-adv>sup,.j-legend .t-adv,.t-pron>sup,.j-legend .t-pron,.t-intj>sup,.j-legend .t-intj{color:var(--j-purple)}
.t-det>sup,.j-legend .t-det,.t-prep>sup,.j-legend .t-prep,.t-conj>sup,.j-legend .t-conj,.t-part>sup,.j-legend .t-part{color:var(--j-mute)}
.j-legend{display:flex;flex-wrap:wrap;gap:3px 14px;margin:0;font:400 10.5px "Space Mono",monospace}
.j-word{display:inline-block;border:1.5px solid var(--ink);padding:0 8px;font:700 14.5px "Space Mono",monospace;margin-right:4px}
.j-pos{font-style:normal;color:var(--j-mute);font-size:12px;margin-right:4px}
.j-ex{margin:6px 0 0;font:italic 400 13.5px/1.6 "JetBrains Mono",monospace;color:var(--soft)}
.j-wl{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font:400 13px "JetBrains Mono",monospace}
.j-wl a{display:inline-flex;align-items:center;min-height:44px}
.j-big{margin:6px 0 14px;font:700 clamp(17px,1.7vw,22px)/1.45 "Space Mono",monospace;color:var(--ink)}
.j-ns{color:var(--soft)}
.j-past{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:-4px 0 6px;font:400 12.5px "JetBrains Mono",monospace;color:var(--soft)}
.j-oneline{margin-top:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 80%,transparent)}
.j-oh{margin:0;color:var(--j-mute);border-bottom:1px solid var(--line);font:700 10px "Space Mono",monospace;letter-spacing:.18em;padding:6px 10px;text-transform:uppercase}
.j-oneline p.j-ol{margin:0;padding:8px 10px;font:400 14px/1.6 "JetBrains Mono",monospace;color:var(--j-ink)}
.j-oneline p.j-ol+p.j-oh{border-top:1px solid var(--line)}

.j-f{display:block;width:100%;height:var(--j-L);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font:400 15px "JetBrains Mono",monospace;color:var(--j-ink);padding:0 2px;margin:0 0 2px}
.j-f::placeholder{color:var(--j-mute);opacity:1}
.j-f:hover{border-bottom-color:var(--j-mute)}
.j-f:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
.j-pad{position:relative;height:calc(var(--j-L) * 7);margin-top:4px;border-left:2px solid var(--acc)}
.j-pad textarea,.j-pad .j-mir{position:absolute;top:0;bottom:0;left:10px;right:0;margin:0;padding:0 4px 0 0;border:0;font:400 15px/var(--j-L) "JetBrains Mono",monospace;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;tab-size:4;scrollbar-gutter:stable;letter-spacing:0}
.j-pad textarea{background:transparent;color:transparent;caret-color:var(--acc);resize:none;z-index:2;overflow-y:auto;width:auto;
  background-image:repeating-linear-gradient(180deg,transparent 0 calc(var(--j-L) - 1px),var(--line) calc(var(--j-L) - 1px) var(--j-L));background-attachment:local}
.j-pad textarea::selection{color:transparent;background:color-mix(in srgb,var(--acc) 30%,transparent)}
.j-pad textarea:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.j-pad .j-mir{color:var(--j-ink);pointer-events:none;overflow:hidden}
.j-pad .j-wet{color:var(--acc)}
.j-pad .j-dry{animation:jdry 1.2s ease forwards}
@keyframes jdry{from{color:var(--acc)}to{color:var(--j-ink)}}
.j-pad .j-ph{position:absolute;left:12px;top:0;font:400 15px/var(--j-L) "JetBrains Mono",monospace;color:var(--j-mute);pointer-events:none;z-index:1}
.j-pad .j-ph::after{content:"";display:inline-block;width:.55em;height:1em;background:var(--acc);vertical-align:-.15em;margin-left:4px;animation:jblink 1.05s steps(1) infinite}
.j-pad.plain textarea{color:var(--j-ink)}
.j-pad.plain textarea::selection{color:inherit}
.j-pad.plain .j-mir{display:none}

.j-mood{border:0;margin:16px 0 0;padding:0;min-width:0}
.j-mood legend{padding:0;font:700 10px/1.4 "Space Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--j-mute);margin-bottom:6px}
.j-moods{display:flex;flex-wrap:wrap;gap:6px}
.j-moods button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 9px;border:1px solid var(--line);border-radius:22px;background:transparent;color:var(--ink);font:400 12px "Space Mono",monospace;cursor:pointer}
.j-moods button i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;transform:scale(var(--s,1))}
.j-moods button:hover{border-color:var(--ink)}
.j-moods button[aria-pressed=true]{background:var(--ink);color:var(--bg2);border-color:var(--ink)}
.j-moods button[aria-pressed=true] i{background:currentColor}

.j-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 11px "Space Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);background:var(--ink);color:var(--bg2);padding:0 14px;min-height:44px;border-radius:4px;cursor:pointer;text-decoration:none}
.j-btn:hover{box-shadow:3px 3px 0 var(--acc)}
.j-btn.alt{background:transparent;color:var(--ink)}
.j-btn.alt:hover{box-shadow:3px 3px 0 var(--ink)}
.j-btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.j-btn.small{font-size:10px;padding:0 10px;letter-spacing:.1em}
.j-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* month */
.j-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.j-cal .w{font:700 10px "Space Mono",monospace;color:var(--j-mute);padding:2px 0 4px}
.j-cal button{position:relative;min-height:42px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ink);font:400 12.5px "Space Mono",monospace;cursor:pointer}
.j-cal button:hover{border-color:var(--line)}
.j-cal button:disabled{color:var(--j-mute);opacity:.55;cursor:default;border-color:transparent}
.j-cal button.j-on::after{content:"";position:absolute;left:50%;bottom:5px;width:6px;height:6px;margin-left:-3px;background:var(--acc)}
.j-cal button.j-today{border:1.5px solid var(--ink);font-weight:700}
.j-cal button.j-sel{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.j-ml{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:3/1;margin-top:2px;overflow:visible}
.j-ml text{font:400 9.5px "Space Mono",monospace;fill:var(--j-mute)}
.j-hab{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:2px}
.j-hab th,.j-hab td{padding:2px 1px;text-align:center;vertical-align:middle}
.j-hab thead th{font:700 9.5px/1.2 "Space Mono",monospace;color:var(--j-mute);letter-spacing:.04em}
.j-hab thead th small{display:block;font-weight:400}
.j-hab thead th.j-today{color:var(--ink)}
.j-hab tbody th{text-align:left;font:700 11px "Space Mono",monospace;letter-spacing:.04em}
.j-hab .hn{display:flex;align-items:center;gap:2px;min-width:0}
.j-hab .hn span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.j-hab .hx{flex:none;width:32px;height:32px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);cursor:pointer;font:700 13px "Space Mono",monospace}
.j-hab .hx.sure{background:var(--ink);color:var(--bg2);width:auto;padding:0 6px;font-size:10px}
.j-hab td button{width:100%;max-width:44px;height:40px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--bg2);cursor:pointer;font:700 13px "Space Mono",monospace}
.j-hab td button[aria-pressed=true]{background:var(--acc);border-color:var(--ink);color:#191712}
.j-hab td button:disabled{border-style:dashed;opacity:.4;cursor:default}
.j-hab td.ct{font:400 10.5px "Space Mono",monospace;color:var(--j-mute)}
.j-hadd{display:flex;gap:8px;margin-top:6px}
.j-hadd .j-f{flex:1;height:44px}

/* index */
.j-search{height:44px}
.j-idx{list-style:none;margin:6px 0 0;padding:0}
.j-idx button{display:flex;align-items:baseline;gap:8px;width:100%;min-height:44px;padding:10px 2px 6px;border:0;background:none;color:var(--ink);font:400 13.5px "JetBrains Mono",monospace;text-align:left;cursor:pointer}
.j-idx button:hover .t{text-decoration:underline}
.j-idx .d{flex:none;width:6.6em;color:var(--j-mute);font:400 11px "Space Mono",monospace}
.j-idx .t{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.j-idx i{flex:1 1 12px;min-width:12px;border-bottom:2px dotted var(--j-mute);transform:translateY(-4px)}
.j-idx b{flex:none;color:var(--j-acct);font-weight:700;font-size:12.5px}
.j-pager{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.j-empty{margin:8px 0 0;font:400 13.5px/1.7 "JetBrains Mono",monospace;color:var(--soft)}
.j-stats{display:grid;grid-template-columns:1fr auto;gap:2px 16px;margin:0;font:400 13px/1.9 "JetBrains Mono",monospace}
.j-stats dt{color:var(--soft)}
.j-stats dd{margin:0;font-weight:700;text-align:right}
.j-confirm{margin-top:10px;padding:10px 12px;border:1.5px solid var(--ink);background:var(--bg)}
.j-confirm p{margin:0 0 4px;font:400 13px/1.6 "JetBrains Mono",monospace}

/* pocket */
.j-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.j-cards li{border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 40%,transparent);padding:8px 10px;font:400 12.5px/1.5 "JetBrains Mono",monospace;color:var(--soft)}
.j-cards a{display:inline-block;font:700 13.5px "Space Mono",monospace;color:var(--j-acct);text-decoration:underline;text-underline-offset:2px;margin-bottom:2px;padding:4px 0}
.j-lines{list-style:none;margin:0;padding:0}
.j-lines li{border-left:2px solid var(--line);padding:3px 0 3px 10px;margin:8px 0;font:400 13.5px/1.6 "JetBrains Mono",monospace;color:var(--ink)}
.j-lines small{display:block;font:400 10.5px "Space Mono",monospace;color:var(--j-mute)}
.j-env{position:relative;margin:96px auto 0;width:86%;max-width:400px;aspect-ratio:1.6;border:1.5px solid var(--ink);background:var(--bg2)}
.j-env::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,transparent 49.4%,var(--ink) 49.6%,transparent 50.3%),linear-gradient(205deg,transparent 49.4%,var(--ink) 49.6%,transparent 50.3%);z-index:3;opacity:.25;pointer-events:none}
.j-env::after{content:"";position:absolute;left:-1.5px;right:-1.5px;bottom:-1.5px;height:58%;background:var(--bg2);border:1.5px solid var(--ink);border-top:0;z-index:2;clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,0 100%)}
.j-pcard{position:absolute;left:8%;right:8%;top:8%;bottom:12%;background:var(--bg);border:1.5px solid var(--ink);padding:12px;font:700 clamp(12.5px,1.25vw,15px)/1.45 "Space Mono",monospace;display:flex;align-items:center;justify-content:center;text-align:center;transition:transform .7s cubic-bezier(.3,1.4,.5,1);z-index:1;color:var(--ink)}
.j-pcard.out{transform:translateY(-58%) rotate(-2deg)}

/* ---------- below the book */
/* the section's shared mute and accent are a little light for small text; darken them on this page only */
.j-main .crumb,.j-main .crumb a,.j-main .row-h .n{color:var(--soft)}
.j-main .eyebrow,.j-main .relstrip .rk{color:color-mix(in srgb,var(--acc) 68%,#000)}
html[data-theme=dark] .j-main .eyebrow,html[data-theme=dark] .j-main .relstrip .rk{color:var(--j-acct)}
.j-note{margin-top:18px;color:var(--soft);font-size:.9rem}
.j-note b{color:var(--ink)}
.j-priv p{max-width:72ch;color:var(--soft);margin:0 0 12px;font-size:.92rem;line-height:1.75}
.j-priv b{color:var(--ink)}
.j-steps .st{font-size:1rem}
.j-main .faq .a p{margin:0}
.j-main .faq .a a{color:var(--j-acct);text-decoration:underline}

@media (min-width:900px){
  .j-in.j-flex{display:flex;flex-direction:column}
  .j-in.j-flex .j-pad{flex:1 1 auto;height:auto;min-height:calc(var(--j-L) * 5)}
}

/* ---------- mid widths: a taller book */
@media (max-width:1180px) and (min-width:900px){
  .j-book{aspect-ratio:1.18/1;min-height:700px}
  .j-desk{padding:36px 64px 66px 32px}
  .j-in{padding:22px 52px 44px 26px}.j-r .j-in{padding:22px 26px 44px 28px}
  .j-l .j-pn{left:26px}.j-r .j-pn{right:28px}
  .j-main{--j-L:30px}
}

/* ---------- phones and small tablets: the pages stack, no cover */
@media (max-width:899px){
  .j-desk{padding:14px 10px 18px;perspective:none}
  .j-book,.jjs .j-book.closed{transform:none;aspect-ratio:auto;min-height:0}
  .j-cover,.j-ribbon,.j-leaf,.j-board,.j-gutter{display:none!important}
  .j-spread,.j-pages{position:relative;inset:auto}
  .jjs .j-book.closed .j-spread{opacity:1;pointer-events:auto}
  .j-page{position:relative;width:100%;border:1.5px solid var(--ink)!important;border-radius:4px!important;margin-bottom:14px;box-shadow:none!important}
  .j-in,.j-r .j-in{position:relative;inset:auto;overflow:visible;padding:20px 18px 46px}
  .j-l{min-height:420px}.j-r{min-height:560px}
  .j-l .j-pn{left:18px}.j-r .j-pn{right:18px}
  .j-tabs{position:static;flex-direction:row;gap:6px;margin:0 0 12px}
  .j-tabs button{writing-mode:horizontal-tb;flex:1;min-height:44px;min-width:0;padding:0 4px;border:1.5px solid var(--ink);border-radius:6px}
  .j-tabs button:hover,.j-tabs button[aria-selected=true]{transform:none}
  .j-book.locked .j-spread,.j-was-locked .j-spread{display:none}
  .j-book.locked .j-lockpanel,.j-was-locked .j-lockpanel{display:block;border:1.5px solid var(--ink);border-radius:6px;background:var(--j-cover);color:var(--j-cover-fg);padding:40px 22px;text-align:center;min-height:420px}
  .j-lp-t{margin:40px 0 10px;font:700 22px "Space Mono",monospace}
  .j-lp-b{margin:0 auto 22px;max-width:34ch;font-size:.9rem;line-height:1.6}
  .j-lockpanel .btn{background:var(--j-cover-fg);color:var(--j-cover);border-color:var(--j-cover-fg)}
  .j-tbar{letter-spacing:.12em;gap:8px;padding-left:10px}
  .j-f,.j-pad textarea,.j-pad .j-mir,.j-pad .j-ph{font-size:16px}
  .j-main{--j-L:34px}
}
/* the section's nav is wider than a phone; on this page it scrolls sideways instead of being cut off */
@media (max-width:700px){
  .j-nav{gap:14px}
  .j-nav .nav-r{min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
  .j-nav .nav-r::-webkit-scrollbar{display:none}
  .j-nav .nav-r a,.j-nav .nav-r .status,.j-nav .nav-r .chip{flex:none}
}
@media (max-width:480px){
  .j-ttl{display:none}
  .j-saved{margin-right:auto}
  .j-bar{gap:12px 16px}
}

@media (prefers-reduced-motion:reduce){
  .j-cur,.j-pad .j-ph::after{animation:none}
  .j-book,.j-cover,.j-band,.j-spread,.j-board,.j-pcard,.j-tabs button,.j-band::before{transition:none!important}
  .j-book.open .j-cover{transition:none!important}
  .j-leaf{display:none!important}
}
@media print{
  .j-settings,.j-tbar,.j-tabs,.j-cover,.j-ribbon,.j-leaf,.j-board,.j-lockpanel,#how,#private,#faq{display:none!important}
  .j-frame{box-shadow:none;border:0}
  .j-book,.jjs .j-book.closed{transform:none;aspect-ratio:auto;min-height:0}
  .jjs .j-book.closed .j-spread{opacity:1}
  .j-spread,.j-pages,.j-in{position:relative;inset:auto;overflow:visible}
  .j-page{position:relative;width:100%;border:0!important;background:none!important;box-shadow:none!important}
}