/* OverBoard PDF app. Toolbar styles come from ../shared/toolbar.css (shared with the overlay). */
:root { --desk: #e9e7e2; --ink: #111; --mute: #555; }
* { box-sizing: border-box; }
html { overflow-anchor: auto; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden], #ink-bar[hidden] { display: none !important; }

/* ---------- start screen ---------- */
#ob-start { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
body:not(.start) #ob-start { display: none; }
.card { width: min(640px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 2px 14px rgba(0,0,0,.15); padding: 28px; }
.card h1 { margin: 0; font-size: 34px; line-height: 1.1; }
.card h1 span { background: #111; color: #ffd400; border-radius: 8px; padding: 0 8px; font-size: 26px; vertical-align: middle; }
.lead { margin: 8px 0 18px; color: var(--mute); }
#ob-drop { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 180px; border: 3px dashed #bbb; border-radius: 14px; cursor: pointer; text-align: center; padding: 16px; transition: background .15s, border-color .15s; }
#ob-drop strong { font-size: 24px; }
#ob-drop span { color: var(--mute); }
#ob-drop:hover, #ob-drop:focus, #ob-drop.over { background: #fffbe0; border-color: #e6b800; outline: none; }
#ob-msg { background: #e8f5e9; color: #1b5e20; border-radius: 10px; padding: 10px 12px; margin: 14px 0 0; }
#ob-error { background: #ffebee; color: #b71c1c; border-radius: 10px; padding: 10px 12px; margin: 14px 0 0; }
#ob-install { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: var(--mute); font-size: 14px; }
#ob-install[hidden] { display: none; }
#ob-install button { flex: none; min-height: 52px; padding: 0 20px; border: 0; border-radius: 12px; background: #111; color: #ffd400; font: 700 16px Inter, system-ui, sans-serif; cursor: pointer; }
#ob-recent h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin: 22px 0 8px; }
#ob-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#ob-recent li { display: flex; gap: 8px; }
#ob-recent button { font: inherit; border: 0; border-radius: 10px; cursor: pointer; min-height: 52px; }
#ob-recent .open { flex: 1; text-align: left; background: #f1f0ec; padding: 6px 14px; overflow: hidden; }
#ob-recent .open b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ob-recent .open small { color: var(--mute); }
#ob-recent .open:hover { background: #e6e4dc; }
#ob-recent .forget { width: 52px; background: transparent; color: var(--mute); font-size: 22px; }
#ob-recent .forget:hover { background: #ffebee; color: #b71c1c; }
.note { font-size: 13px; color: var(--mute); margin: 22px 0 0; }
.note a { color: #1565c0; }

/* ---------- pages ---------- */
#ob-pages { position: relative; display: flex; flex-direction: column; align-items: safe center; gap: 16px; padding: 16px 0 50vh; min-width: max-content; touch-action: none; }
body.start #ob-pages { display: none; }
#ob-pages.scroll-mode { touch-action: pan-x pan-y; }
#ob-pages.scroll-mode, #ob-pages.scroll-mode .pg { cursor: grab; }
.pg { position: relative; flex: none; isolation: isolate; cursor: crosshair; }
.pg .sheet { position: absolute; top: 0; height: 100%; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.18); }
.pg canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.pg .sheet canvas.img { pointer-events: none; }
.pg canvas.hl { mix-blend-mode: multiply; pointer-events: none; }
.pg canvas.ink { pointer-events: none; }
.pg .sheet { z-index: 0; }   /* own stacking context: text and links stay under the ink */

/* ---------- selectable text and links (PDF.js TextLayer; adapted from its pdf_viewer.css) ---------- */
/* Write mode: pens, palms and fingers never reach the text or links, so drawing works exactly as before */
#ob-pages:not(.scroll-mode) { user-select: none; -webkit-user-select: none; }
#ob-pages:not(.scroll-mode) :is(.textLayer, .textLayer *, .links, .links *) { pointer-events: none !important; }
.textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 1; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(0, 0, 255, .25); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }
.textLayer mark.hit { color: transparent; background: rgba(255, 179, 0, .45); border-radius: 2px; }
.textLayer[data-main-rotation="90"] { transform: rotate(90deg) translateY(-100%); }
.textLayer[data-main-rotation="180"] { transform: rotate(180deg) translate(-100%, -100%); }
.textLayer[data-main-rotation="270"] { transform: rotate(270deg) translateX(-100%); }
.hiddenCanvasElement { position: absolute; top: 0; left: 0; width: 0; height: 0; display: none; }
.pg .links { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pg .links a { position: absolute; display: block; pointer-events: auto; cursor: pointer; border-radius: 3px; }
#ob-pages.scroll-mode .links a:hover { background: rgba(21, 101, 192, .12); outline: 2px solid rgba(21, 101, 192, .5); }

/* ---------- toolbar extras (the rest is shared/toolbar.css) ---------- */
#ob-pagebox { grid-column: 1 / 3; display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: stretch; }
#ink-bar #ob-pagebox button { font-size: 22px; padding: 0; }
#ob-pagebox label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; color: #bbb; font: 700 11px Inter, system-ui, sans-serif; }
#ob-page { width: 100%; min-width: 0; height: 40px; border-radius: 10px; border: 3px solid #3a3a3a; background: #fff; color: #000; font: 700 19px Inter, system-ui, sans-serif; text-align: center; }
#ob-page:focus { border-color: #ffd400; outline: none; }
#ob-zoom { grid-column: 1 / 3; display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
#ink-bar #ob-zoom button[data-act="zoom-fit"] { padding: 0; font-size: 15px; }
#ink-bar #ob-zoom button[data-act="zoom-in"], #ink-bar #ob-zoom button[data-act="zoom-out"] { font-size: 28px; line-height: 1; padding: 0; }
#ink-bar button[data-act="file"][aria-expanded="true"] { background: #fff; color: #000; }
/* File menu: pops out beside the toolbar so the toolbar itself fits a 1080p screen */
#ob-filemenu { position: fixed; z-index: 101; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; width: 196px; box-sizing: border-box; background: #1f1f1f; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.5); font-family: Inter, system-ui, sans-serif; touch-action: manipulation; }
#ob-filemenu button { min-height: 56px; border: 3px solid transparent; border-radius: 12px; background: #3a3a3a; color: #fff; font: 700 15px Inter, system-ui, sans-serif; cursor: pointer; padding: 4px; }
#ob-filemenu button.sm { min-height: 48px; font-size: 13px; }
#ob-filemenu .wide { grid-column: 1 / 3; }
#ob-filemenu button.warn { background: #c62828; }
#ob-filemenu button.good { background: #2e7d32; }
#ob-filemenu button:disabled { opacity: .4; cursor: default; }
#ink-bar button:disabled { opacity: .4; cursor: default; }

/* ---------- chapters ---------- */
:is(#ob-toc, #ob-find) { position: fixed; top: 10px; bottom: 10px; right: 10px; width: min(360px, calc(100vw - 220px)); z-index: 99; background: #1f1f1f; color: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.5); display: flex; flex-direction: column; font-family: Inter, system-ui, sans-serif; }
:is(#ob-toc, #ob-find).left { right: auto; left: 10px; }
:is(#ob-toc, #ob-find) .head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 16px; font-size: 18px; }
:is(#ob-toc, #ob-find) .head button { width: 52px; height: 52px; border: 0; border-radius: 12px; background: #3a3a3a; color: #fff; font-size: 28px; cursor: pointer; }
:is(#ob-toc, #ob-find) ul { list-style: none; margin: 0; padding: 0; }
:is(#ob-toc, #ob-find) > ul { overflow-y: auto; padding: 0 8px 10px; flex: 1; }
:is(#ob-toc, #ob-find) li button { display: flex; width: 100%; gap: 10px; justify-content: space-between; align-items: center; min-height: 48px; border: 0; border-radius: 10px; background: transparent; color: #fff; font: 600 15px Inter, system-ui, sans-serif; text-align: left; padding: 6px 10px; cursor: pointer; }
:is(#ob-toc, #ob-find) li button:hover { background: #3a3a3a; }
:is(#ob-toc, #ob-find) li button.here { background: #fff; color: #000; }
:is(#ob-toc, #ob-find) li button small { color: #aaa; font-weight: 700; flex: none; }
:is(#ob-toc, #ob-find) li button.here small { color: #555; }
#ob-toc ul ul { padding-left: 16px; }
#ob-toc ul ul button { font-weight: 500; min-height: 42px; }
/* find text (shares the chapters panel's look) */
#ob-find form { display: flex; gap: 8px; padding: 0 10px 6px; }
#ob-find input { flex: 1; min-width: 0; height: 56px; border-radius: 12px; border: 3px solid #3a3a3a; background: #fff; color: #000; font: 600 18px Inter, system-ui, sans-serif; padding: 0 12px; }
#ob-find input:focus { border-color: #ffd400; outline: none; }
#ob-find form button { min-width: 72px; min-height: 56px; border: 0; border-radius: 12px; background: #ffd400; color: #000; font: 700 16px Inter, system-ui, sans-serif; cursor: pointer; }
#ob-find .msg { margin: 0; padding: 0 16px 6px; color: #bbb; font-size: 13px; min-height: 1.4em; }
#ob-find li button { font-weight: 500; }
#ob-find li button b { background: #ffd400; color: #000; border-radius: 3px; padding: 0 2px; }
.textLayer mark.hit.cur { background: rgba(255, 87, 34, .55); }

/* ---------- "Save ink into PDF" opt-in ---------- */
:is(#ob-embed, #ob-coverwarn) { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 24px; box-shadow: 0 8px 40px rgba(0,0,0,.45); font: 17px/1.45 Inter, system-ui, sans-serif; color: var(--ink); }
:is(#ob-embed, #ob-coverwarn)::backdrop { background: rgba(0,0,0,.45); }
:is(#ob-embed, #ob-coverwarn) h2 { margin: 0 0 10px; font-size: 24px; }
:is(#ob-embed, #ob-coverwarn) ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
:is(#ob-embed, #ob-coverwarn) .off { color: var(--mute); font-size: 15px; margin: 14px 0 0; }
#ob-embed.nofsa .fsa, #ob-embed:not(.nofsa) .nofsa { display: none; }
:is(#ob-embed, #ob-coverwarn) .row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
:is(#ob-embed, #ob-coverwarn) .row button { min-height: 56px; min-width: 130px; border: 0; border-radius: 12px; font: 700 17px Inter, system-ui, sans-serif; cursor: pointer; background: #e6e4dc; color: #111; padding: 0 18px; }
:is(#ob-embed, #ob-coverwarn) .row button.go { background: #111; color: #ffd400; }

#ob-dropcover { position: fixed; inset: 0; z-index: 200; background: rgba(255, 212, 0, .25); border: 6px dashed #e6b800; display: grid; place-items: center; pointer-events: none; }
#ob-dropcover div { background: #111; color: #ffd400; font: 700 28px Inter, system-ui, sans-serif; padding: 16px 28px; border-radius: 14px; }

@media print { #ink-bar, #ink-show, #ob-toc, #ob-find { display: none !important; } }