/* The expedition journal (src/expedition-journal.js): the user's leather book over the cabin's room, laid
   out on a desk (.ej.desk) in the book's own pixels (1670 x 941, "design px", the user's blank book), from
   their mock-up (design/camp/cabin/journal/mockups/journal-whiteout.png, which lies on the book within 2 px:
   its measurements less 2 px are the book's); scaled whole to the page. On a phone (.ej.stack) the same
   parts stack and scroll. Measurements: design/camp/cabin/journal/README.md. */
.ej{--ej-serif:"Crimson Text","Gowun Batang",Georgia,serif;--ej-ink:#1c1611;--ej-body:#3a2f26;--ej-quiet:#8d745b;--ej-cream:#f3d9b5;
  position:absolute;inset:0;z-index:9;opacity:0;transition:opacity .28s ease;font-family:var(--ej-serif);color:var(--ej-ink)}
.ej.on{opacity:1}
.ej.off{opacity:0;pointer-events:none;transition-duration:.22s}
.ej button{font-family:var(--ej-serif);line-height:1}
.ej-frame{position:absolute;left:0;top:0;width:1670px;height:941px;transform-origin:0 0}
.ej-book,.ej-ink{position:absolute;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.ej-book{left:0;top:0;width:1670px;height:941px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
/* the mock-up's pencil drawing (cut from it: scripts/cabin/build-journal.py) */
.ej-ink{left:1280px;top:584px;width:274px;height:252px}
/* an icon of the user's in any colour: its shape as a mask */
.ej-icon{display:block;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}

/* ---- the cover (left): the title, the episodes three at a time, the selected one's runs ---- */
.ej-title{display:flex;align-items:center;gap:20px;margin:0;color:var(--ej-cream);font-weight:600;font-size:24px;line-height:1.02;letter-spacing:.01em}
.ej-title img{width:46px;height:auto;flex:none}
.ej-title span span{display:block}
:lang(ko) .ej-title{font-size:30px}
.ej-arrows{display:flex;align-items:center;gap:6px}
.ej-arrows i{flex:1;height:0;border-top:1px solid rgba(0,0,0,.7);border-bottom:1px solid rgba(255,214,170,.1)}
.ej-arrow{flex:none;width:62px;height:34px;padding:0;border:0;background:none;cursor:pointer;transition:filter .15s,transform .15s}
.ej-arrow img{display:block;width:100%;height:100%;object-fit:contain}
.ej-arrow.down img{transform:scaleY(-1)}
.ej-arrow:hover:not(:disabled){filter:brightness(1.18)}
.ej-arrow:active:not(:disabled){transform:translateY(1px)}
.ej-arrow.off{display:none}
.ej-arrows:has(.ej-arrow.off){gap:0}
.ej-list{overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none}
.ej-list::-webkit-scrollbar{display:none}
.ej-ep{position:relative;display:grid;grid-template-columns:84px 1fr;grid-template-rows:1fr auto 1fr;align-items:center;width:100%;height:76px;padding:0;border:0;background:none;text-align:left;cursor:pointer;scroll-snap-align:start;color:#ecd3b2}
.ej-ep .ej-icon{grid-row:1/4;justify-self:center;width:52px;height:38px;margin-left:-8px;color:#eed4b0}
.ej-ep-t{grid-row:1;align-self:end;font-weight:600;font-size:22px;letter-spacing:.005em;white-space:nowrap;color:#ecd3b2}
.ej-ep-s{grid-row:2;margin-top:3px;line-height:1.25;font-weight:600;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:#a8906f;white-space:nowrap;overflow:hidden;padding-right:8px}
/* the line between two episodes that aren't selected */
.ej-ep::after{content:"";position:absolute;left:10px;right:10px;bottom:0;border-top:1px solid rgba(0,0,0,.7);border-bottom:1px solid rgba(255,214,170,.09)}
.ej-ep:last-child::after,.ej-ep.sel::after,.ej-ep:has(+ .ej-ep.sel)::after{display:none}
.ej-ep.sel{z-index:1}
.ej-ep.sel::before{content:"";position:absolute;inset:1px 0;z-index:-1;border-radius:8px;border:2px solid #d9a655;background:linear-gradient(180deg,#7c4a1d,#5e3616);box-shadow:inset 0 1px 0 rgba(255,228,170,.28),inset 0 0 0 1px rgba(60,30,10,.4),0 3px 8px rgba(0,0,0,.45)}
.ej-ep.sel .ej-ep-t{color:#fff1dc}
.ej-ep.sel .ej-ep-s{color:#dcbb8c}
.ej-ep:not(.sel):hover .ej-ep-t{color:#fff1dc}
.ej-pos{margin:0;text-align:center;font-size:19px;letter-spacing:.04em;color:#b19272}
.ej-rule{display:block;border-top:1px solid rgba(0,0,0,.75);border-bottom:1px solid rgba(255,214,170,.1)}
.ej-recent{margin:0;font-weight:600;font-size:21px;color:#f6e1bb}
.ej-recent-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ej-rpos{margin:0;font-size:14px;letter-spacing:.03em;color:#b19272;white-space:nowrap}
/* the runs scroll like the episodes: three rows showing, snapping to whole rows */
.ej-runs{display:grid;grid-auto-rows:58px;row-gap:1px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none}
.ej-runs::-webkit-scrollbar{display:none}
.ej-run{position:relative;display:block;width:100%;height:58px;scroll-snap-align:start;padding:0;border:1px solid rgba(0,0,0,.6);border-radius:6px;background:rgba(0,0,0,.14);box-shadow:inset 0 1px 0 rgba(255,214,170,.05);text-align:left;cursor:pointer}
.ej-run.sel{border:2px solid #e6ae4a;background:#2b1a10;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4)}
.ej-run:not(.sel):hover{background:rgba(255,220,180,.05)}
.ej-dot{position:absolute;left:11px;top:20px;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 -2px 3px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.35)}
.ej-dot.dead{background:#f24436}
.ej-dot.alive{background:#67bb52}
.ej-run-t{position:absolute;left:44px;top:7px;line-height:1.3;right:24px;font-weight:500;font-size:18.5px;color:#efe8d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ej-run-s{position:absolute;left:44px;top:33px;line-height:1.3;right:8px;font-size:12.5px;color:#a08771;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ej-chev{position:absolute;right:9px;top:19px;width:9px;height:17px;fill:none;stroke:#f2c45a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:none}
.ej-run.sel .ej-chev{display:block}
.ej-run.sel .ej-run-s{right:24px}
.ej-none{margin:6px 0 0 8px;font-size:15px;color:#a08771}
.ej-arrow:focus-visible,.ej-ep:focus-visible,.ej-run:focus-visible,.ej-x:focus-visible{outline:2px solid #f0c27a;outline-offset:2px}

/* ---- the pages: the record (left), the summary (right) ---- */
.ej-page{color:var(--ej-ink)}
.ej-eyebrow{display:flex;align-items:center;gap:13px;margin:0;font-weight:600;font-size:18px;letter-spacing:.1em;color:#1d1712}
.ej-eyebrow .ej-icon{width:44px;height:23px;color:#2a1f17}
.ej-kicker{margin:0;font-size:12px;letter-spacing:.27em;color:var(--ej-quiet);text-transform:uppercase;white-space:nowrap}
.ej-h1{margin:0;font-weight:700;font-size:42px;line-height:1.3;letter-spacing:-.005em;white-space:nowrap;overflow:hidden}
.ej-h1:focus{outline:none}
.ej-h1.ej-empty{font-weight:600;color:#3a2f26}
.ej-empty-sub{margin:0;font-size:25px;line-height:1.3;color:#6d5a47}
/* the user's drawing, cut off its paper so it's drawn on the page (scripts/cabin/build-journal.py) */
.ej-empty-art{display:block;width:100%;height:auto}
/* on a desk the words sit a fifth of the book's height lower than a run's title (the user), the drawing under them */
.ej.desk .ej-h1.ej-empty{top:213px}
.ej.desk .ej-empty-sub{position:absolute;left:63px;top:271px;width:500px}
.ej.desk .ej-empty-art{position:absolute;left:52px;top:338px;width:486px}
.ej-verdict{margin:0;font-size:29px;line-height:1}
.ej-verdict.dead{color:#8a1a0e}
.ej-verdict.alive{color:#2f6a35}
.ej-hr{display:block;height:0;border-top:1.5px solid rgba(120,88,56,.38)}
.ej-stats{display:grid;grid-template-columns:113px 147px 143px 1fr;margin:0}
.ej-stats>div{min-width:0}
.ej-stats>div+div{border-left:1.5px solid rgba(120,88,56,.28);padding-left:22px}
.ej-stats dt{font-weight:600;font-size:12.5px;letter-spacing:.16em;color:#826850;white-space:nowrap}
.ej-stats dd{margin:9px 0 0;font-size:20px;color:#332920;white-space:nowrap}
.ej-type{display:inline-block;padding:4px 10px 3px;border:1.6px solid #98541d;border-radius:2px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#3a2a1c}
:lang(ko) .ej-type{letter-spacing:.04em}
/* Korean doesn't take the wide letter-spacing of the small capitals */
:lang(ko) .ej-kicker{letter-spacing:.14em;font-size:12.5px}
:lang(ko) .ej-stats dt{letter-spacing:.06em;font-size:13px}
:lang(ko) .ej-ep-s{letter-spacing:.06em}
:lang(ko) .ej-run-t{font-size:17.5px}
.ej-map{filter:drop-shadow(0 2px 3px rgba(60,35,15,.35))}
.ej-map svg{display:block;width:100%;height:100%}
.ej-failed{font-size:16px;color:#8a1a0e}
.ej-right{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(110,80,50,.35) transparent}
.ej-sec h2{display:flex;align-items:center;gap:17px;margin:0 0 0 -7px;font-weight:700;font-size:28px;line-height:1;color:var(--ej-ink)}
.ej-sec h2 img,.ej-sec h2 svg{flex:none;display:block}
.ej-route-i{width:26px;height:24px;color:#2a1f17}
.ej-signs h2 img{width:32px;height:auto}
.ej-outcome h2 img{width:30px;height:auto}
.ej-out-i{width:30px;height:30px;color:#c3901f}
.ej-route p{margin:12px 0 0;font-size:19px;line-height:1.38;color:#3f342b}
.ej-arrow-t{color:#5a4a3c}
.ej-signs ul{margin:14px 0 0;padding:0 0 0 4px;list-style:none}
.ej-signs li{position:relative;margin:0 0 4px;padding-left:17px;font-size:17px;line-height:24px;color:#3f332a}
.ej-signs li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:#a04705}
.ej-quiet{margin:12px 0 0;font-size:17px;color:var(--ej-quiet)}
.ej-outcome p{margin:13px 0 0;font-size:17px;line-height:24px;color:#372b22}
.ej-outcome .ej-status{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:14px}
.ej-st{white-space:nowrap}
.ej-st i{font-style:normal;color:#6d5a47;margin-right:7px}
.ej-st b{font-weight:700}
.ej-st em,.ej-km em{font-style:normal;color:#8d745b}
.ej-st b.alive{color:#2f7a37}
.ej-st b.dead{color:#a3200f}
.ej-st b.hurt{color:#b0640c}
.ej-st b.plain{font-weight:600;color:#4a3b2e}
.ej-outcome .ej-km{margin-top:4px;font-size:16px;color:#6d5a47}
.ej-outcome p.ej-line{margin-top:11px}
/* a long right page (src/expedition-journal.js fitRight): smaller, the signs folded */
.ej-right.dense .ej-route p{font-size:17px}
.ej-right.dense .ej-signs li,.ej-right.dense .ej-outcome p{font-size:15.5px;line-height:21px}
.ej-right.dense .ej-signs li{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ej-right.dense .ej-signs li::before{top:7px}
.ej-right.dense .ej-hr{margin-top:18px}
.ej-right.dense .ej-signs,.ej-right.dense .ej-outcome{margin-top:16px}
.ej-right.denser .ej-signs li,.ej-right.denser .ej-outcome p{font-size:14.5px;line-height:19.5px}
.ej-right.denser .ej-signs li{-webkit-line-clamp:2;margin-bottom:3px}
.ej-right.denser .ej-outcome p{margin-top:9px}
.ej-x{display:grid;place-items:center;width:48px;height:46px;padding:0;border:2px solid rgba(212,153,103,.82);border-radius:8px;background:#16100d;box-shadow:0 3px 10px rgba(0,0,0,.45);cursor:pointer}
.ej-x svg{width:22px;height:22px;fill:none;stroke:#f4ead9;stroke-width:3;stroke-linecap:round}
.ej-x:hover{background:#2a1d15}

/* ---- on a desk: everything where the book has room for it ---- */
.ej.desk .ej-side>*,.ej.desk .ej-page,.ej.desk .ej-x{position:absolute}
.ej.desk .ej-title{left:134px;top:86px;height:52px}
.ej.desk .ej-arrows.eu{left:126px;top:145px;width:192px;height:36px}
.ej.desk .ej-list{left:119px;top:192px;width:209px;height:228px}
.ej.desk .ej-arrows.ed{left:126px;top:425px;width:192px;height:36px}
.ej.desk .ej-pos{left:119px;top:466px;width:209px}
.ej.desk .ej-rule{left:128px;top:497px;width:188px}
.ej.desk .ej-recent-row{left:132px;top:512px;width:184px}
.ej.desk .ej-arrows.ru{left:126px;top:540px;width:192px;height:36px}
.ej.desk .ej-runs{left:125px;top:580px;width:195px;height:176px}
.ej.desk .ej-arrows.rd{left:126px;top:760px;width:192px;height:36px}
.ej.desk .ej-left{left:360px;top:96px;width:590px;height:730px}
.ej.desk .ej-left>*{position:absolute}
.ej.desk .ej-left .ej-eyebrow{left:59px;top:14px}
.ej.desk .ej-left .ej-kicker{right:37px;top:9px}
.ej.desk .ej-h1{left:63px;top:50px;width:500px}
.ej.desk .ej-verdict{left:63px;top:105px}
.ej.desk .ej-left .ej-hr{left:63px;top:145px;width:497px}
.ej.desk .ej-stats{left:63px;top:158px;width:498px}
.ej.desk .ej-map{left:22px;top:236px;width:560px}
.ej.desk .ej-right{left:996px;top:96px;width:506px;height:732px;box-sizing:border-box;padding:56px 12px 24px 17px}
.ej.desk .ej-right .ej-kicker{position:absolute;right:14px;top:23px}
.ej.desk .ej-right .ej-hr{margin:24px -12px 0 -17px}
.ej.desk .ej-right .ej-hr.short{margin-right:72px}
.ej.desk .ej-signs{margin-top:21px}
.ej.desk .ej-outcome{margin-top:22px}
.ej.desk .ej-x{left:1520px;top:60px}
.ej.desk .ej-none{position:static}

/* ---- on a phone (or a window near square): the parts stack and scroll ---- */
.ej.stack{overflow-y:auto;overscroll-behavior:contain;background:rgba(14,9,6,.94)}
.ej.stack .ej-frame{position:relative;width:auto;height:auto;transform:none!important;display:flex;flex-direction:column;gap:12px;padding:calc(var(--safe-t,0px) + 12px) 12px calc(var(--safe-b,0px) + 28px)}
.ej.stack .ej-book,.ej.stack .ej-ink,.ej.stack .ej-arrows,.ej.stack .ej-pos,.ej.stack .ej-rule{display:none}
.ej.stack .ej-side{display:flex;flex-direction:column;gap:12px;padding:16px 14px 14px;border-radius:16px;background:linear-gradient(180deg,#2c1a10,#1b100a);border:1.5px solid rgba(201,138,69,.45);box-shadow:inset 0 1px 0 rgba(255,214,170,.08)}
.ej.stack .ej-title{gap:14px;font-size:22px;padding-right:56px}
.ej.stack .ej-title span span{display:inline}
.ej.stack .ej-title img{width:36px}
.ej.stack .ej-list{display:flex;gap:8px;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:0 -14px;padding:2px 14px}
.ej.stack .ej-ep{flex:none;width:auto;height:58px;grid-template-columns:44px auto;padding:0 16px 0 6px;border-radius:10px;scroll-snap-align:start;background:rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.55)}
.ej.stack .ej-ep::after{display:none}
.ej.stack .ej-ep .ej-icon{width:34px;height:26px;margin-left:0}
.ej.stack .ej-ep-t{font-size:19px}
.ej.stack .ej-ep-s{font-size:10.5px;margin-top:4px}
.ej.stack .ej-ep.sel{background:none;border-color:transparent}
.ej.stack .ej-ep.sel::before{inset:0}
.ej.stack .ej-recent{font-size:17px;margin-top:2px}
/* the runs on a phone: the same three rows, swiped up and down, with their arrows */
.ej.stack .ej-runs{height:176px}
.ej.stack .ej-arrows.ru,.ej.stack .ej-arrows.rd{display:flex;height:34px;margin:-4px 0}
.ej.stack .ej-runs:has(.ej-none){height:auto}
.ej.stack .ej-side:has(.ej-none) .ej-arrows.ru,.ej.stack .ej-side:has(.ej-none) .ej-arrows.rd{display:none}
.ej.stack .ej-page{position:relative;border-radius:12px;padding:20px 16px 22px;background:radial-gradient(ellipse at 50% 35%,#efdcc0 0%,#e7d0af 65%,#d8bc94 100%);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ej.stack .ej-left{display:flex;flex-direction:column;gap:10px}
.ej.stack .ej-left .ej-kicker{order:-1}
.ej.stack .ej-h1{font-size:34px;white-space:normal}
.ej.stack .ej-verdict{font-size:22px}
.ej.stack .ej-stats{grid-template-columns:repeat(2,1fr);row-gap:14px;margin-top:4px}
.ej.stack .ej-stats>div{border-left:0;padding-left:0}
.ej.stack .ej-stats>div:nth-child(2n){border-left:1.5px solid rgba(120,88,56,.28);padding-left:14px}
.ej.stack .ej-stats dd{font-size:18px}
.ej.stack .ej-map{margin-top:6px}
.ej.stack .ej-right .ej-kicker{margin-bottom:14px}
.ej.stack .ej-right .ej-hr{margin:20px 0 0}
.ej.stack .ej-signs,.ej.stack .ej-outcome{margin-top:18px}
.ej.stack .ej-sec h2{font-size:24px;margin-left:0}
.ej.stack .ej-route p{font-size:17px}
/* an episode with no runs yet: on a phone, no empty summary card */
.ej.stack.empty .ej-right{display:none}
.ej.stack .ej-x{position:fixed;top:calc(var(--safe-t,0px) + 22px);right:22px;z-index:2;transform:scale(.85)}
@media (prefers-reduced-motion:reduce){.ej{transition:none}}