/* web.css — website-only styles, loaded by web/build.mjs before the page's own
   <style>, so rules here use extra specificity where they must win.
   The phone/tablet apps never load this file. */

/* A desktop browser turns a sideways two-finger trackpad swipe into Back/Forward
   and rubber-bands the page; neither belongs in a reader. */
html, body { overscroll-behavior: none; }

/* A desktop window counts as a tablet at any size (patch input-desktop-is-tablet),
   so a landscape window is ALWAYS book mode in JS. The page's CSS only shows the
   spread from 900 px wide (an iPad in landscape is wider than that); below it,
   the JS spread sat behind the hidden single-page strip. Show it at any width. */
@media (hover: hover) and (pointer: fine) and (orientation: landscape) {
  html .flipbook-container.tablet-spread-mode .flipbook { display: none; }
  html .flipbook-container.tablet-spread-mode .spread-container { display: flex; }
}

/* ---------- mouse & trackpad (not iPad/phone browsers) ---------- */
@media (hover: hover) and (pointer: fine) {
  /* The loupe magnifies text hidden under a FINGER; a mouse pointer hides nothing. */
  html .csel-loupe { display: none !important; }

  /* Cursors: I-beam over page text (a drag there selects), a hand over controls. */
  html .flipbook .page .text-layer span,
  html .spread-page-content .text-layer span { cursor: text; }
  html button, html [onclick], html .top-btn, html .library-item, html .tag-chip,
  html .sort-btn, html .view-toggle, html .toc-item, html .bookmark-item,
  html .user-highlight, html .bookmark-tap-zone, html .scrubber, html .vertical-scrubber { cursor: pointer; }
  html .scrubber-thumb { cursor: grab; }
  /* The edge band a click or drag turns the page from (web-input.js toggles it). */
  html #container.web-edge,
  html #container.web-edge .text-layer span { cursor: pointer; }
  /* A page being curled / panned by a mouse drag. */
  html.web-dragging, html.web-dragging * { cursor: grabbing !important; }

  /* Hover: quiet versions of the existing :active looks. */
  html .top-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-light, rgba(255, 255, 255, 0.25)); }
  html .sort-btn:hover, html .view-toggle:hover { color: var(--text-primary); border-color: var(--border-light, rgba(255, 255, 255, 0.25)); }
  html .tag-chip:hover { filter: brightness(1.15); }
  html .toc-item:hover, html .bookmark-item:hover { background: rgba(255, 255, 255, 0.05); }
  html #library .library-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
  html .highlight-colors .color-btn:hover { transform: scale(1.12); }
  html .highlight-popup .copy-btn:hover { filter: brightness(1.2); }
  html .user-highlight:hover { filter: brightness(1.1); }

  /* Reader toolbar. The tablet rule caps it at 700 px (an iPad row), which on a
     desktop hid 5 of its 13 buttons behind an invisible sideways scroll, and it
     never shrank below 700 — in a narrower window it ran off both edges. Wide
     enough for every button (~1055 px), never wider than the window. */
  html body.is-tablet .top-toolbar { max-width: min(1100px, calc(100vw - 24px)); }
  /* When the buttons still don't fit, fade the clipped side (web-input.js sets
     the classes) so there is a cue that the row scrolls (wheel or drag). */
  html .toolbar-right.web-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }
  html .toolbar-right.web-more-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
  }
  html .toolbar-right.web-more-left.web-more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  }

  /* The book title sits above the pages at every window size. Below 900 px wide
     the phone rule (top: 120px) drew it over the page's text. */
  html .pdf-title-bar {
    top: 8px; left: 50%; right: auto;
    transform: translateX(-50%);
    max-width: min(500px, calc(100vw - 32px));
  }

  /* Portrait window (page mode): the page fills the width from y = 0, so the
     title has no black band to sit in and its faint white text vanished on
     the page's white top margin. A dark pill keeps it legible on any page. */
  @media (orientation: portrait) {
    html .pdf-title-bar .pdf-title-text {
      display: inline-block; max-width: 100%; box-sizing: border-box; vertical-align: top;
      padding: 2px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); opacity: 0.8;
    }
    html .pdf-title-bar.toolbar-active .pdf-title-text { opacity: 1; }
  }

  /* A PDF dragged over the window (web-input.js): where it will land. */
  html.web-file-drag body::after {
    content: ''; position: fixed; inset: 10px; z-index: 2147483000; pointer-events: none;
    border: 2px dashed rgba(74, 158, 255, 0.85); border-radius: 18px; background: rgba(74, 158, 255, 0.07);
  }
}

/* The iPad keeps its reader at least 600 px tall (the Android keyboard must not
   collapse it). A desktop window can be shorter — DevTools docked at the bottom —
   and the page bottom, scrubber and page label went off-screen. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) and (orientation: landscape) {
  html .flipbook-container { min-height: 0; }
  html .spread-container { min-height: 0; }
}

/* Bookmarks & Highlights is a full-screen page (tablet v4.4). In a wide
   desktop window its rows spanned the whole width: the page label at the far
   left, Add note / X ~1400 px away. Same page, content in a centred column. */
@media (hover: hover) and (pointer: fine) and (min-width: 720px) {
  html .bookmarks-panel {
    padding-left: max(0px, calc(50% - 320px));
    padding-right: max(0px, calc(50% - 320px));
  }
}