/* =============================================================================
   journal.css — CHINA: THE OPEN-JAW CAMPAIGN — FIELD JOURNAL (keepsake layer)
   Dark lunarpunk / JRPG theme. Mobile-first. Self-contained (no CDN, no @import).
   Pairs with app/js/journal.js (ChinaJournal.init + mountEntry). Classes .jnl-*.
   NOT a honeymoon — travel-adventure framing only (Player 1 & Player 2).
   ============================================================================= */

/* palette scoped to every journal root node so it never clobbers the shell */
.jnl-scope{
  --jnl-abyss:#080611;
  --jnl-bg:#0b0819;
  --jnl-panel:#160f2b;
  --jnl-panel-2:#1d1538;
  --jnl-panel-3:#241a45;
  --jnl-line:#2c2154;
  --jnl-line-2:#443074;
  --jnl-ink:#ece7ff;
  --jnl-dim:#a99fd6;
  --jnl-dim-2:#6f6598;
  --jnl-mycel:#38e8d8;
  --jnl-moon:#cdb4ff;
  --jnl-spore:#8fe6c4;
  --jnl-gold:#f2c14e;
  --jnl-rose:#ff6b8a;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.jnl-scope *{box-sizing:border-box;}

/* lock body scroll while overlay open */
.jnl-locked{overflow:hidden;}

/* ---------------------------------------------------------------- FAB */
.jnl-fab{
  position:fixed; right:16px; z-index:120;
  bottom:calc(var(--app-nav-h,60px) + env(safe-area-inset-bottom,0px) + 16px);
  width:54px; height:54px; border-radius:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--jnl-ink); font-size:1.5rem; line-height:1;
  border:1px solid var(--jnl-line-2);
  background:
    radial-gradient(120% 120% at 30% 20%,rgba(56,232,216,.30),transparent 60%),
    linear-gradient(160deg,var(--jnl-panel-3),var(--jnl-panel));
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8), 0 0 18px -6px rgba(56,232,216,.5);
  transition:transform .14s ease, box-shadow .2s ease;
}
.jnl-fab:hover{box-shadow:0 14px 34px -8px rgba(0,0,0,.85), 0 0 24px -4px rgba(56,232,216,.75);}
.jnl-fab:active{transform:scale(.92);}
.jnl-fab-ic{filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));}
.jnl-fab-badge{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  border-radius:11px; background:var(--jnl-gold); color:#1a1206; font-weight:700;
  font-size:.66rem; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--jnl-abyss); box-shadow:0 0 10px -1px rgba(242,193,78,.7);
}

/* ------------------------------------------------------------ OVERLAY */
.jnl-overlay{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(6,4,14,.72); backdrop-filter:blur(5px);
  padding:0; align-items:stretch; justify-content:center;
}
.jnl-overlay.open{display:flex; animation:jnl-fade .2s ease;}
@keyframes jnl-fade{from{opacity:0}to{opacity:1}}
.jnl-sheet{
  width:100%; max-width:760px; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--jnl-bg),var(--jnl-abyss) 70%);
  border-left:1px solid var(--jnl-line); border-right:1px solid var(--jnl-line);
  color:var(--jnl-ink); max-height:100vh;
  animation:jnl-rise .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes jnl-rise{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.jnl-overlay.open,.jnl-sheet{animation:none;}}

.jnl-head{
  position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:10px;
  padding:12px 12px calc(12px) 12px;
  padding-top:calc(12px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(11,8,25,.98),rgba(11,8,25,.86));
  border-bottom:1px solid var(--jnl-line); backdrop-filter:blur(8px);
}
.jnl-head-txt{flex:1; min-width:0;}
.jnl-kicker{font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--jnl-mycel);}
.jnl-head-sub{font-size:.72rem; color:var(--jnl-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.jnl-head-actions{display:flex; align-items:center; gap:8px; position:relative;}
.jnl-back,.jnl-x{
  cursor:pointer; background:var(--jnl-panel-2); color:var(--jnl-dim);
  border:1px solid var(--jnl-line); border-radius:9px; width:34px; height:34px;
  font-size:.95rem; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.jnl-back:active,.jnl-x:active{transform:scale(.9);}

.jnl-scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.jnl-body{padding:12px 12px calc(30px + env(safe-area-inset-bottom,0px)); max-width:100%;}

/* ------------------------------------------------------------ buttons */
.jnl-btn{
  cursor:pointer; font-family:inherit; font-size:.72rem; letter-spacing:.02em;
  padding:.5rem .7rem; border-radius:9px; border:1px solid var(--jnl-line);
  background:var(--jnl-panel-2); color:var(--jnl-ink); transition:border-color .15s,transform .1s;
}
.jnl-btn:active{transform:scale(.95);}
.jnl-btn.primary{border-color:transparent; color:#04121a; font-weight:700;
  background:linear-gradient(90deg,var(--jnl-spore),var(--jnl-mycel));}
.jnl-btn.ghost{background:var(--jnl-panel); color:var(--jnl-dim);}
.jnl-btn.ghost:hover{border-color:var(--jnl-mycel); color:var(--jnl-mycel);}
.jnl-btn.danger{background:#2a0f18; border-color:#5a2130; color:var(--jnl-rose);}

/* export dropdown */
.jnl-export-menu{
  position:absolute; top:42px; right:0; z-index:6; min-width:210px;
  background:var(--jnl-panel-2); border:1px solid var(--jnl-line-2); border-radius:11px;
  overflow:hidden; box-shadow:0 16px 40px -12px rgba(0,0,0,.85);
}
.jnl-export-menu button{
  display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  padding:.7rem .8rem; font-size:.74rem; color:var(--jnl-ink);
  background:none; border:0; border-bottom:1px solid var(--jnl-line);
}
.jnl-export-menu button:last-child{border-bottom:0;}
.jnl-export-menu button:hover{background:var(--jnl-panel-3); color:var(--jnl-mycel);}

/* --------------------------------------------------------- zone tabs */
.jnl-tabs{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch;}
.jnl-tabs::-webkit-scrollbar{height:0;}
.jnl-tab{
  cursor:pointer; font-family:inherit; flex:0 0 auto; white-space:nowrap;
  font-size:.68rem; letter-spacing:.02em; padding:.46rem .68rem; border-radius:20px;
  border:1px solid var(--jnl-line); background:var(--jnl-panel); color:var(--jnl-dim);
}
.jnl-tab b{color:var(--jnl-gold); margin-left:4px; font-size:.62rem;}
.jnl-tab.on{border-color:var(--jnl-mycel); color:var(--jnl-ink);
  background:linear-gradient(180deg,var(--jnl-panel-3),var(--jnl-panel));
  box-shadow:0 0 0 1px rgba(56,232,216,.25) inset;}

/* ------------------------------------------------------------- stats */
.jnl-stats{display:flex; gap:10px; margin:2px 0 14px;}
.jnl-stat{
  flex:1; text-align:center; padding:8px 4px; border-radius:11px;
  background:var(--jnl-panel); border:1px solid var(--jnl-line);
}
.jnl-stat b{display:block; font-size:1.2rem; color:var(--jnl-moon); line-height:1.1;}
.jnl-stat span{font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--jnl-dim-2);}

/* ----------------------------------------------------------- headings */
.jnl-h3{font-size:.82rem; letter-spacing:.02em; color:var(--jnl-spore); margin:16px 0 8px;}
.jnl-h3.dim{color:var(--jnl-dim-2); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; margin-top:22px;}

/* ---------------------------------------------------------- composer */
.jnl-composer{
  background:var(--jnl-panel); border:1px solid var(--jnl-line); border-radius:13px;
  padding:10px; margin-bottom:12px;
}
.jnl-authors{display:flex; gap:6px; margin-bottom:8px;}
.jnl-auth{
  cursor:pointer; font-family:inherit; font-size:.64rem; padding:.32rem .56rem; border-radius:8px;
  border:1px solid var(--jnl-line); background:var(--jnl-panel-2); color:var(--jnl-dim);
}
.jnl-auth.on{border-color:var(--jnl-mycel); color:var(--jnl-ink); background:var(--jnl-panel-3);}
.jnl-ta{
  width:100%; resize:vertical; min-height:44px; font-family:inherit; font-size:.82rem;
  color:var(--jnl-ink); background:var(--jnl-abyss); border:1px solid var(--jnl-line);
  border-radius:9px; padding:8px 10px; line-height:1.45;
}
.jnl-ta:focus{outline:none; border-color:var(--jnl-mycel); box-shadow:0 0 0 2px rgba(56,232,216,.15);}
.jnl-ta::placeholder{color:var(--jnl-dim-2);}
.jnl-composer-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.jnl-cstatus{font-size:.66rem; color:var(--jnl-mycel);}
.jnl-file{display:none;}

/* ------------------------------------------------------------ entries */
.jnl-entries{display:block; margin-bottom:6px;}
.jnl-empty{color:var(--jnl-dim-2); font-size:.74rem; padding:14px 4px; text-align:center; line-height:1.6;}
.jnl-empty.big{padding:44px 16px; font-size:.8rem;}

.jnl-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:7px; margin:4px 0 12px;
}
.jnl-thumb{
  cursor:pointer; position:relative; padding:0; border:1px solid var(--jnl-line); border-radius:10px;
  overflow:hidden; background:var(--jnl-abyss); aspect-ratio:1/1; display:block;
}
.jnl-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.jnl-thumb:active{transform:scale(.97);}
.jnl-thumb-cap{
  position:absolute; left:0; right:0; bottom:0; padding:3px 5px; font-size:.56rem;
  color:var(--jnl-ink); background:linear-gradient(180deg,transparent,rgba(6,4,14,.85));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
}

.jnl-note{
  position:relative; background:var(--jnl-panel-2); border:1px solid var(--jnl-line);
  border-radius:11px; padding:9px 30px 9px 11px; margin:7px 0;
}
.jnl-note-meta{display:flex; justify-content:space-between; gap:8px; margin-bottom:3px;}
.jnl-note-au{color:var(--jnl-mycel); font-size:.68rem; font-weight:600;}
.jnl-note-ts{color:var(--jnl-dim-2); font-size:.62rem;}
.jnl-note-txt{font-size:.82rem; color:var(--jnl-ink); line-height:1.5; word-break:break-word;}
.jnl-note-del{
  position:absolute; top:7px; right:7px; cursor:pointer; width:20px; height:20px;
  border-radius:6px; border:0; background:none; color:var(--jnl-dim-2); font-size:.7rem; line-height:1;
}
.jnl-note-del:hover{color:var(--jnl-rose);}

/* -------------------------------------------------------- zone / card view */
.jnl-cardblock{margin:7px 0;}
.jnl-cardblock-head{
  width:100%; cursor:pointer; font-family:inherit; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 12px; border-radius:11px; border:1px solid var(--jnl-line);
  background:var(--jnl-panel); color:var(--jnl-ink);
}
.jnl-cardblock-head:hover{border-color:var(--jnl-line-2);}
.jnl-cb-title{font-size:.8rem; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.jnl-cb-sum{font-size:.64rem; color:var(--jnl-dim-2); flex:0 0 auto;}

.jnl-cardview-head{margin:4px 0 12px;}
.jnl-cv-title{font-size:1rem; color:var(--jnl-gold); letter-spacing:.01em;}
.jnl-cv-zone{font-size:.68rem; color:var(--jnl-dim); margin-top:2px;}

/* ---------------------------------------------------------- timeline */
.jnl-daysep{
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--jnl-dim-2);
  margin:16px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--jnl-line);
}
.jnl-tl{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:start; margin:8px 0;}
.jnl-tl-scope{
  cursor:pointer; font-family:inherit; grid-row:1; align-self:start;
  font-size:.58rem; padding:.3rem .5rem; border-radius:8px; max-width:120px;
  border:1px solid var(--jnl-line); background:var(--jnl-panel); color:var(--jnl-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
}
.jnl-tl-scope:hover{border-color:var(--jnl-mycel); color:var(--jnl-mycel);}
.jnl-tl-note{
  font-size:.8rem; color:var(--jnl-ink); line-height:1.45; word-break:break-word;
  background:var(--jnl-panel-2); border:1px solid var(--jnl-line); border-radius:10px; padding:8px 10px;
}
.jnl-tl-note .jnl-note-au{font-size:.8rem;}
.jnl-tl-pic{cursor:pointer; padding:0; border:1px solid var(--jnl-line); border-radius:10px; overflow:hidden; background:var(--jnl-abyss); max-width:150px;}
.jnl-tl-pic img{width:100%; height:auto; max-height:150px; object-fit:cover; display:block;}
.jnl-tl-ts{font-size:.6rem; color:var(--jnl-dim-2); white-space:nowrap; align-self:start;}

/* ----------------------------------------------------------- lightbox */
.jnl-light{
  position:fixed; inset:0; z-index:240; display:flex; flex-direction:column;
  background:rgba(4,3,10,.94); backdrop-filter:blur(4px); animation:jnl-fade .16s ease;
}
.jnl-light-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;
}
.jnl-light-meta{font-size:.68rem; color:var(--jnl-dim);}
.jnl-light-x{
  cursor:pointer; width:36px; height:36px; border-radius:9px; font-size:1rem;
  background:var(--jnl-panel-2); color:var(--jnl-ink); border:1px solid var(--jnl-line);
}
.jnl-light-stage{flex:1; display:flex; align-items:center; justify-content:center; padding:0 12px; min-height:0;}
.jnl-light-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;}
.jnl-light-foot{
  display:flex; gap:8px; padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));
}
.jnl-light-cap{
  flex:1; font-family:inherit; font-size:.78rem; color:var(--jnl-ink);
  background:var(--jnl-abyss); border:1px solid var(--jnl-line); border-radius:9px; padding:8px 10px;
}
.jnl-light-cap:focus{outline:none; border-color:var(--jnl-mycel);}

/* ------------------------------------------- card-back hook (mountEntry) */
.jnl-hook{
  margin:8px 0 2px; padding-top:8px; border-top:1px dashed var(--jnl-line);
  display:flex; flex-direction:column; gap:3px;
}
.jnl-hook-btn{
  cursor:pointer; font-family:inherit; width:100%; text-align:center;
  font-size:.72rem; letter-spacing:.02em; padding:.5rem .6rem; border-radius:9px;
  border:1px dashed var(--jnl-line-2); background:var(--jnl-panel-2); color:var(--jnl-dim);
  transition:border-color .15s,color .15s,transform .1s;
}
.jnl-hook-btn:hover{border-color:var(--jnl-mycel); color:var(--jnl-mycel);}
.jnl-hook-btn:active{transform:scale(.97);}
.jnl-hook-btn b{color:var(--jnl-gold); margin-left:4px;}
.jnl-hook-ic{margin-right:3px;}
.jnl-hook.has .jnl-hook-btn{
  border-style:solid; border-color:var(--jnl-mycel); color:var(--jnl-ink);
  background:linear-gradient(180deg,var(--jnl-panel-3),var(--jnl-panel-2));
}
.jnl-hook-sum{font-size:.58rem; color:var(--jnl-dim-2); text-align:center;}

/* inline launcher (opts.mount host, e.g. a nav view slot) */
.jnl-inline-open{
  cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px;
  margin:14px; padding:.7rem 1rem; border-radius:12px; font-size:.82rem; color:var(--jnl-ink);
  border:1px solid var(--jnl-line-2);
  background:linear-gradient(160deg,var(--jnl-panel-3),var(--jnl-panel));
  box-shadow:0 0 18px -8px rgba(56,232,216,.5);
}
.jnl-inline-open:active{transform:scale(.97);}

/* -------------------------------------------------- light theme guard
   the app ships dark-only, but if a viewer forces light we keep contrast. */
@media (prefers-color-scheme:light){
  :root[data-theme="light"] .jnl-scope{
    --jnl-bg:#0b0819; /* journal deliberately stays nocturnal — lunarpunk keepsake */
  }
}