/* Touch and small-screen adjustments layered over the shared viewer styles.
   Loaded only by the web build; the extension never sees this file. */

:root {
  /* Respect the phone's safe areas so nothing hides under the notch, the
     status bar or the home indicator. Requires viewport-fit=cover, which
     index.html sets. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* Header height WITHOUT the safe area; the inset is added on top. */
  --topbar-h: 44px;
}

/*
 * The header reserves the top inset itself rather than assuming the host has
 * already laid the web view out below the status bar.
 *
 * Two things have to line up: the padding pushes the content down, and the
 * height grows by the same amount, or the flex row would simply crush the
 * content back into the notch. Deliberately NO artificial minimum: when the
 * native shell places the web view below the status bar the inset is 0 and any
 * floor would be dead space, and when it does not the inset is the exact
 * amount needed. See src/web/main.ts, which turns the overlay off on Android.
 */
.pa-topbar {
  padding-top: var(--safe-t);
  padding-left: max(16px, var(--safe-l));
  padding-right: max(16px, var(--safe-r));
  height: calc(var(--topbar-h) + var(--safe-t));
  flex: 0 0 calc(var(--topbar-h) + var(--safe-t));
}

html, body { overscroll-behavior: none; }

/* Momentum scrolling for the page list, and no rubber-banding of the document
   into the toolbar. */
.pa-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* A finger drag on an annotation must move the annotation, not scroll the page.
   Without this the pointermove handlers never see the gesture. */
.pa-ann { touch-action: none; }
.pa-layer.is-placing { touch-action: none; }

@media (max-width: 760px) {
  /* --- top bar: keep only what earns its width --- */
  /* Only the base height changes on a phone; .pa-topbar above adds the inset.
     A custom property needs a selector, so it cannot sit bare in the query. */
  :root { --topbar-h: 48px; }
  .pa-topbar {
    padding-left: max(12px, var(--safe-l));
    padding-right: max(12px, var(--safe-r));
    gap: 8px;
  }
  .pa-badge { display: none; }
  .pa-status { min-width: 0; font-size: 12px; }
  .pa-topbar__title { max-width: 34vw; font-size: 12px; }

  .pa-pages { padding: 12px 8px 190px; gap: 12px; }

  /* --- toolbar: a fixed bottom bar, not a floating pill --- */
  .pa-toolbar {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    padding: 6px 6px calc(6px + var(--safe-b));
    border-radius: 14px 14px 0 0;
    /* Dragging a full-width bottom bar makes no sense on a phone. */
    touch-action: none;
  }
  .pa-grip { display: none; }

  /* The tile strip scrolls horizontally rather than shrinking below the size
     of a fingertip. */
  .pa-toolbar__tiles { gap: 6px; }
  .pa-strip {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pa-strip::-webkit-scrollbar { display: none; }

  /* The Download strip carries the same .pa-strip class, so without this it
     also takes flex:1 and claims half the bar, squeezing the tools into a
     scroller for no reason. It should only ever be its natural width. */
  .pa-strip--action { flex: 0 0 auto; overflow: visible; }

  .pa-tile { min-width: 72px; padding: 8px 10px 6px; }
  .pa-tile__glyph { height: 24px; }
  .pa-tile__glyph svg { width: 24px; height: 24px; }
  .pa-tile__label { font-size: 11px; }
  .pa-tile--action { min-width: 84px; }

  /* 44px minimum touch target on every secondary control. */
  .pa-toolbar__utility { gap: 0; padding: 2px 4px; overflow-x: auto; scrollbar-width: none; }
  .pa-toolbar__utility::-webkit-scrollbar { display: none; }
  .pa-btn { height: 44px; min-width: 44px; }
  .pa-swatch { width: 28px; height: 28px; }
  .pa-range { width: 84px; }
  .pa-select { height: 34px; }

  /* --- signature: the one place that really needs the whole screen --- */
  .pa-modal__panel { width: 100vw; max-height: 100vh; border-radius: 0; }
  .pa-sigcanvas { aspect-ratio: 3 / 2; }
  .pa-modal__body { padding: 14px; }
  .pa-library__item { width: calc(50% - 5px); }

  .pa-empty { padding: 32px 20px; }
  .pa-empty h1 { font-size: 20px; }
  .pa-btn--lg { height: 48px; }
}

/* Phone widths: all four tools plus Download must fit without scrolling.
   Signature scrolling off-screen would hide a primary feature behind a gesture
   with no affordance. At 375px: 4x62 + 6 + 76 + 12 padding = 342px. */
@media (max-width: 420px) {
  .pa-tile { min-width: 62px; padding: 8px 4px 6px; }
  .pa-tile__label { font-size: 10px; letter-spacing: 0; }
  .pa-tile__glyph { height: 22px; }
  .pa-tile__glyph svg { width: 22px; height: 22px; }
  .pa-tile--action { min-width: 76px; }
  .pa-toolbar { padding: 5px 5px calc(5px + var(--safe-b)); }
  .pa-toolbar__tiles { gap: 5px; }
}

/* Landscape phones are short: give the document the vertical space back. */
@media (max-width: 900px) and (max-height: 500px) {
  .pa-tile__label { display: none; }
  .pa-tile { min-width: 56px; padding: 6px 8px; }
  .pa-pages { padding-bottom: 130px; }
}

/* A coarse pointer means fingers, whatever the screen size. */
@media (pointer: coarse) {
  .pa-handle { width: 22px; height: 22px; right: -11px; bottom: -11px; }
  .pa-ann.is-selected { outline-width: 2px; }
}