/* SC-FIELDBOOK-CONVERT step 3: the Journal view holds the field book
   (js/journal-screen.js mounts js/fieldbook-screen.js's book into
   #journalStage). js/view-rules.js stacks the Journal over the Ship
   Interior: #journal is a fixed layer from the header line down, above
   #ship (z-index 2) and under every overlay, with no background of its
   own, so the blurred interior shows behind the book. */
#journal.view.active { position: fixed; top: var(--header-h, 54px); left: 0; right: 0; bottom: 0; height: auto; z-index: 3; overflow: hidden; background: transparent; }
/* The stage the book is placed in: the whole view under the band the nav
   buttons hang into. The book's sliding layer fills it (js/fieldbook-screen.js). */
.journal-close { position: absolute; z-index: 10; top: calc(6.7% + 14px); right: calc(26.3% + 10px); width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: rgba(8, 14, 26, 0.7); color: var(--text-secondary); font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.8; pointer-events: auto; }
.journal-close:hover { opacity: 1; color: var(--accent); }
.journal-stage { position: absolute; left: 0; right: 0; top: var(--nav-hang, 42px); bottom: 0; overflow: hidden; }
/* The page controls (js/journal-screen.js mountControls): previous, the
   "Page 3 of 7" label and next, in one row along the bottom of the view,
   under the book and outside the plate. Each button is a 44 px tap target.
   The row is hidden while the book has only its index spread. */
.journal-pager { position: absolute; z-index: 10; left: 0; right: 0; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.journal-pager[hidden] { display: none; }
.journal-page-btn { width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: rgba(8, 14, 26, 0.7); color: var(--text-secondary); font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.85; pointer-events: auto; }
.journal-page-btn:hover { opacity: 1; color: var(--accent); }
.journal-page-btn:disabled { opacity: 0.3; cursor: default; }
.journal-page-label { min-width: 96px; text-align: center; font-size: 13px; color: var(--text-secondary); background: rgba(8, 14, 26, 0.7); border-radius: 12px; padding: 4px 10px; pointer-events: auto; }
/* Under the field book the interior and the reveal are blurred 14px and
   scaled 1.06 while the Journal is the view showing (body.journal-open,
   js/app.js showView). The interior's own blur runs on the field book's
   backdrop classes with the book's timing (js/fieldbook-screen.js); the
   reveal drawing under the interior gets the same numbers from this rule.
   The view fade-in animation (css/cosmos-base.css viewFadeIn, fill
   forwards) would hold its own end transform on both, so under the class
   its fill mode is set to none: the finished animation then stops
   applying and the blur transform takes effect. Only the fill mode
   changes, never the animation name, so the fade-in does not restart when
   the Journal closes. */
body.journal-open #ship.view.active { animation-fill-mode: none; }
body.journal-open #reveal.view.active { animation-fill-mode: none; filter: blur(14px); transform: scale(1.06); transition: filter 150ms ease, transform 150ms ease; }
/* Contracts (js/contracts-page.js): the red tab on the right edge of the book
   stage and the paper panel that lists the contracts over the book. */
.journal-contracts-tab { position: absolute; z-index: 11; right: 0; top: 62%; width: 44px; height: 150px; padding: 0; border: none; border-radius: 8px 0 0 8px; background: #b6231c; color: #fff4e6; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; writing-mode: vertical-rl; text-orientation: mixed; cursor: pointer; box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.45); pointer-events: auto; }
.journal-contracts-tab:hover, .journal-contracts-tab.open { background: #d42d24; }
.journal-contracts { position: absolute; z-index: 10; left: 50%; top: 48%; transform: translate(-50%, -50%); width: min(560px, 82vw); max-height: 72vh; overflow-y: auto; padding: 26px 32px 30px; box-sizing: border-box; background: linear-gradient(160deg, #efe3c8 0%, #e5d5b3 60%, #dccba6 100%); background-color: #e8dab9; color: #2b2418; font-family: Georgia, "Times New Roman", serif; border-radius: 3px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(120, 90, 40, 0.18); pointer-events: auto; }
.journal-contracts[hidden] { display: none; }
.contracts-heading { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: 0.02em; border-bottom: 1px solid rgba(60, 40, 20, 0.35); padding-bottom: 6px; }
.contracts-client { margin: 0 0 16px; font-size: 13px; font-style: italic; color: #5a4a30; }
.contracts-card { margin: 0 0 16px; padding: 10px 12px; border: 1px solid rgba(60, 40, 20, 0.3); border-radius: 2px; background: rgba(255, 250, 235, 0.35); }
.contracts-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.contracts-note { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.contracts-progress { display: flex; align-items: center; gap: 10px; }
.contracts-track { flex: 1; height: 10px; border-radius: 5px; background: rgba(106, 74, 32, 0.22); border: 1px solid #6a4a20; overflow: hidden; box-sizing: border-box; display: block; }
.contracts-fill { display: block; height: 100%; background: #6a4a20; border-radius: 5px; }
.contracts-count { font-size: 14px; font-weight: 700; color: #3a2a12; white-space: nowrap; }
.contracts-done-heading { margin: 18px 0 6px; font-size: 16px; font-weight: 700; border-bottom: 1px solid rgba(60, 40, 20, 0.3); padding-bottom: 4px; }
.contracts-done-list { margin: 0; padding-left: 20px; font-size: 14px; }
.contracts-done-item { margin: 2px 0; text-decoration: line-through; color: #5a4a30; }
.contracts-empty { margin: 0 0 8px; font-size: 14px; font-style: italic; color: #5a4a30; }
/* The one-line notice in the Ship Interior above the journal control (js/nudge-glint.js). */
.contracts-notice { position: absolute; z-index: 4; left: calc(50% + 30px); bottom: calc(11% + 58px); transform: translateX(-50%); padding: 5px 12px; border-radius: 12px; background: rgba(182, 35, 28, 0.92); color: #fff4e6; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.contracts-notice[hidden] { display: none; }
.contracts-pinned { position: absolute; z-index: 3; left: calc(50% + 30px); bottom: calc(11% + 34px); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 10px; background: rgba(20, 14, 10, 0.72); color: #f2e6d2; font-size: 12px; white-space: nowrap; pointer-events: none; }
.contracts-pinned[hidden] { display: none; }
.contracts-pinned .contracts-track { width: 56px; height: 6px; border-radius: 3px; background: rgba(242, 230, 210, 0.25); border: none; }
.contracts-pinned .contracts-fill { background: #f2e6d2; border-radius: 3px; }
.contracts-optional { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }