/* SC-NOTEBOOK-SCREEN: the notebook of destinations over the Ship Interior
   (js/notebook-screen.js builds the markup into #ship at boot). The panel
   covers the whole interior, above the interior's floating controls
   (z-index 3) and under the profile popup (z-index 5), and is transparent:
   what shows is the plate image (assets/ui/notebook.png, the notepad in
   a gloved hand) and, on its paper, the page box with the heading, the
   lines and the pager. js/notebook-plate.js notebookFrame decides where the
   plate and the page box go for the interior's size; the script writes those
   numbers as inline left/top/width/height, so the plate's hand and arm run
   off the bottom and right edges and the paper sits in the lower part of
   the view (on a phone the sheet is 79% of the width from 10% in, its top
   edge at 44% of the height, and it runs off the bottom: the owner's mockup
   assets/textures/capture_screen_mockup.jpg, then their 2026-09-03 phone
   note "too close, too low"). The page box arrives already
   inset from the sheet's side edges and the paper's top (js/notebook-plate.js
   MOCKUP.contentSide and contentTop), so it carries no side or top padding of
   its own. The panel
   hides by sliding below the view; the slide and the
   blur timing come from js/notebook-page.js as CSS variables set on the
   elements, so the stylesheet never carries its own copy of the numbers.
   The torn strips are drawn here in CSS on each line. */
.notebook-panel {
  --ink: #1f2a44;
  --ink-dim: #5c657a;
  --strip: #fbf6e8;
  --strip-edge: rgba(60, 50, 30, 0.14);
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  color: var(--ink);
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--notebook-slide-ms, 350ms) var(--notebook-slide-easing, ease), visibility 0s;
}
/* Lowered: slide below the view, then, once the slide has finished, become
   visibility:hidden so the panel's controls leave the keyboard tab order and
   the off-screen panel can never pull the overflow-hidden interior into a
   scroll that leaves it black (fleet finding F10). The visibility change waits
   the slide's own length so the slide still shows; raising drops the class and
   the base rule above makes the panel visible again at once. */
.notebook-panel.notebook-hidden { transform: translateY(110%); pointer-events: none; visibility: hidden; transition: transform var(--notebook-slide-ms, 350ms) var(--notebook-slide-easing, ease), visibility 0s var(--notebook-slide-ms, 350ms); }
.notebook-no-anim { transition: none !important; }
/* The plate image: one element behind the page box, sized by the script.
   It is never cropped by editing the image; overflow hidden on the panel
   clips whatever runs past the view. */
.notebook-plate {
  position: absolute;
  z-index: 0;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
/* The clip box around a page box, on both notepads: it covers the plate box,
   carries the glove mask (js/notebook-plate.js placeNotebookFrame) and takes
   no pointer events of its own; the page inside it is mapped onto the drawn
   page's corners with a CSS matrix and takes the taps. */
.notebook-page-clip { position: absolute; z-index: 1; pointer-events: none; }
.notebook-page-clip > * { pointer-events: auto; transform-origin: 0 0; }
/* The page box: the inset paper rectangle inside the view, a column of heading, lines and foot. Only the bottom keeps a padding: 8px plus the phone's home-bar inset, since the box is clipped by the view's bottom edge. */
.notebook-page {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 calc(8px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.notebook-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(4, 8, 16, 0.62);
  color: #f1f5f9;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.notebook-close:hover { border-color: var(--accent); color: var(--accent); }
/* The heading row: the word FINDINGS in the handwriting face, underlined
   like a pen stroke, and the "N items" count beside it. Nothing else. */
.notebook-head {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
}
.notebook-title {
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}
.notebook-count { font-family: var(--font-hand); font-size: 16px; color: var(--ink-dim); white-space: nowrap; }
/* The list is measured by js/notebook-screen.js; the page math (js/notebook-page.js perPageFor) keeps one action row's height free so a lit line never pushes the last line past the bottom. */
.notebook-lines {
  flex: 1 1 auto;
  min-height: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
/* One line: a torn paper strip, 48px tall. Left to right: the code-kind
   icon, the word SIGNAL or TRACE in the handwriting face, a dot, the
   capture time, the visited tick, and the remove control. A clip-path clips
   an outer shadow, so the glow on a lit line is an inset shadow. */
.notebook-line {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 48px;
  background: var(--strip);
  box-shadow: inset 0 0 0 1px var(--strip-edge);
  clip-path: polygon(0 4px, 5% 1px, 11% 5px, 17% 2px, 23% 5px, 29% 0, 36% 5px, 42% 2px, 48% 5px, 55% 1px, 61% 5px,
    67% 2px, 73% 5px, 79% 0, 86% 5px, 92% 2px, 100% 4px, 100% calc(100% - 4px), 95% calc(100% - 1px),
    89% calc(100% - 5px), 83% calc(100% - 2px), 77% calc(100% - 5px), 71% 100%, 64% calc(100% - 5px),
    58% calc(100% - 2px), 52% calc(100% - 5px), 45% calc(100% - 1px), 39% calc(100% - 5px), 33% calc(100% - 2px),
    27% calc(100% - 5px), 21% 100%, 14% calc(100% - 5px), 8% calc(100% - 2px), 0 calc(100% - 4px));
}
/* The tapped line glows blue (the owner's mockup). */
.notebook-line-lit { background: #f2f8ff; box-shadow: inset 0 0 0 2px rgba(56, 160, 255, 0.85), inset 0 0 18px rgba(56, 160, 255, 0.35); }
.notebook-line-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 44px);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 2px 0 2px 8px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.notebook-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--ink); }
.notebook-word { font-family: var(--font-hand); font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: 1; }
.notebook-time { font-family: var(--font-data); font-size: 16px; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.notebook-time::before { content: "\00B7"; margin-right: 6px; color: var(--ink-dim); }
.notebook-tick { margin-left: auto; padding-right: 4px; color: #2f7a3a; font-size: 18px; }
/* A visited line is crossed out: a pen line across the text of the strip. It
   draws from left to right once (the line is raised, or a line becomes
   visited on screen); a reader who asks for less motion sees it already
   drawn, no sweep. It takes no taps, so the strip's own controls still work. */
.notebook-strike {
  position: absolute;
  left: 8px;
  right: 6px;
  top: 52%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 0.85;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .notebook-line-visited .notebook-strike { animation: notebook-strike-in 400ms ease both; }
}
@keyframes notebook-strike-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.notebook-dismiss {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--ink);
  opacity: 0.55;
  cursor: pointer;
}
.notebook-dismiss:hover { opacity: 1; color: var(--accent-dim); }
/* The action row under a lit line. Owner 2026-09-05: Survey and Scout are
   hidden for now, so the row shows only Voyage (the icon) beside the strip's
   dismiss control. The controls are written with no box, in the same
   handwriting face as SIGNAL and TRACE; an ink underline marks a live one.
   The face is narrow enough that a control fits its share of a 230px paper. */
.notebook-actions { flex-basis: 100%; display: flex; gap: 8px; padding: 0 10px 6px; overflow: hidden; }
.notebook-actions[hidden] { display: none; }
.notebook-action {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 2px 2px 0;
  overflow: hidden;
  white-space: nowrap;
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
}
/* Voyage is the icon (js/voyage-icon.js). The button keeps a 44px height. */
.notebook-voyage { display: flex; align-items: center; justify-content: center; }
.notebook-voyage svg { width: 26px; height: 26px; display: block; }
/* A disabled action reads greyed and takes no pointer cursor: a Voyage at the
   ship's current location (the "You are here" title), and Survey and Scout
   when they return. */
.notebook-action[aria-disabled="true"] { color: var(--ink-dim); opacity: 0.6; border-bottom: 2px dashed rgba(92, 101, 122, 0.45); cursor: default; }
/* The foot holds only the pager; it is empty when the lines fit one page. */
.notebook-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 6px; }
/* A phone held sideways: js/notebook-screen.js marks the panel when
   js/notebook-plate.js reports a short landscape view. The page box is then
   barely tall enough for three 48px lines with one action row free, so the
   heading and foot spacing is trimmed to give the list those pixels. The
   heading, the lines and the 44px page controls keep their own sizes. */
.notebook-short-view .notebook-head { margin-bottom: 4px; }
.notebook-short-view .notebook-foot { margin-top: 4px; }
.notebook-pager { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-data); font-size: 14px; color: var(--ink-dim); }
.notebook-pager[hidden] { display: none; }
.notebook-page-btn { width: 44px; height: 44px; border: none; background: transparent; color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.notebook-page-btn:disabled { opacity: 0.3; cursor: default; }
/* The interior and the reveal under it blur and swell while the notebook
   is up; the numbers arrive as CSS variables from js/notebook-screen.js. */
.notebook-backdrop { transition: filter var(--notebook-blur-ms, 150ms) ease, transform var(--notebook-blur-ms, 150ms) ease; }
.notebook-backdrop.notebook-blurred { }
/* The floating Notebook control: a round button at the bottom-centre of the
   band above the notebook, level with the other two controls. */
.ship-notebook-btn { right: calc(50% + 6px); left: auto; bottom: 11%; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
/* The blur under the raised notebook is one layer over the whole interior (z-index 3, above the controls and canvases, below the page at 4): a backdrop-filter pass that blurs whatever is beneath it in one go, fading in and out with the page. It takes the pointer while up, so nothing under it can be tapped. */
.notebook-blur-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; backdrop-filter: blur(var(--notebook-blur-px, 14px)); -webkit-backdrop-filter: blur(var(--notebook-blur-px, 14px)); transition: opacity var(--notebook-blur-ms, 150ms) ease; }
.notebook-blur-layer.notebook-blurred { opacity: 1; pointer-events: auto; }