/* ====================================================================
   Paper page (paper.html)
   ====================================================================
   Layout: full-bleed two-column grid filling the viewport.
     Body is a grid with three rows (header / main / footer); only
     .paper__content scrolls internally on desktop.
     On mobile, the page scrolls normally and the menu bar becomes
     sticky just under the site header.

   Tile borders, menu-bar border, drawer border, and the collapse
   toggle border all use #444444 (dark gray) so they sit quietly
   on the dark gradient surface. Sublink separators use the same
   dark-gray that .paper__rule uses in the content area.
   ==================================================================== */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: var(--space-3);
  top: var(--space-3);
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-3);
  background: var(--black);
  color: var(--white);
  z-index: 10000;
}

/* ====================================================================
   Page-level: body is a non-scrolling grid filling 100vh on desktop.
   Only .paper__content scrolls. On mobile the page scrolls normally.
   ==================================================================== */
html {
  height: 100%;
}

body.page-paper {
  height: 100vh;
  overflow: hidden;
  background-color: #F8F8F8;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body.page-paper .site-main {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Header texture image overlay */
body.page-paper .site-header {
  background-color: var(--black);
  background-image: url('../images/header-bg-texture.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Charcoal strip behind the menu column */
body.page-paper .site-main::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--paper-menu-width, 540px);
  background-color: var(--black);
  background-image: url('../images/charcoal-art-footer.png');
  background-size: cover;
  background-position: bottom left;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transition: width 280ms cubic-bezier(0.2, 0, 0, 1);
}

body.page-paper:has(.paper.is-menu-collapsed) .site-main::before,
body.page-paper:has(.paper__menu[data-state="collapsed"]) .site-main::before {
  width: 150px;
}

@media (max-width: 1023px) {
  body.page-paper {
    height: auto;
    overflow: auto;
    display: block;
  }
  body.page-paper .site-main {
    height: auto;
    overflow: visible;
  }
  body.page-paper .site-main::before {
    display: none;
  }
}

/* ====================================================================
   Paper shell
   ==================================================================== */
.paper {
  --paper-menu-width: 540px;
  --paper-menu-bar-height: 44px;
  --paper-tile-height: 125px;
  --paper-tile-gutter: 52px;
  --paper-tile-pad-left: 14px;
  --content-max-width: 788px;
  --tile-stroke: #3C3C3C;
  --sublink-rule: rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: var(--paper-menu-width) 1fr;
  align-items: stretch;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.paper:has(.paper__menu[data-state="collapsed"]),
.paper.is-menu-collapsed {
  --paper-menu-width: 150px;
  --content-max-width: 1100px;
}

@media (max-width: 1023px) {
  .paper,
  .paper:has(.paper__menu[data-state="collapsed"]),
  .paper.is-menu-collapsed {
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* ====================================================================
   Chapter menu column
   ==================================================================== */
.paper__menu {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: thin;
  background: transparent;
  z-index: 2;
}

.paper__menu::-webkit-scrollbar {
  width: 6px;
}
.paper__menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

@media (max-width: 1023px) {
  .paper__menu {
    height: auto;
    overflow: visible;
  }
}

/* ---------- Menu bar (home + collapse) ---------- */
.paper__menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--paper-menu-bar-height);
  padding: 0 var(--space-2);
  background:
    linear-gradient(145.586deg, rgba(0, 0, 0, 1) 50.161%, rgba(0, 0, 0, 0) 101.58%),
    rgb(17, 17, 17);
  border: 1px solid var(--tile-stroke);
}

/* Home/download buttons: borderless icons */
.paper__menu-home,
.paper__menu-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease;
}

.paper__menu-home:hover,
.paper__menu-home:focus-visible,
.paper__menu-download:hover,
.paper__menu-download:focus-visible {
  color: var(--white);
  text-decoration: none;
}

/* Collapse toggle: dark-gray stroke */
.paper__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--tile-stroke);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.paper__menu-toggle:hover,
.paper__menu-toggle:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.paper__menu-toggle svg {
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}

.paper__menu[data-state="collapsed"] .paper__menu-toggle svg {
  transform: rotate(180deg);
}

/* On mobile, menu bar is sticky just under the site header so the
   collapse toggle stays accessible while the user scrolls. */
@media (max-width: 1023px) {
  .paper__menu-bar {
    display: flex;
    position: sticky;
    top: 80px;
    z-index: 5;
  }
  /* When collapsed on mobile, hide the chapter grid entirely so the
     user can read content without scrolling past the menu. The
     menu bar itself stays visible so the toggle can be reopened. */
  .paper__menu[data-state="collapsed"] .paper__menu-grid {
    display: none;
  }
}

@media (max-width: 767px) {
  .paper__menu-bar {
    top: 64px; /* mobile header is shorter per global.css */
  }
}

/* ---------- Chapter grid ---------- */
.paper__menu-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(7, var(--paper-tile-height));
  position: relative;
  overflow: visible;
}

.paper__menu-fallback {
  grid-column: 1 / -1;
  padding: var(--space-3);
  color: var(--white);
  font-family: var(--font-body);
  opacity: 0.6;
  text-align: center;
}

@media (max-width: 1023px) {
  .paper__menu-grid {
    grid-template-rows: repeat(7, auto);
  }
}

/* ====================================================================
   Chapter tile
   ==================================================================== */
.chapter-tile {
  position: relative;
  height: var(--paper-tile-height);
  list-style: none;
  margin: 0;
}

.chapter-tile__panel {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--white);
  background:
    linear-gradient(145.586deg, rgba(0, 0, 0, 1) 50.161%, rgba(0, 0, 0, 0) 101.58%),
    rgb(17, 17, 17);
  border: 1px solid var(--tile-stroke);
  z-index: 1;
  transition: background 200ms ease, color 200ms ease;
}

.chapter-tile:hover .chapter-tile__panel,
.chapter-tile.is-active .chapter-tile__panel,
.chapter-tile:focus-within .chapter-tile__panel {
  color: var(--white);
  background: #3C3C3C;
  z-index: 20;
}

/* ---------- Chapter link (main) ---------- */
.chapter-tile__main {
  position: relative;
  display: grid;
  grid-template-columns: var(--paper-tile-gutter) 1fr;
  align-items: center;
  height: var(--paper-tile-height);
  color: inherit;
  text-decoration: none;
}

.chapter-tile__main:hover,
.chapter-tile__main:focus-visible,
.chapter-tile__main:active {
  text-decoration: none;
}

.chapter-tile__main:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

.chapter-tile__number-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding-left: var(--paper-tile-pad-left);
}

.chapter-tile__number {
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: inherit;
  text-decoration: none;
}

.chapter-tile__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--space-3) 0 var(--space-2);
  min-width: 0;
}

.chapter-tile__title {
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.chapter-tile:hover .chapter-tile__title,
.chapter-tile:focus-within .chapter-tile__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* ====================================================================
   Multi-cell drawer
   ====================================================================
   Drawer height is driven by sub count:
     2 subs   -> 1 row (125px), covers 2 cells below the active tile
     3+ subs  -> 2 rows (250px), covers 4 cells below the active tile
   The 3+ case is signaled by the .is-multi-3plus class added in
   paper.js when subsections.length >= 3.
   ==================================================================== */
.chapter-tile__drawer {
  display: none;
  position: absolute;
  top: var(--paper-tile-height);
  width: var(--paper-menu-width);
  /* One row minimum for 2-sub case; .is-multi-3plus doubles it */
  min-height: var(--paper-tile-height);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + 32px) calc(var(--paper-tile-gutter) + var(--space-2));
  background: #3C3C3C;
  border: 1px solid #3C3C3C;
  color: var(--white);
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* 3+ subs: drawer occupies 2 full tile rows */
.chapter-tile.is-multi-3plus .chapter-tile__drawer {
  min-height: calc(var(--paper-tile-height) * 2);
}

/* Drawer anchors to LEFT edge of menu regardless of which column
   the active tile is in */
.chapter-tile:nth-child(odd) .chapter-tile__drawer {
  left: 0;
}
.chapter-tile:nth-child(even) .chapter-tile__drawer {
  left: -100%;
}

.chapter-tile.is-multi:hover .chapter-tile__drawer,
.chapter-tile.is-multi.is-active:not(.subs-dismissed) .chapter-tile__drawer,
.chapter-tile.is-multi:focus-within:not(.subs-dismissed) .chapter-tile__drawer {
  display: block;
}

.chapter-tile.is-multi:hover .chapter-tile__drawer {
  z-index: 40;
}

/* ---------- Close button: bottom-left, aligned with chapter number ---------- */
.chapter-tile__close {
  position: absolute;
  /* Left edge matches the chapter number's left edge so the X sits
     visually under the number when the drawer is open. */
  left: var(--paper-tile-pad-left);
  bottom: var(--space-2);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.chapter-tile__close:hover,
.chapter-tile__close:focus-visible {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.chapter-tile.is-multi:not(.is-active) .chapter-tile__close {
  display: none;
}

/* ---------- Sub list inside drawer ---------- */
.chapter-tile__subs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.chapter-tile__sub {
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid var(--sublink-rule);
}

.chapter-tile__sub:first-child {
  border-top: 0;
  padding-top: 2px;
}

/* Bottom rule on the last sub so the list is fully bounded */
.chapter-tile__sub:last-child {
  border-bottom: 1px solid var(--sublink-rule);
  padding-bottom: 4px;
}

.chapter-tile__sub-link {
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  padding: 0;
}

.chapter-tile__sub.is-active .chapter-tile__sub-link {
  font-weight: 500;
}

.chapter-tile__sub.is-active .chapter-tile__sub-link::before {
  content: '\203A\203A\00a0';
  font-weight: 500;
}

.chapter-tile__sub-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ====================================================================
   Collapsed menu state (desktop): number-only tiles, no drawer
   ==================================================================== */
.paper__menu[data-state="collapsed"] .chapter-tile__main {
  grid-template-columns: 1fr;
}

.paper__menu[data-state="collapsed"] .chapter-tile__body,
.paper__menu[data-state="collapsed"] .chapter-tile__drawer {
  display: none;
}

.paper__menu[data-state="collapsed"] .chapter-tile.is-multi:hover .chapter-tile__drawer,
.paper__menu[data-state="collapsed"] .chapter-tile.is-multi.is-active .chapter-tile__drawer {
  display: none;
}

/* ====================================================================
   Content column
   ==================================================================== */
.paper__content {
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-6) var(--space-6) var(--space-8) var(--space-6);
  z-index: 1;
}

.paper__content-inner {
  max-width: var(--content-max-width);
  position: relative;
  z-index: 2;
  margin: 0 auto 0 0;
}

.paper__content:focus {
  outline: none;
}

.paper__charcoal {
  position: absolute;
  top: 0;
  right: 0;
  width: 303px;
  height: auto;
  max-height: 276px;
  transform: none;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

@media (max-width: 1023px) {
  .paper__content {
    height: auto;
    overflow: visible;
  }
  .paper__charcoal {
    width: 180px;
    opacity: 0.5;
  }
}

/* ---------- Reading typography ---------- */
.paper__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 3vw + 1rem, 4rem);
  line-height: 1.1;
  color: var(--paper-text);
}

.paper__subtitle {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--paper-text);
}

.paper__tagline {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--paper-text);
  font-style: normal;
}

.paper__rule {
  margin: var(--space-4) 0 var(--space-4);
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.55);
}

.paper__h2 {
  margin: var(--space-5) 0 var(--space-4);
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--paper-text);
}

.paper__h2 + .paper__body p:first-child {
  margin-top: var(--space-2);
}

.paper__h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--paper-text);
}

.paper__body p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display, 'Lora', serif);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-text);
}

.paper__body strong {
  font-weight: 700;
}

.paper__body em {
  font-style: italic;
}

.paper__body ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
}

.paper__body ul li {
  margin-bottom: 0.35rem;
  font-family: var(--font-display, 'Lora', serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--paper-text);
}

/* ====================================================================
   Callouts
   ====================================================================
   Use <div class="paper__callout"> for prose callouts. It supports
   multiple paragraphs and preserves inline markup such as <strong> and <em>.
   Use <pre class="paper__code-callout"><code>...</code></pre> for code.
   ==================================================================== */
.paper__callout {
  display: block;
  width: 100%;
  background: #f0efeb;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8px;
  padding: 22px 32px;
  margin: 32px 0;
  font-family: var(--font-jumbo, 'Jost', system-ui, sans-serif);
  white-space: normal;
  overflow-wrap: anywhere;
}

.paper__callout p {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--paper-text);
}

.paper__callout p + p {
  margin-top: 20px;
}

.paper__callout > p:first-child {
  margin-top: 0;
}

.paper__callout > p:last-child {
  margin-bottom: 0;
}

.paper__callout strong {
  font-weight: 700;
}

.paper__callout em {
  font-style: italic;
}

.paper__code-callout {
  display: block;
  width: 100%;
  margin: 32px 0;
  padding: 26px 30px;
  background: #ecebe6;
  border: 1px solid rgba(26, 26, 26, 0.16);
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre;
}

.paper__code-callout code {
  display: block;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #25231f;
  tab-size: 2;
}

.paper__code-window {
  margin: 32px 0;
  background: linear-gradient(180deg, #14131f 0%, #0f1020 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.paper__code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(6px);
}

.paper__code-dots {
  display: flex;
  gap: 8px;
}

.paper__code-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.paper__code-file {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.38);
}

.paper__code-body {
  overflow-x: auto;
  padding: 34px 30px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.9;
  white-space: pre;
  background: linear-gradient(180deg, #0d0e1d 0%, #0b0c18 100%);
}

.paper__code-body code {
  display: block;
  min-width: max-content;
  color: #d7dbff;
  -webkit-font-smoothing: antialiased;
}

/* muted syntax colors */

.paper__code-keyword {
  color: #6abec6 !important;
}

.paper__code-type {
  color: #b78358 !important;
}

.paper__code-string {
  color: #84b975 !important;
}

.paper__code-comment {
  color: rgba(255,255,255,0.38) !important;
}
/* ====================================================================
   Footer (paper-page overrides for SM icons + alignment)
   ==================================================================== */
body.page-paper .site-footer__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

body.page-paper .site-footer__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

body.page-paper .site-footer__tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #111111;
  text-decoration: none;
  transition: color 150ms ease;
}

body.page-paper .site-footer__tools a:hover,
body.page-paper .site-footer__tools a:focus-visible {
  color: #666666;
}

body.page-paper .site-footer__tools svg {
  width: 20px;
  height: 20px;
  display: block;
}

body.page-paper .site-footer__nav a {
  color: #111111;
  transition: color 150ms ease;
}

body.page-paper .site-footer__nav a:hover,
body.page-paper .site-footer__nav a:focus-visible {
  color: #666666;
}

/* ====================================================================
   Pagination
   ==================================================================== */
.paper__pagination {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.paper__pagination-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body, 'Jost', sans-serif);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--paper-text);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.paper__pagination-link[hidden] {
  display: none;
}

.paper__pagination-link--prev {
  margin-right: auto;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paper__pagination-link--next {
  margin-left: auto;
}

.paper__pagination-prefix {
  color: #111;
  font-weight: 400;
}

.paper__pagination-target {
  color: #878787;
  font-weight: 300;
  transition: color 150ms ease;
}

.paper__pagination-arrow {
  margin-left: 0.25em;
  color: #111;
}

.paper__pagination-link:hover {
  text-decoration: none;
}

.paper__pagination-link:hover .paper__pagination-target {
  color: #111;
}

.paper__pagination-link--prev::before {
  content: "←";
  display: inline-block;
  margin-right: 10px;
}

.paper__content li {
  margin-bottom: 0.35rem;
}

.paper__content li p {
  margin: 0;
}
/* ====================================================================
   Mobile (v1)
   ==================================================================== */
@media (max-width: 1023px) {
  .paper__content {
    padding: var(--space-4);
  }

  .chapter-tile {
    height: 90px;
  }

  .chapter-tile__main {
    grid-template-columns: 60px 1fr;
    height: 90px;
  }

  .chapter-tile__number {
    font-size: 32px;
  }

  /* Mobile drawer: inline below the tile, auto height, full width.
     Sub-count vertical expansion happens naturally since the drawer
     is no longer absolute-positioned. */
  .chapter-tile__drawer,
  .chapter-tile:nth-child(odd) .chapter-tile__drawer,
  .chapter-tile:nth-child(even) .chapter-tile__drawer,
  .chapter-tile.is-multi-3plus .chapter-tile__drawer {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 0;
    padding: var(--space-3) var(--space-3) var(--space-3) calc(60px + var(--space-2));
  }
}

@media (max-width: 640px) {
  .paper__title {
    font-size: 2rem;
  }

  .paper__pagination-link {
    font-size: 1.125rem;
  }
}

.paper__body .paper__callout {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.paper__body .paper__callout > *:first-child {
  margin-top: 0 !important;
}

.paper__body .paper__callout > *:last-child {
  margin-bottom: 0 !important;
}

/* ---------- Hard mobile code containment ---------- */
@media (max-width:768px){

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .paper-layout,
  .paper-main,
  .paper-content,
  .chapter-panel,
  .chapter-body,
  .chapter-content,
  .section-panel,
  .content-panel{
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  pre,
  code,
  .code-block,
  .code-snippet,
  .code-panel,
  .code-window,
  .code-frame,
  .code-lines,
  .code-content{
    min-width:0 !important;
    max-width:100% !important;
  }

  pre,
  .code-block,
  .code-snippet,
  .code-panel,
  .code-window,
  .code-frame,
  .code-content{
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  pre code,
  .code-block code,
  .code-snippet code,
  .code-panel code,
  .code-window code,
  .code-frame code{
    display:block;
    min-width:max-content !important;
    width:max-content !important;
    max-width:none !important;
    white-space:pre !important;
  }
}
/* ---------- IA file structure comparison ---------- */
.ia-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px;
}

.ia-compare__item{
  margin:0;
}

.ia-compare__item img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
}

.ia-compare__item figcaption{
  margin-top:10px;
  font-size:.9rem;
  line-height:1.5;
  color:rgba(0,0,0,.62);
}

@media (max-width:768px){
  .ia-compare{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* ---------- Paper rail PDF download icon ---------- */
.paper__menu-download{
  margin-left: 4px;
  margin-right: auto;
}