/* ============================================================
   flyExclusive — Document Library (/docs) + Flipbook Reader
   Loaded AFTER css/luxury.css. Owns two surfaces:
     1. .fex-doclib-*   the card grid at /docs/
     2. .fex-doc-*      the reader at /docs/view.html
   plus .textLayer, which is pdf.js's own contract (it writes those
   spans itself and expects this exact positioning model).

   Treatment is Luxury Style System v2.0: 0px corners, hairline
   rules, ghost buttons, Galano Light 300 display type, .32em
   eyebrows, navy/blue palette. The reader deliberately runs on a
   deep-navy stage so the paper reads as paper.

   Every selector is prefixed. The Webflow export sheet defines
   hundreds of element-level rules, so anything it also targets
   (h1/h2/p/a/ul/li/input/button) is restated here rather than
   inherited, and this file loads last so equal specificity
   resolves in its favour.
   ============================================================ */

/* ============================================================
   0 · SHARED PRIMITIVES
   ============================================================ */
.fex-doc-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.fex-doclib-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,40px);
}

/* ============================================================
   1 · LIBRARY  (/docs/)
   ============================================================ */
.fex-doclib-page{background:var(--fe-paper)}

.fex-doclib-hero{
  background:var(--fe-navy-900);
  color:#fff;
  padding:clamp(96px,12vw,150px) 0 clamp(48px,6vw,72px);
  position:relative;
  overflow:hidden;
}
/* Hairline horizon so the band has an edge without a border box. */
.fex-doclib-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(109,179,214,.55),transparent);
}
.fex-doclib-hero__eyebrow{
  font-family:var(--lux-font);font-size:12px;font-weight:500;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-blue-300);margin:0 0 18px;
}
/* luxury.css defeats Webflow's class-level heading colours with
   h1[class],h2[class],h3[class],h4[class]{color:var(--fe-navy)} — an (0,1,1)
   selector that outranks a bare class. Every heading below therefore names
   its element too, so it ties at (0,1,1) and wins on order. Dropping the
   element prefix leaves navy text on the navy reader chrome. */
h1.fex-doclib-hero__h1{
  font-family:var(--lux-font);font-weight:300;
  font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-.01em;
  color:#fff;margin:0;text-wrap:balance;
}
.fex-doclib-hero__lede{
  font-family:var(--lux-font);font-weight:300;
  font-size:clamp(16px,1.5vw,19px);line-height:1.65;
  color:var(--fe-blue-200);margin:20px 0 0;max-width:62ch;
}

/* ---- control bar: search + category filters ---- */
.fex-doclib-controls{
  border-bottom:1px solid var(--fe-line);
  background:var(--fe-paper);
  padding:26px 0;
}
.fex-doclib-controls__inner{
  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;
  justify-content:space-between;
}
.fex-doclib-filters{
  display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;
}
/* An author `display` beats the UA's [hidden] rule, so every element this
   file gives a display value to and the scripts also toggle with `hidden`
   needs the attribute restated. Missing one leaves a control that the
   script believes is hidden sitting visibly on the page. */
.fex-doclib-filters[hidden]{display:none}
.fex-doclib-filters li{margin:0;padding:0}
.fex-doclib-chip{
  font-family:var(--lux-font);font-size:12px;font-weight:500;
  letter-spacing:var(--lux-track-caps);text-transform:uppercase;
  color:var(--fe-slate);background:transparent;
  border:1px solid var(--fe-line);border-radius:0;
  padding:9px 16px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.fex-doclib-chip:hover{color:var(--fe-navy);border-color:var(--fe-blue-400)}
.fex-doclib-chip[aria-pressed="true"]{
  background:var(--fe-navy);border-color:var(--fe-navy);color:#fff;
}
.fex-doclib-search{position:relative;flex:0 1 320px;min-width:220px}
.fex-doclib-search input{
  font-family:var(--lux-font);font-size:15px;font-weight:300;
  color:var(--fe-ink);background:var(--fe-paper);
  width:100%;height:44px;padding:0 14px;
  border:1px solid var(--fe-line);border-radius:0;
  transition:border-color .2s ease;
}
.fex-doclib-search input:focus{outline:none;border-color:var(--fe-blue)}
.fex-doclib-search input::placeholder{color:var(--fe-slate);opacity:.8}

/* ---- grid ---- */
.fex-doclib-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(24px,3vw,40px);
  padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px);
  margin:0;list-style:none;
}
.fex-doclib-grid li{margin:0;padding:0}

.fex-doclib-card{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;background:var(--fe-paper);
}
.fex-doclib-card:hover{text-decoration:none}

/* The cover is a live pdf.js render of page 1, so the tile has to hold
   its shape before the canvas lands or the grid reflows on every paint. */
.fex-doclib-cover{
  position:relative;
  aspect-ratio:1 / 1.294;              /* US Letter portrait */
  background:var(--fe-surface-grey);
  border:1px solid var(--fe-line);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.fex-doclib-card--landscape .fex-doclib-cover{aspect-ratio:1.294 / 1}
.fex-doclib-cover canvas,
.fex-doclib-cover img{
  display:block;max-width:100%;max-height:100%;
  width:auto;height:auto;
  box-shadow:0 10px 30px rgba(0,39,77,.14);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.fex-doclib-card:hover .fex-doclib-cover canvas,
.fex-doclib-card:hover .fex-doclib-cover img{transform:scale(1.035)}
.fex-doclib-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,39,77,.22));
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.fex-doclib-card:hover .fex-doclib-cover::after{opacity:1}

.fex-doclib-cover__badge{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--lux-font);font-size:10px;font-weight:600;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:#fff;background:var(--fe-navy-900);padding:7px 11px;
}
.fex-doclib-cover__open{
  position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%) scale(.94);
  font-family:var(--lux-font);font-size:11px;font-weight:500;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:#fff;background:rgba(0,39,77,.86);padding:12px 20px;
  opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.fex-doclib-card:hover .fex-doclib-cover__open,
.fex-doclib-card:focus-visible .fex-doclib-cover__open{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}

.fex-doclib-card__body{padding:18px 0 0;flex:1 1 auto;display:flex;flex-direction:column}
.fex-doclib-card__cat{
  font-family:var(--lux-font);font-size:11px;font-weight:500;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-blue-600);margin:0 0 8px;
}
h2.fex-doclib-card__title{
  font-family:var(--lux-font);font-weight:400;
  font-size:19px;line-height:1.3;color:var(--fe-navy-900);
  margin:0;text-wrap:balance;
}
.fex-doclib-card:hover h2.fex-doclib-card__title{color:var(--fe-blue-600)}
.fex-doclib-card__desc{
  font-family:var(--lux-font);font-weight:300;font-size:15px;line-height:1.6;
  color:var(--fe-slate);margin:10px 0 0;
}
.fex-doclib-card__meta{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:16px;
  border-top:1px solid var(--fe-line);
  font-family:var(--lux-font);font-size:12px;font-weight:400;
  letter-spacing:var(--lux-track-caps);text-transform:uppercase;
  color:var(--fe-slate);
}
.fex-doclib-card__meta span + span::before{content:"·";margin-right:10px}
.fex-doclib-card__arrow{margin-left:auto;color:var(--fe-blue);font-size:15px}

.fex-doclib-empty{
  padding:clamp(48px,7vw,96px) 0;text-align:center;
  font-family:var(--lux-font);font-weight:300;font-size:18px;color:var(--fe-slate);
}
.fex-doclib-empty[hidden]{display:none}

/* Skeleton tiles shown between first paint and the manifest resolving. */
.fex-doclib-card--skeleton .fex-doclib-cover{
  background:linear-gradient(100deg,var(--fe-surface-grey) 30%,#f6f7f9 50%,var(--fe-surface-grey) 70%);
  background-size:280% 100%;
  animation:fexDocShimmer 1.5s ease-in-out infinite;
}
@keyframes fexDocShimmer{from{background-position:180% 0}to{background-position:-80% 0}}

/* ============================================================
   2 · READER SHELL  (/docs/view.html)
   ============================================================ */
.fex-doc-reader{
  background:var(--fe-navy-900);
  color:#fff;
  display:flex;flex-direction:column;
  /* Sits below the fixed site header and owns exactly the rest of the
     viewport, so the stage can size the book against a known box. The
     header is measured at runtime — it is a different height scrolled
     than at rest, and different again under 768px — and published as
     --fex-header-h. The literal is only the pre-measurement fallback. */
  margin-top:var(--fex-header-h,84px);
  height:calc(100vh - var(--fex-header-h,84px));
  min-height:520px;
}
.fex-doc-reader:fullscreen{margin-top:0;height:100vh}

/* ---- top bar: identity + document actions ---- */
.fex-doc-topbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px clamp(16px,3vw,28px);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:var(--fe-navy-900);
}
/* There is no back-to-library control here, and there should not be one:
   the reader is a dead end by design (see the comment in docs/view.html). */
.fex-doc-titlewrap{min-width:0;flex:1 1 260px}
h1.fex-doc-title{
  font-family:var(--lux-font);font-weight:300;font-size:clamp(16px,2vw,21px);
  line-height:1.25;color:#fff;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fex-doc-subtitle{
  font-family:var(--lux-font);font-size:11px;font-weight:500;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-blue-300);margin:4px 0 0;
}
.fex-doc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- the shared button vocabulary for every reader control ---- */
.fex-doc-btn{
  font-family:var(--lux-font);font-size:12px;font-weight:500;
  letter-spacing:var(--lux-track-caps);text-transform:uppercase;
  color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.28);border-radius:0;
  min-height:38px;padding:0 14px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;
}
.fex-doc-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:#fff;text-decoration:none}
.fex-doc-btn:focus-visible{outline:2px solid var(--fe-blue-400);outline-offset:2px}
.fex-doc-btn[aria-pressed="true"]{background:var(--fe-blue);border-color:var(--fe-blue);color:#fff}
.fex-doc-btn[hidden]{display:none}
.fex-doc-btn:disabled{opacity:.32;cursor:default}
.fex-doc-btn:disabled:hover{background:transparent;border-color:rgba(255,255,255,.28)}
.fex-doc-btn--icon{width:38px;padding:0}
.fex-doc-btn--solid{background:var(--fe-blue);border-color:var(--fe-blue)}
.fex-doc-btn--solid:hover{background:#fff;border-color:#fff;color:var(--fe-navy-900)}
.fex-doc-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- body: optional left rail + stage ---- */
.fex-doc-body{display:flex;flex:1 1 auto;min-height:0;position:relative}

.fex-doc-rail{
  width:216px;flex:none;
  border-right:1px solid rgba(255,255,255,.12);
  background:rgba(0,20,41,.55);
  display:flex;flex-direction:column;min-height:0;
}
.fex-doc-rail[hidden]{display:none}
.fex-doc-rail__head{
  display:flex;gap:2px;padding:10px 10px 0;
}
.fex-doc-rail__tab{
  flex:1 1 0;
  font-family:var(--lux-font);font-size:11px;font-weight:500;
  letter-spacing:var(--lux-track-caps);text-transform:uppercase;
  color:var(--fe-blue-200);background:transparent;
  border:0;border-bottom:1px solid rgba(255,255,255,.16);
  padding:10px 6px;cursor:pointer;transition:color .2s ease,border-color .2s ease;
}
.fex-doc-rail__tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--fe-blue)}
.fex-doc-rail__tab[hidden]{display:none}
.fex-doc-rail__panel{flex:1 1 auto;overflow-y:auto;padding:14px 10px 20px;min-height:0}
.fex-doc-rail__panel[hidden]{display:none}

/* thumbnails */
.fex-doc-thumbs{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;list-style:none}
.fex-doc-thumbs li{margin:0}
.fex-doc-thumb{
  display:block;width:100%;padding:0;cursor:pointer;background:transparent;
  border:1px solid rgba(255,255,255,.18);
  transition:border-color .2s ease,transform .2s ease;
}
.fex-doc-thumb:hover{border-color:var(--fe-blue-400);transform:translateY(-1px)}
.fex-doc-thumb[aria-current="true"]{border-color:var(--fe-blue);box-shadow:0 0 0 1px var(--fe-blue)}
.fex-doc-thumb canvas{display:block;width:100%;height:auto;background:#fff}
.fex-doc-thumb__ph{display:block;width:100%;aspect-ratio:1 / 1.294;background:rgba(255,255,255,.06)}
.fex-doc-thumb__n{
  display:block;font-family:var(--lux-font);font-size:11px;
  letter-spacing:var(--lux-track-caps);color:var(--fe-blue-200);
  padding:6px 0;text-align:center;
}

/* contents / outline */
.fex-doc-outline{margin:0;padding:0;list-style:none}
.fex-doc-outline li{margin:0}
.fex-doc-outline button{
  display:block;width:100%;text-align:left;background:transparent;border:0;
  font-family:var(--lux-font);font-size:13px;font-weight:300;line-height:1.45;
  color:var(--fe-blue-200);padding:8px 6px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s ease,background-color .2s ease;
}
.fex-doc-outline button:hover{color:#fff;background:rgba(255,255,255,.06)}
.fex-doc-outline--depth1{padding-left:12px}
.fex-doc-outline--depth2{padding-left:24px}

/* search panel */
.fex-doc-find{display:flex;flex-direction:column;gap:12px;height:100%}
.fex-doc-find__field input{
  font-family:var(--lux-font);font-size:14px;font-weight:300;
  width:100%;height:38px;padding:0 12px;color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);border-radius:0;
}
.fex-doc-find__field input:focus{outline:none;border-color:var(--fe-blue)}
.fex-doc-find__field input::placeholder{color:var(--fe-blue-200);opacity:.75}
.fex-doc-find__status{
  font-family:var(--lux-font);font-size:11px;letter-spacing:var(--lux-track-caps);
  text-transform:uppercase;color:var(--fe-blue-300);
}
.fex-doc-find__list{margin:0;padding:0;list-style:none;overflow-y:auto}
.fex-doc-find__list li{margin:0}
.fex-doc-find__hit{
  display:block;width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 6px;cursor:pointer;transition:background-color .2s ease;
}
.fex-doc-find__hit:hover{background:rgba(255,255,255,.07)}
.fex-doc-find__hit b{
  display:block;font-family:var(--lux-font);font-size:10px;font-weight:600;
  letter-spacing:var(--lux-track-eyebrow);text-transform:uppercase;
  color:var(--fe-blue);margin-bottom:4px;
}
.fex-doc-find__hit span{
  font-family:var(--lux-font);font-size:13px;font-weight:300;line-height:1.5;
  color:var(--fe-blue-200);
}
.fex-doc-find__hit mark{background:rgba(41,159,207,.4);color:#fff;padding:0 1px}

/* ============================================================
   3 · STAGE + FLIPBOOK
   ============================================================ */
.fex-doc-stage{
  flex:1 1 auto;min-width:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,3vw,38px);
  overflow:auto;
  /* A zoomed page scrolls inside the stage; reaching its edge must not
     start scrolling the document behind it toward the footer. */
  overscroll-behavior:contain;
  /* A faint vignette so the paper sits in a room rather than on a flat fill. */
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(41,159,207,.12),transparent 60%),
    var(--fe-navy-900);
}
.fex-doc-stage:focus{outline:none}
.fex-doc-stage:focus-visible{outline:2px solid var(--fe-blue-400);outline-offset:-4px}

/* The perspective box. Its width is driven from JS (--fex-book-w) because it
   has to satisfy both the page aspect ratio and the available height. */
.fex-doc-book{
  position:relative;
  width:var(--fex-book-w,900px);
  height:var(--fex-book-h,600px);
  perspective:2600px;
  perspective-origin:50% 50%;
  margin:auto;
  transition:width .28s ease,height .28s ease;
  flex:none;
}

.fex-doc-leaf{
  position:absolute;top:0;height:100%;
  background:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35);
  overflow:hidden;
}
/* Single-page mode: one leaf filling the book. The verso slot still exists
   in the DOM (so switching modes never rebuilds it) but has nothing to show. */
.fex-doc-book--single .fex-doc-leaf{left:0;width:100%}
.fex-doc-book--single .fex-doc-leaf--verso{display:none}
/* Spread mode: two half-width leaves meeting at the spine. */
.fex-doc-book--spread .fex-doc-leaf--verso{left:0;width:50%}
.fex-doc-book--spread .fex-doc-leaf--recto{left:50%;width:50%}
/* The gutter shadow that sells "these two pages are bound together". */
.fex-doc-book--spread .fex-doc-leaf--verso::after,
.fex-doc-book--spread .fex-doc-leaf--recto::after{
  content:"";position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:3;
}
.fex-doc-book--spread .fex-doc-leaf--verso::after{
  right:0;background:linear-gradient(90deg,transparent,rgba(0,20,41,.20));
}
.fex-doc-book--spread .fex-doc-leaf--recto::after{
  left:0;background:linear-gradient(270deg,transparent,rgba(0,20,41,.20));
}

.fex-doc-leaf__canvas{display:block;width:100%;height:100%}
.fex-doc-leaf--blank{background:#f2f3f5}

/* ---- the turning leaf ---- */
/* Sits above the static leaves, rotates about the spine, and is removed the
   moment the animation ends. Two faces: the page you are leaving on the
   front, the page you are arriving at on the back. Because the back face
   duplicates the static leaf underneath it, the landing is seamless. */
.fex-doc-flip{
  position:absolute;top:0;height:100%;
  transform-style:preserve-3d;
  z-index:5;pointer-events:none;
  will-change:transform;
}
.fex-doc-flip__face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:#fff;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.fex-doc-flip__face img,
.fex-doc-flip__face canvas{display:block;width:100%;height:100%;object-fit:fill}
.fex-doc-flip__face--back{transform:rotateY(180deg)}
/* Light that rakes across the leaf as it lifts — the whole illusion of
   thickness comes from this, not from geometry. */
.fex-doc-flip__face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,20,41,.34),rgba(0,20,41,0) 42%);
  opacity:0;transition:opacity .18s linear;
}
.fex-doc-flip--lit .fex-doc-flip__face::after{opacity:1}

/* Forward turn: grab the right edge, swing it left about the spine. */
.fex-doc-flip--fwd{transform-origin:left center}
.fex-doc-flip--bwd{transform-origin:right center}

@keyframes fexDocTurnFwd{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(-180deg)}
}
@keyframes fexDocTurnBwd{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(180deg)}
}
.fex-doc-flip--animate.fex-doc-flip--fwd{
  animation:fexDocTurnFwd var(--fex-turn,620ms) cubic-bezier(.42,0,.28,1) forwards;
}
.fex-doc-flip--animate.fex-doc-flip--bwd{
  animation:fexDocTurnBwd var(--fex-turn,620ms) cubic-bezier(.42,0,.28,1) forwards;
}

/* Click targets for turning, kept to the bottom outer corners. They sit
   above the text layer, so a full-height strip down each side would eat
   text selection along both margins — the corner is where a reader reaches
   for a page anyway, and it leaves the body of the page selectable. */
.fex-doc-hot{
  position:absolute;bottom:0;width:14%;height:56%;z-index:4;
  background:transparent;border:0;padding:0;cursor:pointer;
}
.fex-doc-hot--prev{left:0}
.fex-doc-hot--next{right:0}
.fex-doc-hot:disabled{cursor:default}
.fex-doc-hot:focus-visible{outline:2px solid var(--fe-blue-400);outline-offset:-4px}
/* The affordance: a shaded corner on hover, as if the page were lifting. */
.fex-doc-hot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .28s ease;
}
.fex-doc-hot--next::after{background:linear-gradient(315deg,rgba(0,39,77,.30),rgba(0,39,77,0) 46%)}
.fex-doc-hot--prev::after{background:linear-gradient(45deg,rgba(0,39,77,.30),rgba(0,39,77,0) 46%)}
.fex-doc-hot:hover:not(:disabled)::after,
.fex-doc-hot:focus-visible::after{opacity:1}

/* ---- loading + error states over the stage ---- */
.fex-doc-veil{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(0,20,41,.92);text-align:center;padding:24px;
}
.fex-doc-veil[hidden]{display:none}
.fex-doc-veil__spinner{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.2);
  border-top-color:var(--fe-blue);border-radius:50%;
  animation:fexDocSpin 900ms linear infinite;
}
@keyframes fexDocSpin{to{transform:rotate(360deg)}}
.fex-doc-veil__msg{
  font-family:var(--lux-font);font-weight:300;font-size:15px;
  letter-spacing:var(--lux-track-caps);color:var(--fe-blue-200);margin:0;max-width:46ch;
}
.fex-doc-veil__msg strong{display:block;font-weight:400;color:#fff;margin-bottom:8px;font-size:18px}

/* ---- bottom bar: paging + zoom ---- */
.fex-doc-bottombar{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:12px clamp(16px,3vw,28px);
  border-top:1px solid rgba(255,255,255,.12);
  background:var(--fe-navy-900);
}
.fex-doc-pageform{display:flex;align-items:center;gap:8px}
.fex-doc-pageform input{
  font-family:var(--lux-font);font-size:13px;font-weight:400;text-align:center;
  width:56px;height:38px;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);border-radius:0;
  -moz-appearance:textfield;
}
.fex-doc-pageform input::-webkit-outer-spin-button,
.fex-doc-pageform input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fex-doc-pageform input:focus{outline:none;border-color:var(--fe-blue)}
.fex-doc-pagecount{
  font-family:var(--lux-font);font-size:12px;letter-spacing:var(--lux-track-caps);
  text-transform:uppercase;color:var(--fe-blue-200);white-space:nowrap;
}
.fex-doc-zoomlevel{
  font-family:var(--lux-font);font-size:12px;letter-spacing:var(--lux-track-caps);
  color:var(--fe-blue-200);min-width:52px;text-align:center;
}
.fex-doc-sep{width:1px;height:24px;background:rgba(255,255,255,.16);margin:0 4px}

/* ---- winning the fill back from the global field rule ----
   luxury.css styles every non-button input with
     input:not([type=checkbox]):not([type=radio]):not([type=submit])
          :not([type=button]):not([type=image])
   which is specificity (0,5,1) and paints a white fill with a hairline
   border. That is right for a form on white paper and wrong for the two
   fields that live on the reader's navy chrome, where it renders white
   text on white. Both are singletons that already carry an id for the
   script, so an id selector is the least invasive way to outrank it —
   the alternative is restating that whole :not() chain twice, and
   !important would take the fields out of the cascade entirely. */
#fexDocPageInput,
#fexDocFindInput{
  background-color:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
}
#fexDocPageInput:focus,
#fexDocFindInput:focus{
  background-color:rgba(255,255,255,.1);
  border-color:var(--fe-blue);
  box-shadow:none;
}

/* Reading progress, pinned to the very bottom of the shell. */
.fex-doc-progress{height:2px;background:rgba(255,255,255,.1);flex:none}
.fex-doc-progress__bar{
  height:100%;width:0;background:var(--fe-blue);
  transition:width .35s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   4 · pdf.js TEXT + LINK LAYERS
   pdf.js positions these spans itself; the rules below are the
   positioning contract it renders against. Do not "tidy" them.
   ============================================================ */
.fex-doc-textlayer{
  position:absolute;inset:0;overflow:hidden;
  opacity:1;line-height:1;
  text-align:initial;
  z-index:2;
  forced-color-adjust:none;
}
.fex-doc-textlayer span,
.fex-doc-textlayer br{
  color:transparent;position:absolute;white-space:pre;
  cursor:text;transform-origin:0% 0%;
}
.fex-doc-textlayer span::selection{background:rgba(41,159,207,.35)}
.fex-doc-textlayer .fex-doc-hl{
  background:rgba(255,214,0,.45);border-radius:1px;
  color:transparent;padding:0;margin:0;
}
.fex-doc-textlayer .fex-doc-hl--active{background:rgba(255,153,0,.7)}

.fex-doc-linklayer{position:absolute;inset:0;z-index:3}
.fex-doc-linklayer a{
  position:absolute;display:block;
  background:rgba(41,159,207,.001);          /* hit area without a visible tint */
  border-bottom:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease;
}
.fex-doc-linklayer a:hover{background:rgba(41,159,207,.18);border-bottom-color:var(--fe-blue)}

/* ============================================================
   5 · RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .fex-doc-rail{
    position:absolute;left:0;top:0;bottom:0;z-index:12;width:250px;
    background:#001429;box-shadow:22px 0 50px rgba(0,0,0,.45);
  }
}
@media (max-width:720px){
  .fex-doc-topbar{gap:10px;padding:12px 16px}
  .fex-doc-title{white-space:normal}
  .fex-doc-actions{width:100%;justify-content:flex-start}
  /* Labels drop; the icons carry the meaning and keep the bar on one row. */
  .fex-doc-btn__label{display:none}
  .fex-doc-btn{padding:0 11px}
  .fex-doc-btn--keeplabel .fex-doc-btn__label{display:inline}
  .fex-doc-stage{padding:12px}
  .fex-doc-bottombar{gap:6px;padding:10px 12px}
  .fex-doc-hot{width:26%}
  .fex-doclib-controls__inner{flex-direction:column;align-items:stretch}
  .fex-doclib-search{flex:1 1 auto}
}

/* ============================================================
   6 · MOTION + PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  /* The turn is decorative; the page change is not. JS reads this same
     query and swaps pages instantly rather than animating a 0s flip. */
  .fex-doc-flip--animate.fex-doc-flip--fwd,
  .fex-doc-flip--animate.fex-doc-flip--bwd{animation-duration:1ms}
  .fex-doc-book,
  .fex-doclib-cover canvas,
  .fex-doclib-cover img,
  .fex-doc-progress__bar{transition:none}
  .fex-doclib-card--skeleton .fex-doclib-cover{animation:none}
}

@media print{
  /* Printing the shell prints a navy rectangle. Send people to the PDF. */
  .fex-doc-reader{display:none}
  .fex-doc-printnote{display:block !important;padding:40px;font-family:var(--lux-font)}
}
.fex-doc-printnote{display:none}