/* ---------------------------------------------------------------------------
   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 BOOK'S DIM SCALE (D1 2026-08-14 · extended Fish Pen session
   2026-08-15) — TWO levels of "not yet", one axis, deliberately NOT one value.

     · DEEP — a species you have never met. It means NO INFORMATION: the icon
       collapses to its own outline, so the shape stays honest (you could pick a
       crab out of a line-up) while the colour and the name are still the
       water's to keep.
     · SOFT — a colouring you have not bred yet, on a species you already know.
       It means "this exists and you can get it", which is an invitation, not a
       blank — so it stays legibly a fish. A row of five black blobs would read
       as absence, the opposite of what that row is for.

   Both levels are the same two properties at different volumes, declared
   together here so the relationship is legible in the stylesheet instead of
   being two unrelated magic numbers in two different files. ---- */
.jbook {
  --dim-deep-brightness: 0;      /* pure silhouette */
  --dim-deep-opacity:    .34;
  --dim-soft-brightness: .62;    /* still reads as the creature */
  --dim-soft-opacity:    .62;
}
/* DEEP — the silhouette (Fish page only) */
.jrow-i.sil, .jd-i.sil {
  filter:grayscale(1) brightness(var(--dim-deep-brightness));
  opacity:var(--dim-deep-opacity);
}
.jrow.sil .jrow-t { color:var(--muted); font-style:italic; letter-spacing:.02em; }
.jd-i.sil { opacity:calc(var(--dim-deep-opacity) - .06); }

/* 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);
}
/* (Fish Pen session, 2026-08-15) the variant swatch row — the second E4 bend,
   shown only on a species already caught. Same species icon in every slot; a
   SEEN colouring wears its own palette (an inline filter, because that value is
   data), an UNSEEN one wears the SOFT step of the dim scale above. */
.jv-row {
  margin-top:13px; padding-top:11px; border-top:1px solid rgb(43 32 25 / .1);
  display:flex; gap:8px; flex-wrap:wrap;
}
.jv-swatch {
  font-size:22px; line-height:1; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:rgb(43 32 25 / .06); border-radius:8px;
}
/* SOFT — one step up from the silhouette: greyed and set back, but still a
   creature you can recognise, because this gap is reachable. */
.jv-swatch.unseen {
  filter:grayscale(1) brightness(var(--dim-soft-brightness));
  opacity:var(--dim-soft-opacity);
  background:rgb(43 32 25 / .04);
  border:1px dashed rgb(43 32 25 / .16);   /* an empty slot waiting to be filled */
}
.jv-count { margin:6px 0 0; 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; } }