/* ---------------------------------------------------------------------------
   THE JOURNAL BOOK (2026-07-21, from Dexter's mockup) — layout for the
   two-page journal drawn by js/ui/journalBook.js.

   Deliberately its own stylesheet, not more of ui.css: the book is one
   self-contained surface, and ui.css was being rewritten by a concurrent
   HUD v2 pass on the same day (Master Doc §8 — no concurrent editing).
   Palette, card grammar and type scale are the game's existing ones; only
   the arrangement is new.
--------------------------------------------------------------------------- */

.panel.jbook { width:min(880px, 100%); max-height:min(84vh, 680px); }
.jbook-body { display:flex; gap:12px; align-items:stretch; }

/* ---- the tab rail ---- */
.jtabs { display:flex; flex-direction:column; gap:6px; flex:0 0 138px; }
.jtab {
  display:flex; align-items:center; gap:8px; position:relative;
  text-align:left; cursor:pointer; width:100%;
  border:2px solid rgb(43 32 25 / .1); background:var(--cream-100);
  border-radius:14px; padding:9px 11px;
  font-family:var(--font-display); font-weight:800; font-size:13.5px;
  color:var(--muted);
}
.jtab .jtab-i { font-size:17px; line-height:1; }
.jtab .jtab-l { flex:1; }
.jtab:hover { background:var(--cream-200); }
.jtab.on {
  background:var(--forest-600); color:var(--cream-50);
  border-color:var(--forest-700); box-shadow:var(--pop-sm);
}
/* a tab with nothing on its page yet simply rests quieter — never disabled,
   never a "0" (E4: an empty page is a page you haven't lived yet) */
.jtab.quiet:not(.on) { opacity:.5; }

/* ---- the two pages ---- */
.jpages { flex:1; display:flex; gap:12px; min-width:0; }
.jpage {
  flex:1; min-width:0; overflow-y:auto;
  background:var(--cream-50); border:2px solid rgb(43 32 25 / .1);
  border-radius:16px; padding:12px 13px;
  max-height:min(62vh, 470px);
}
.jpage .section-label:first-child { margin-top:2px; }

/* ---- Panels v2 (P4): the Letters page's All / Unread / Sent row ----
   the reference's three envelope tabs; only the Letters page has them */
.lfilters {
  display:flex; gap:6px; margin:0 0 9px; flex-wrap:wrap;   /* three pills don't fit one row at 320px */
  border-bottom:2px dashed rgb(43 32 25 / .13); padding-bottom:8px;
}
.lfilter {
  position:relative; display:flex; align-items:center; gap:5px; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:12.5px;
  color:var(--muted); background:var(--cream-100);
  border:2px solid rgb(43 32 25 / .12); border-radius:999px; padding:6px 12px;
}
.lfilter.on { background:var(--earth-600); border-color:var(--earth-800); color:var(--cream-50); }
@media (max-width:420px){ .lfilter { font-size:11.5px; padding:5px 9px; gap:4px; } }
.lfilter .jflag { position:static; margin-left:1px; }

/* ---- a row on the list page ---- */
.jrow {
  display:flex; align-items:center; gap:9px; width:100%;
  text-align:left; cursor:pointer;
  border:2px solid transparent; background:transparent;
  border-radius:13px; padding:8px 9px; margin-bottom:2px; color:var(--ink);
}
.jrow:hover { background:var(--cream-100); }
.jrow.on { background:var(--cream-200); border-color:rgb(43 32 25 / .12); }
.jrow-i { font-size:22px; line-height:1; flex:0 0 auto; }
.jrow-m { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.jrow-t { font-family:var(--font-display); font-weight:800; font-size:14px; line-height:1.2; }
.jrow-s {
  font-size:12px; font-weight:700; color:var(--muted); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* the only two markers in the whole book — a tick and a dot. Never a count,
   never a bar (Dexter's ruling, 2026-07-21). */
.jflag { flex:0 0 auto; }
.jflag.ready { color:var(--forest-500); font-weight:800; font-size:15px; }
.jflag.unread { width:9px; height:9px; border-radius:50%; background:#c4708a; }
.jtab .jflag.unread { position:absolute; top:7px; right:7px; }

/* ---- the detail page ---- */
.jdetail .jback { display:none; }
.jd-head { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.jd-i { font-size:34px; line-height:1; }
.jd-head h4 {
  font-family:var(--font-display); font-weight:800; font-size:18px;
  margin:0; color:var(--forest-700); line-height:1.15;
}
.jd-s { font-size:12.5px; font-weight:700; color:var(--muted); margin:3px 0 0; }
.jd-body {
  font-family:var(--font-hand); font-size:17px; line-height:1.55;
  color:var(--earth-800);
}
.jd-body p { margin:0 0 9px; }
.jd-body p:last-child { margin-bottom:0; }
.jd-body em { color:var(--muted); }
.jd-meta {
  margin-top:13px; padding-top:11px; border-top:1px solid rgb(43 32 25 / .1);
  display:flex; flex-direction:column; gap:4px;
  font-size:12.5px; font-weight:700; color:var(--muted);
}
.jempty {
  font-family:var(--font-hand); font-size:16.5px; color:var(--muted);
  font-style:italic; padding:10px 2px; line-height:1.5;
}

/* ---- narrow screens: the rail lies down, and the detail page slides over
   the list instead of squeezing beside it ---- */
@media (max-width:720px){
  .jbook-body { flex-direction:column; gap:10px; }
  .jtabs { flex-direction:row; flex:0 0 auto; overflow-x:auto; padding-bottom:3px; }
  /* the side-rail's width:100% would make every tab fill the row on its own
     (each 100% wide → the rail scrolled one tab at a time). Lying down, they
     size to their own label instead. */
  .jtab { flex:0 0 auto; width:auto; padding:8px 12px; }
  .jpages[data-view="list"]   .jdetail { display:none; }
  .jpages[data-view="detail"] .jlist   { display:none; }
  .jpages[data-view="detail"] .jdetail .jback {
    display:inline-block; border:none; cursor:pointer;
    background:var(--cream-200); color:var(--muted);
    font-family:var(--font-display); font-weight:800; font-size:13px;
    border-radius:11px; padding:7px 12px; margin-bottom:11px;
  }
  .jpage { max-height:min(48vh, 400px); }
}

/* ---- the mailbox (2026-07-21) — the book's furniture, its own tab rail ----
   Letters · Sent · Gift. Shares .jbook/.jpages/.jrow/.jd-* with the Explorer's
   Journal on purpose: it is the same reading grammar, a different box. */
.mb-tabs { display:flex; gap:6px; flex-wrap:wrap; flex:0 0 100%; margin-bottom:10px; }
.mb-tab {
  position:relative; display:flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:13px;
  color:var(--muted); background:var(--cream-100);
  border:2px solid rgb(43 32 25 / .12); border-radius:999px; padding:7px 14px;
}
.mb-tab.on { background:var(--earth-600); border-color:var(--earth-800); color:var(--cream-50); }
.mb-tab .jflag { position:static; margin-left:1px; }
/* the mailbox stacks (tab rail across the top) rather than running a side rail */
#mailbox-wrap .jbook-body { flex-wrap:wrap; }
#mailbox-wrap .jpages { flex:1 1 100%; }
/* the Gift tab's recipient chips */
.mb-who { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:4px; }
.mb-pick {
  display:flex; align-items:center; gap:5px; cursor:pointer;
  font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--ink);
  background:var(--cream-100); border:2px solid rgb(43 32 25 / .14);
  border-radius:999px; padding:7px 13px; box-shadow:var(--pop-sm);
}
.mb-pick.on { background:var(--gold-300); border-color:var(--earth-800); }
.mb-send-row { display:flex; justify-content:center; margin-top:12px; }
.mb-send-row .btn { font-size:15px; padding:11px 20px; }
@media (max-width:420px){ .mb-tab { font-size:11.5px; padding:6px 10px; } }