/* Public paper page layout: the document viewer and its side panels.
 *
 * Wide screens (over 1024px): three columns (tools, document, metadata) that
 * fill the window below the header and language bar; each column scrolls on
 * its own.
 * Phones and tablets (up to 1024px): the document fills the screen below one
 * toolbar row (Back, languages, Details). The side panels become a drawer
 * (static/paper_panels.js): a bottom sheet on portrait phones, a side drawer
 * otherwise. While the drawer is closed, search matches are stepped through
 * from a dock under the document (static/paper_find.js).
 *
 * The document viewer (.paper-main) is the scroll container at every width:
 * lazy page loading, zoom, search and the floating controls rely on it.
 * Loaded last on the paper page; uses the identity tokens from
 * paper_page.css (docs/visual-identity.md). */

/* ---- Wide screens ----
 * Reproduces the previous three-column page exactly (including the legacy
 * border colours from style.css); new compact UI below uses identity tokens. */
body.paper-page {
  overflow: hidden;
}

body.paper-page .paper-toolbar,
body.paper-page .paper-panels {
  display: contents;
}

body.paper-page .paper-toolbar-back,
body.paper-page .paper-panels-toggle,
body.paper-page .paper-panels-head,
body.paper-page .paper-panels-scrim,
body.paper-page .paper-find-dock {
  display: none;
}

body.paper-page .paper-layout {
  --paper-viewer-height: calc(100vh - var(--academic-topbar-height, 76px) - var(--academic-languagebar-height, 46px));
  display: grid;
  grid-template-columns: 20vw 60vw 20vw;
  align-items: stretch;
  width: 100vw;
  max-width: 100vw;
  height: var(--paper-viewer-height);
  max-height: var(--paper-viewer-height);
  margin: 0;
  overflow: hidden;
  border-right: 1px solid #e3e7ec;
  border-left: 1px solid #e3e7ec;
  background: transparent;
}

body.paper-page .paper-side,
body.paper-page .paper-ad {
  position: relative;
  grid-row: 1;
  align-self: start;
  width: 20vw;
  min-width: 20vw;
  max-width: 20vw;
  height: var(--paper-viewer-height);
  max-height: var(--paper-viewer-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
}

body.paper-page .paper-side {
  z-index: 20;
  display: block;
  grid-column: 1;
  border-right: 1px solid var(--scieee-line);
}

body.paper-page .paper-ad {
  z-index: 10;
  display: flex;
  flex-direction: column;
  grid-column: 3;
  border-left: 1px solid var(--scieee-line);
}

body.paper-page .paper-right-meta-panel {
  flex: 0 0 auto;
}

body.paper-page .paper-main {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 2;
  width: 60vw;
  min-width: 0;
  max-width: 60vw;
  height: var(--paper-viewer-height);
  max-height: var(--paper-viewer-height);
  padding: 0 0 18px;
  overflow: auto;
  background: #fff;
}

body.paper-page .language-more-label-short {
  display: none;
}

/* The document is first in DOM order (keyboard and screen readers); the
 * grid places the columns, so the visual order is unchanged. "Skip to
 * document" moves focus past the header and toolbar. */
body.paper-page .paper-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--scieee-discovery-blue);
  color: var(--scieee-white);
  font: 600 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
  transform: translateY(-200%);
}

body.paper-page .paper-skip-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--scieee-white), 0 0 0 4px var(--scieee-deep-navy);
  transform: none;
}

body.paper-page .paper-main:focus {
  outline: none;
}

body.paper-page .paper-main:focus-visible {
  outline: 2px solid var(--scieee-discovery-blue);
  outline-offset: -2px;
}

/* ---- Phones and tablets ---- */
@media (max-width: 1024px) {
  /* Header, toolbar and viewer fill the window; the page itself does not
   * scroll, as on wide screens. */
  body.paper-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }

  body.paper-page > header.topbar,
  body.paper-page > .paper-toolbar {
    flex: none;
  }

  html body.public-page.paper-page footer.academic-footer {
    display: none !important;
  }

  body.paper-page .paper-toolbar {
    position: relative;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 48px;
    padding: 0 8px;
    border-bottom: 1px solid var(--scieee-mist);
    background: var(--scieee-cloud);
  }

  body.paper-page .paper-toolbar .language-topbar {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
  }

  body.paper-page .language-topbar-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    max-width: none;
    padding: 6px 0;
  }

  /* Readable languages scroll sideways in one row. */
  body.paper-page .language-group {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    margin: -3px 0;
    padding: 3px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.paper-page .language-group::-webkit-scrollbar {
    display: none;
  }

  body.paper-page .language-group-label {
    display: none;
  }

  body.paper-page .lang-pill.lang-pill--available {
    flex: none;
    white-space: nowrap;
  }

  body.paper-page .language-more {
    position: static;
    flex: none;
    padding-left: 8px;
    border-left: 1px solid var(--scieee-mist);
  }

  body.paper-page .language-more-toggle {
    white-space: nowrap;
  }

  /* The toolbar row is the panel's containing block. */
  body.paper-page .language-more-panel {
    top: calc(100% + 4px);
    right: 8px;
    left: auto;
    width: min(340px, calc(100vw - 16px));
  }

  body.paper-page .paper-toolbar-back,
  body.paper-page .paper-panels-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 12px 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--scieee-deep-navy);
    font: 600 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
  }

  body.paper-page .paper-toolbar-back:hover {
    background: var(--scieee-cloud);
    text-decoration: none;
  }

  body.paper-page .paper-panels-toggle {
    border-color: var(--scieee-mist);
    background: var(--scieee-white);
    color: var(--scieee-discovery-blue);
  }

  body.paper-page .paper-panels-toggle:hover,
  body.paper-page .paper-panels-toggle[aria-expanded="true"] {
    border-color: var(--scieee-discovery-blue);
    background: var(--scieee-cloud);
  }

  body.paper-page .paper-toolbar-back:focus-visible,
  body.paper-page .paper-panels-toggle:focus-visible,
  body.paper-page .paper-panels-close:focus-visible,
  body.paper-page .paper-find-dock-button:focus-visible {
    outline: none;
    box-shadow: var(--paper-focus-ring);
  }

  body.paper-page .paper-toolbar-back svg,
  body.paper-page .paper-panels-toggle svg {
    flex: none;
  }

  /* The viewer takes the rest of the window; the match dock sits below it. */
  body.paper-page .paper-layout {
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    border-right: 0;
    border-left: 0;
  }

  body.paper-page .paper-main {
    grid-column: 1;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* Drawer: closed by default, so the document is never covered. */
  body.paper-page .paper-panels {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(400px, 88vw);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 1px solid var(--scieee-mist);
    background: var(--scieee-white);
    box-shadow: -8px 0 24px rgba(23, 59, 117, .12);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }

  body.paper-page.paper-panels-open .paper-panels {
    transform: none;
    visibility: visible;
    transition: transform .2s ease;
  }

  body.paper-page .paper-panels-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 18px;
    border-bottom: 1px solid var(--scieee-mist);
    background: var(--scieee-white);
  }

  body.paper-page .paper-panels-title {
    margin: 0;
    color: var(--scieee-deep-navy);
    font: 600 15px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  }

  body.paper-page .paper-panels-title:focus {
    outline: none;
  }

  body.paper-page .paper-panels-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--scieee-deep-navy);
    box-shadow: none;
  }

  body.paper-page .paper-panels-close:hover {
    border-color: var(--scieee-mist);
    background: var(--scieee-cloud);
  }

  body.paper-page .paper-side,
  body.paper-page .paper-ad {
    position: static;
    z-index: auto;
    flex: none;
    grid-row: auto;
    grid-column: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: none;
    overflow: visible;
    border: 0;
  }

  /* The toolbar already has Back. */
  body.paper-page .paper-panels .side-back-link {
    display: none;
  }

  body.paper-page.paper-panels-open .paper-panels-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    background: rgba(23, 59, 117, .28);
  }

  body.paper-page .paper-find-dock:not([hidden]) {
    display: flex;
    grid-row: 2;
    grid-column: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--scieee-mist);
    background: var(--scieee-white);
  }

  body.paper-page.paper-panels-open .paper-find-dock {
    display: none;
  }

  body.paper-page .paper-find-dock-status {
    order: -1;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 6px;
    overflow: hidden;
    color: var(--scieee-deep-navy);
    font: 600 13px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.paper-page .paper-find-dock-button {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--scieee-mist);
    border-radius: 999px;
    background: var(--scieee-white);
    color: var(--scieee-deep-navy);
    font: 600 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
    box-shadow: none;
  }

  body.paper-page .paper-find-dock-button:hover {
    border-color: var(--scieee-soft-blue);
    background: var(--scieee-cloud);
  }

  /* Messages appear under the toolbar instead of off the right edge. */
  body.paper-page .toast {
    top: calc(var(--academic-topbar-height, 76px) + var(--academic-languagebar-height, 46px) + 8px);
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

/* Portrait phones: the drawer is a bottom sheet. */
@media (max-width: 760px) and (orientation: portrait) {
  body.paper-page .paper-panels {
    top: auto;
    left: 0;
    width: auto;
    max-height: 85vh;
    max-height: 85dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--scieee-mist);
    border-left: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(23, 59, 117, .12);
    transform: translateY(100%);
  }

  body.paper-page .paper-panels-head {
    border-radius: 16px 16px 0 0;
  }
}

/* Narrow phones: "Other languages" becomes "More". */
@media (max-width: 480px) {
  body.paper-page .language-more-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body.paper-page .language-more-label-short {
    display: inline;
  }

  body.paper-page .language-more-toggle {
    padding-right: 6px;
    padding-left: 6px;
  }

  /* Back keeps only its arrow; "Back" stays its accessible name. */
  body.paper-page .paper-toolbar-back {
    width: 36px;
    padding: 0;
  }

  body.paper-page .paper-toolbar-back .paper-toolbar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* The smallest phones: Details keeps only its icon as well. */
@media (max-width: 360px) {
  body.paper-page .paper-toolbar {
    gap: 4px;
    padding: 0 6px;
  }

  body.paper-page .paper-panels-toggle {
    width: 36px;
    padding: 0;
  }

  body.paper-page .paper-toolbar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Landscape phones: a one-row header leaves room for the document. */
@media (max-width: 1024px) and (max-height: 500px) {
  body.public-page.paper-page header.topbar {
    height: 56px;
  }

  body.public-page.paper-page .topbar-inner {
    grid-template-areas: "brand search actions";
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 14px;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0 16px;
  }

  body.public-page.paper-page .academic-brand {
    grid-area: brand;
  }

  body.public-page.paper-page .search-wrap {
    grid-area: search;
  }

  body.public-page.paper-page .header-actions {
    grid-area: actions;
  }

  body.public-page.paper-page .academic-brand .brand-lockup {
    width: 120px;
    flex-basis: 120px;
  }

  body.public-page.paper-page .academic-slogan {
    display: none;
  }

  body.public-page.paper-page .search-wrap .search {
    height: 40px;
  }

  body.public-page.paper-page .search-wrap .search-button {
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.paper-page .paper-panels,
  body.paper-page.paper-panels-open .paper-panels {
    transition: none;
  }
}