/* ============================================================
   SUSTENZA E-LIBRARY
   A research surface, not a marketing one. It borrows the site's tokens so it
   reads as the same product, then diverges where research needs differ:
   denser type, a fixed reading measure, hairlines instead of cards, and a
   left rail that stays put while the text scrolls.

   It mounts as a full view over the page rather than a section in the scroll,
   because a library is somewhere you GO, not something you pass on the way to
   the contact form.
   ============================================================ */

.lib{
  position:fixed;inset:0;z-index:120;
  background:var(--paper);color:var(--ink);
  display:none;flex-direction:column;
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  overscroll-behavior:contain;
}
.lib.is-open{display:flex}
body.lib-open{overflow:hidden}

/* ============================================================
   BUTTON RESET, SCOPED
   The host page resets buttons to font-family and cursor only
   (index.html:112), so every button in here was inheriting the UA
   appearance: #F0F0F0 buttonface, a 2px outset border, 13.33px text and
   pure black. That is what made list rows and search hits render as native
   grey buttons instead of list items. Scoped to .lib so the marketing
   page's own buttons are untouched.

   :where() keeps this at zero specificity - written as `.lib button` it
   scores (0,1,1) and outranks every single-class component rule in this
   file, which stripped .lib__chip and .lib__coll of their own background,
   border and 12.8px type. A reset must not outrank the things it resets.
   ============================================================ */
:where(.lib) button{
  background:none;border:0;color:inherit;font:inherit;
  text-align:inherit;
}

/* ---------- chrome ---------- */
.lib__bar{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:0 clamp(14px,3vw,26px);min-height:60px;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--hairline);
}
.lib__back{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;min-width:40px;padding:0 11px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--muted);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.lib__back:hover{background:var(--lib-t3);color:var(--ink)}
.lib__back svg{width:16px;height:16px;flex:none}
.lib__wordmark{
  font-weight:600;font-size:15px;letter-spacing:-.015em;color:var(--ink);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.lib__wordmark span{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);padding:3px 7px;border:1px solid var(--hairline);border-radius:5px;
}
.lib__bar-sp{flex:1}
.lib__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:8px;color:var(--muted);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.lib__close:hover{background:var(--lib-t3);color:var(--ink)}
.lib__close svg{width:19px;height:19px}

.lib__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.lib__in{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 90px}

/* ---------- home ---------- */
.lib__hero{padding:clamp(38px,6vw,68px) 0 clamp(24px,3vw,34px);max-width:760px}
.lib__eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);display:flex;align-items:center;gap:9px;margin-bottom:16px;
}
.lib__eyebrow::before{content:"";width:18px;height:1px;background:var(--hairline)}
.lib__hero h1{
  font-size:clamp(31px,4.6vw,50px);line-height:1.04;letter-spacing:-.032em;
  font-weight:600;margin-bottom:15px;
}
.lib__hero p{color:var(--muted);font-size:clamp(15px,1.3vw,17px);line-height:1.6;max-width:60ch}

/* search */
.lib__search{position:relative;margin:clamp(22px,3vw,32px) 0 10px;max-width:760px}
.lib__search svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted-2);pointer-events:none;
}
.lib__search input{
  width:100%;min-height:56px;padding:0 16px 0 46px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:11px;
  font:inherit;font-size:16px;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.lib__search input::placeholder{color:var(--muted-2)}
.lib__search input:focus{outline:none;border-color:var(--ink);box-shadow:var(--shadow-md)}
.lib__hint{font-size:12.5px;color:var(--muted-2);margin-top:9px}
.lib__hint b{font-weight:600;color:var(--muted)}

/* category grid */
.lib__h2{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin:clamp(34px,4vw,46px) 0 15px;
  padding-bottom:9px;border-bottom:1px solid var(--hairline);
}
.lib__cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px}
.lib__cat{
  display:block;text-align:left;padding:17px 17px 15px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:11px;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.lib__cat:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.lib__cat:active{transform:translateY(0)}
.lib__cat h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.lib__cat p{font-size:12.8px;color:var(--muted);line-height:1.5}
.lib__cat b{
  display:block;margin-top:9px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);
}

/* ---------- document list ---------- */
.lib__filters{
  display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;
  padding-bottom:16px;border-bottom:1px solid var(--hairline);
}
.lib__chip{
  padding:7px 13px;border-radius:999px;border:1px solid var(--hairline);
  background:var(--surface);font-size:12.8px;font-weight:500;color:var(--muted);
  min-height:34px;transition:all .15s var(--ease);
}
.lib__chip:hover{border-color:var(--muted-2);color:var(--ink)}
.lib__chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* A document is an object, not a line in a list. Eighty rows separated by
   hairlines read as a wall; raised cards let the eye pick one out. The lift is
   an inset top highlight plus layered shadow rather than a drop shadow alone,
   because a drop shadow does not read on the dark theme's ground. */
.lib__row{
  display:block;text-align:left;width:100%;
  padding:16px 18px;margin-bottom:12px;
  background:var(--surface,#fff);
  border:1px solid var(--hairline);
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 1px 2px rgba(17,44,40,.05),
    0 6px 16px -10px rgba(17,44,40,.22);
  transform:translateZ(0);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             border-color .18s var(--ease);
}
.lib__row:hover{
  transform:translateY(-2px);
  border-color:var(--muted-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 2px 4px rgba(17,44,40,.06),
    0 18px 34px -16px rgba(17,44,40,.34);
}
.lib__row:active{transform:translateY(0)}

/* On the dark ground the highlight does the lifting and the shadow deepens. */
.lib.is-dark .lib__row{
  background:var(--lib-t1);
  box-shadow:
    inset 0 1px 0 rgba(180,255,222,.10),
    0 1px 2px rgba(0,0,0,.45),
    0 10px 26px -14px rgba(0,0,0,.7);
}
.lib.is-dark .lib__row:hover{
  box-shadow:
    inset 0 1px 0 rgba(180,255,222,.16),
    0 2px 6px rgba(0,0,0,.5),
    0 22px 44px -18px rgba(0,0,0,.85);
}
.lib__row h3{font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.35;margin-bottom:7px}
.lib__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lib__tag{
  font-size:10.6px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;background:var(--lib-t3);color:var(--muted);
}
.lib__tag--type{background:var(--gold-soft);color:var(--lib-on-gold)}
.lib__note{font-size:12.8px;color:var(--muted);line-height:1.55;margin-top:8px;max-width:78ch}

/* status */
.lib__st{
  font-size:10.6px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 7px;border-radius:4px;
}
.lib__st--current{background:var(--verified-soft);color:var(--lib-on-ok)}
.lib__st--verify{background:var(--lib-warn-bg);color:var(--lib-on-gold)}
.lib__st--none{background:var(--lib-t3);color:var(--muted-2)}

/* ---------- document / reader ---------- */
/* Two columns ONLY when there is a contents rail to put in the first one.
   Written as a fixed `266px 1fr`, a document with no rail had a single child,
   which landed in the 266px track - so every guidance document and FAQ, which
   is most of the library, rendered its PDF in a 266px column with the rest of
   the width empty. */
.lib__doc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,30px);align-items:start}
.lib__doc:has(.lib__toc){grid-template-columns:248px minmax(0,1fr)}
@media (max-width:900px){ .lib__doc,.lib__doc:has(.lib__toc){grid-template-columns:minmax(0,1fr)} }

.lib__toc{position:sticky;top:18px;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:4px}
@media (max-width:900px){
  /* On one column the rail would sit ON TOP of the document, pushing the PDF
     to 650px on an 844px screen - 37% of it visible. The reader came for the
     document, so the document goes first and the contents follow it. */
  .lib__doc{display:flex;flex-direction:column}
  .lib__doc > div{order:1}
  .lib__toc{order:2}
  .lib__toc{position:static;max-height:320px;border:1px solid var(--hairline);
    border-radius:11px;padding:12px;background:var(--surface);
    margin:18px 0 0;overflow-y:auto}
}
.lib__toc-h{
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:11px;
}
.lib__toc a{
  display:block;padding:7px 10px;border-radius:7px;font-size:13.2px;line-height:1.4;overflow-wrap:anywhere;
  color:var(--muted);border-left:2px solid transparent;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.lib__toc a:hover{background:var(--lib-t3);color:var(--ink)}
.lib__toc a.on{background:var(--verified-soft);color:var(--lib-on-ok);border-left-color:var(--verified);font-weight:500}
/* The rule number is a flex item. Without flex:none it shrinks, and the
   overflow-wrap:anywhere on the row then breaks INSIDE the number - which is
   why every two-digit rule rendered as a stacked "1 / 0". Fixed width also
   lines the headings up into a column. */
.lib__toc a i,.lib__toc-x i{
  font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted-2);
  flex:0 0 auto;min-width:2.2em;white-space:nowrap;overflow-wrap:normal;
  text-align:right;margin-right:0;
}

.lib__crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12.6px;color:var(--muted-2);padding:20px 0 14px}
.lib__crumb a{color:var(--muted)}
.lib__crumb a:hover{color:var(--ink);text-decoration:underline}

.lib__title{font-size:clamp(23px,2.9vw,34px);line-height:1.14;letter-spacing:-.026em;font-weight:600;margin-bottom:13px}
.lib__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:10px;
  overflow:hidden;margin:17px 0 22px;
}
.lib__fact{background:var(--surface);padding:11px 13px}
.lib__fact dt{font-size:10.4px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.lib__fact dd{font-size:13.4px;color:var(--ink);line-height:1.4}

.lib__acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.lib__btn{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
  border-radius:8px;border:1px solid var(--hairline);background:var(--surface);
  font-size:13.4px;font-weight:500;color:var(--ink);
  transition:border-color .15s var(--ease),background .15s var(--ease),transform .12s var(--ease);
}
.lib__btn:hover{border-color:var(--ink)}
.lib__btn:active{transform:scale(.975)}
.lib__btn svg{width:15px;height:15px;flex:none}
.lib__btn.on{background:var(--verified-soft);border-color:var(--verified);color:var(--lib-on-ok)}

/* the provision itself */
.lib__prov{padding:22px 0;border-top:1px solid var(--hairline);scroll-margin-top:22px}
.lib__prov:first-of-type{border-top:none}
.lib__prov.hl{background:linear-gradient(90deg,var(--verified-soft),transparent 62%);
  border-radius:9px;padding-left:15px;margin-left:-15px}
.lib__prov h3{font-size:17.5px;font-weight:600;letter-spacing:-.015em;line-height:1.32;margin-bottom:5px;overflow-wrap:anywhere}
.lib__prov h3 i{font-style:normal;color:var(--muted-2);font-variant-numeric:tabular-nums;margin-right:9px}
.lib__ptools{display:flex;gap:5px;margin:9px 0 13px;flex-wrap:wrap}
.lib__ptool{
  font-size:11.6px;font-weight:500;color:var(--muted-2);padding:5px 9px;
  border-radius:6px;border:1px solid transparent;min-height:30px;
  transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease);
}
.lib__ptool:hover{background:var(--lib-t3);color:var(--ink);border-color:var(--hairline)}
.lib__ptool.on{color:var(--verified);border-color:var(--verified);background:var(--verified-soft)}

/* Reading measure and rhythm are the whole point of a statute reader: the eye
   must be able to track from the end of one line to the start of the next
   across dense, sub-clause-heavy prose. */
.lib__text{
  font-size:15.6px;line-height:1.72;color:var(--lib-prose);max-width:70ch;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.lib__text mark{background:var(--lib-mark);color:inherit;padding:1px 2px;border-radius:2px}

/* ---------- search results ---------- */
.lib__hit{display:block;text-align:left;width:100%;padding:17px 2px;border-bottom:1px solid var(--hairline);transition:background .15s var(--ease)}
.lib__hit:hover{background:var(--lib-t1)}
.lib__hit h3{font-size:15.4px;font-weight:600;letter-spacing:-.012em;margin-bottom:5px;line-height:1.35;overflow-wrap:anywhere}
.lib__hit p{font-size:13.4px;color:var(--muted);line-height:1.6;margin-top:8px;max-width:80ch}
.lib__hit mark{background:var(--lib-mark);color:var(--ink);padding:1px 2px;border-radius:2px;font-weight:500}
.lib__count{font-size:13px;color:var(--muted-2);padding:16px 0 4px}

.lib__empty{padding:52px 0;text-align:center;color:var(--muted)}
.lib__empty h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:8px}
.lib__empty p{font-size:14px;max-width:46ch;margin:0 auto;line-height:1.6}

/* ---------- provenance + disclaimer ---------- */
.lib__flag{
  display:flex;gap:11px;padding:13px 15px;border-radius:10px;
  background:var(--lib-flag-bg);border:1px solid var(--lib-flag-bd);margin:0 0 22px;
}
.lib__flag svg{width:17px;height:17px;flex:none;color:var(--lib-flag-ico);margin-top:2px}
.lib__flag p{font-size:13.1px;line-height:1.6;color:var(--lib-flag-tx)}
.lib__flag b{font-weight:600}

.lib__disc{
  margin-top:44px;padding:17px 0 0;border-top:1px solid var(--hairline);
  font-size:12.4px;line-height:1.65;color:var(--muted-2);max-width:82ch;
}
.lib__disc b{font-weight:600;color:var(--muted)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .lib,.lib *{transition:none!important;animation:none!important}
  .lib__body{scroll-behavior:auto}
}

/* ---------- print: the provision, not the furniture ---------- */
@media print{
  body.lib-open>*:not(.lib){display:none!important}
  .lib{position:static;display:block!important}
  .lib__bar,.lib__toc,.lib__acts,.lib__ptools,.lib__filters,.lib__search{display:none!important}
  .lib__body{overflow:visible}
  .lib__text{max-width:none;font-size:11.5pt}
}

/* ============================================================
   TOUCH TARGETS
   The reader is dense by design, which on a mouse is fine — but a 32px row is
   not reliably hittable with a thumb. Coarse pointers get the 44px floor;
   fine pointers keep the density that makes a long statute scannable.
   ============================================================ */
@media (hover:none),(pointer:coarse){
  .lib__toc a{min-height:44px;display:flex;align-items:center;padding:9px 11px}
  .lib__ptool{min-height:44px;display:inline-flex;align-items:center;padding:0 12px}
  .lib__chip{min-height:44px;display:inline-flex;align-items:center}
  .lib__wordmark{min-height:44px}
  .lib__btn{min-height:46px}
  .lib__crumb a{min-height:36px;display:inline-flex;align-items:center}
}

/* ============================================================
   THE NAV ENTRY
   The other three nav items scroll this page. This one OPENS something else,
   so it is given the consultation button's block treatment - dark green,
   white label - to say that before the click does.

   Written as `.nav__links a.nav__link--lib` (0,2,1) because `.nav__links a`
   is (0,1,1) and would otherwise repaint the label muted grey on the dark
   block. This file loads after index.html's inline styles, so this rule is
   the one that decides; putting a second copy in the <style> block only
   creates two places to be wrong.
   ============================================================ */
.nav__links a.nav__link--lib{
  font-size:15.2px;font-weight:600;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:5px;line-height:normal;
  padding:10px 17px;border-radius:8px;
  color:var(--paper);
  background:linear-gradient(180deg,#1a3b35,#112C28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 2px 4px rgba(17,44,40,.18),
             0 8px 18px -4px rgba(17,44,40,.30);
  transition:background .2s var(--ease),transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.nav__links a.nav__link--lib:hover{
  color:var(--paper);
  background:linear-gradient(180deg,#1d423b,#0E2622);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             0 6px 12px rgba(17,44,40,.22),
             0 16px 30px -6px rgba(17,44,40,.34);
}
.nav__links a.nav__link--lib:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(17,44,40,.28);
}
.nav__item:hover .nav__link--lib,
.nav__item:focus-within .nav__link--lib{color:var(--paper)}

/* ---- the merged bar ----
   All four items in one green block rather than four separate ones. The three
   dropdown triggers and the E-Library link become segments of a single bar,
   divided by hairlines, with the destination marked by a lighter inset panel
   so it still reads as the one that leaves this page.

   Desktop only. Below 901px the nav collapses into a sheet where a horizontal
   bar makes no sense, and every rule here is scoped to keep out of it. */
@media(min-width:901px){
  .nav__links{
    gap:0;padding:4px;border-radius:11px;
    /* the same fill as .btn-primary beside it, so the two blocks in the
       header are the same green rather than two near-misses */
    background:linear-gradient(180deg,#1a3b35,#112C28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
               0 2px 4px rgba(17,44,40,.18),
               0 8px 18px -4px rgba(17,44,40,.28);
  }
  .nav__links .nav__link{
    position:relative;color:var(--paper);
    /* one height for every segment - the link and the buttons carry
       different font sizes, which left the E-Library chip 2px short */
    min-height:40px;
    padding:9px 16px;border-radius:8px;line-height:normal;
    transition:background .18s var(--ease),color .18s var(--ease);
  }
  .nav__links .nav__link:hover,
  .nav__item:hover .nav__link,
  .nav__item:focus-within .nav__link{
    color:var(--paper);background:rgba(255,255,255,.09);
  }
  .nav__chev{color:var(--paper);opacity:.62}

  /* The destination carries no resting treatment of its own. A lighter panel
     here, or a rule between the segments, is exactly the thing that stopped
     the bar reading as one colour - so the only thing that ever changes a
     segment is the pointer, and it changes back. */
  .nav__links a.nav__link--lib{
    font-size:16.4px;background:none;box-shadow:none;
    padding:9px 16px;transform:none;
  }
  .nav__links a.nav__link--lib:hover{
    background:rgba(255,255,255,.09);transform:none;box-shadow:none;
  }
  .nav__links a.nav__link--lib:active{transform:none;box-shadow:none}
}

@media(max-width:900px){
  /* on the sheet it is a full-width block, sized for a thumb */
  .nav__links a.nav__link--lib{
    width:100%;justify-content:center;padding:14px 18px;
    font-size:16px;min-height:50px;margin-top:6px;
  }
}


/* ============================================================
   SECTION PICKER + IN-DOCUMENT SEARCH
   Two things a researcher does constantly: jump to a numbered provision, and
   find a phrase without leaving the document. Both sit at the top of the
   reader; the search filters in place rather than pulling hits into a list,
   so an answer is always read in its statutory context.
   ============================================================ */
.lib__pick{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;
  padding:14px;margin:0 0 22px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:11px;
}
@media (max-width:700px){ .lib__pick{grid-template-columns:1fr} }
.lib__pick-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.lib__pick-f > span{
  font-size:10.6px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-2);
}
.lib__pick select,.lib__pick input{
  width:100%;min-height:44px;padding:0 12px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:8px;
  font:inherit;font-size:14px;color:var(--ink);
  text-overflow:ellipsis;
}
.lib__pick select:focus,.lib__pick input:focus{outline:none;border-color:var(--ink)}
.lib__pick-n{
  grid-column:1/-1;font-size:12.4px;color:var(--muted-2);min-height:1em;margin:0;
}

/* ---------- subdivisions ---------- */
.lib__subs{display:flex;flex-direction:column;gap:11px;max-width:70ch}
.lib__sub{display:flex;gap:10px;align-items:baseline}
.lib__sub-n{
  font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--muted-2);flex:none;min-width:2.1em;font-size:14px;
}
/* a proviso qualifies what precedes it, so it is set in from the margin and
   marked with a rule - the way it reads on the page of an Act */
.lib__sub.is-proviso{
  padding-left:14px;border-left:2px solid var(--hairline);
  margin-left:2px;font-style:italic;
}
.lib__sub.is-proviso .lib__text{color:var(--muted);font-size:15px}
.lib__sub.is-expl{
  padding:11px 13px;border-radius:8px;background:var(--paper-2,var(--lib-t2));
}
.lib__sub.is-expl .lib__text{font-size:14.8px;color:var(--muted)}
.lib__sub .lib__text{max-width:none}

/* ============================================================
   EMBEDDED PDF
   Some portal documents are scans: there is no text layer to transcribe, and
   OCR would put guessed words into legal text. So the document itself is
   served from this site and shown here. It cannot be searched — that is a
   property of the source, and the note says so rather than hiding it.
   ============================================================ */
.lib__pdf{border:1px solid var(--hairline);border-radius:11px;overflow:hidden;background:var(--surface)}
.lib__pdf-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border-bottom:1px solid var(--hairline);background:var(--paper);
}
.lib__pdf-h span{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);
}
.lib__pdf object,.lib__pdf iframe{
  display:block;width:100%;height:min(78vh,920px);border:0;background:var(--paper);
}
.lib__pdf-n{padding:11px 13px;border-top:1px solid var(--hairline);font-size:12.6px;color:var(--muted-2)}
@media (max-width:700px){
  /* mobile browsers mostly refuse to render an inline PDF, so keep it short
     and let the header button do the work */
  .lib__pdf object,.lib__pdf iframe{height:56vh}
}

/* ============================================================
   COLLECTIONS
   Three front doors, because that is how this corpus actually divides: the
   e-waste regime, the battery regime, and the Board's cross-cutting guidance.
   Document type is a filter you reach for later, not an entry point.
   ============================================================ */
.lib__colls{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:13px;
  margin:clamp(28px,4vw,40px) 0 4px;
}
.lib__coll{
  position:relative;display:block;text-align:left;padding:20px 19px 17px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:13px;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
  overflow:hidden;
}
.lib__coll::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--verified);opacity:0;transition:opacity .16s var(--ease);
}
.lib__coll:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.lib__coll:hover::after{opacity:1}
.lib__coll:active{transform:translateY(0)}
.lib__coll-n{
  font-size:29px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;margin-bottom:9px;
}
.lib__coll h3{font-size:16.5px;font-weight:600;letter-spacing:-.014em;margin-bottom:6px}
.lib__coll p{font-size:13px;color:var(--muted);line-height:1.55}
.lib__coll b{
  display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--hairline);
  font-size:11.4px;font-weight:600;letter-spacing:.05em;color:var(--muted-2);
}

/* the "/" affordance in the search field */
.lib__kbd{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font:600 12px/1 "IBM Plex Sans",monospace;color:var(--muted-2);
  border:1px solid var(--hairline);border-radius:5px;padding:5px 8px;
  background:var(--paper);pointer-events:none;
}
@media (hover:none),(pointer:coarse){ .lib__kbd{display:none} }

/* counts sit with their heading rather than in a separate column */
.lib__h2{display:flex;align-items:center;gap:10px}
.lib__h2-n,.lib__chip-n{
  font-size:10.6px;font-weight:600;color:var(--muted-2);
  background:var(--lib-t4);border-radius:999px;padding:2px 7px;
  letter-spacing:.02em;
}
.lib__chip{display:inline-flex;align-items:center;gap:7px}
.lib__chip.on .lib__chip-n{background:rgba(255,255,255,.18);color:var(--paper)}

/* ============================================================
   GROUPED SEARCH RESULTS
   Hits collected under the document they came from. A flat list tells you what
   matched; grouping also tells you where you are in the corpus.
   ============================================================ */
.lib__grp{
  border:1px solid var(--hairline);border-radius:12px;background:var(--surface);
  margin-bottom:13px;overflow:hidden;
}
.lib__grp-h{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px 15px;background:var(--paper);border-bottom:1px solid var(--hairline);
  transition:background .15s var(--ease);flex-wrap:wrap;min-height:48px;
}
.lib__grp-h:hover{background:var(--paper-2,var(--lib-t2))}
.lib__grp-h > span:first-child{
  font-size:14.6px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
  flex:1;min-width:0;overflow-wrap:anywhere;
}
.lib__grp-n{
  font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--muted-2);
  white-space:nowrap;
}
.lib__grp .lib__hit{padding:14px 15px}
.lib__grp .lib__hit:last-child{border-bottom:none}
.lib__grp-more{
  display:block;width:100%;text-align:left;padding:11px 15px;
  border-top:1px solid var(--hairline);background:var(--paper);
  font-size:12.8px;font-weight:500;color:var(--verified);min-height:44px;
  transition:background .15s var(--ease);
}
.lib__grp-more:hover{background:var(--verified-soft)}

/* ============================================================
   READING PROGRESS
   ============================================================ */
.lib__prog{
  position:absolute;left:0;top:60px;height:2px;width:100%;z-index:5;
  background:var(--verified);transform-origin:0 50%;transform:scaleX(0);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease);
}
@media (prefers-reduced-motion:reduce){ .lib__prog{transition:none} }

/* ============================================================
   CROSS-REFERENCES
   A citation inside a provision is a pointer the reader would otherwise have
   to chase by hand. Marked with a dotted underline rather than a solid one:
   it is an aid to reading, not a call to action, and 800 solid links inside a
   statute would shred the page.
   ============================================================ */
.lib__xref{
  color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--verified);
  padding-bottom:1px;
  transition:background .14s var(--ease),border-color .14s var(--ease);
}
.lib__xref:hover{
  background:var(--verified-soft);border-bottom-style:solid;
}
/* one that leaves the library for a source PDF says so */
.lib__xref.is-out{border-bottom-color:var(--gold)}
.lib__xref.is-out:hover{background:var(--gold-soft)}
.lib__xref.is-out::after{
  content:"↗";font-size:.72em;vertical-align:super;margin-left:1px;
  color:var(--gold);
}
@media (hover:none),(pointer:coarse){
  /* on touch there is no hover to reveal them, so make them a shade clearer */
  .lib__xref{border-bottom-style:solid;border-bottom-color:var(--lib-okl)}
}

/* ============================================================
   A PORTAL IS NOT A DOCUMENT
   ============================================================ */
.lib__portal{
  border:1px solid var(--hairline);border-radius:12px;background:var(--surface);
  padding:clamp(20px,3vw,30px);
}
.lib__portal h3{font-size:18px;font-weight:600;letter-spacing:-.016em;margin-bottom:9px}
.lib__portal p{font-size:14.4px;color:var(--muted);line-height:1.6;max-width:62ch}
.lib__portal .lib__btn{margin-top:16px}
.lib__portal-n{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:12.6px;color:var(--muted-2);
}

/* ============================================================
   THE DIRECT LINK
   Shown in full rather than hidden behind a button. For a legal record the
   reader is entitled to see which host the text came from before trusting it —
   a government domain and a mirror are not the same claim.
   ============================================================ */
.lib__direct{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;margin:-14px 0 22px;
  background:var(--paper);border:1px solid var(--hairline);border-top:none;
  border-radius:0 0 10px 10px;
}
.lib__direct dt{
  font-size:10.4px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-2);flex:none;
}
.lib__direct a{
  font-size:12.6px;color:var(--verified);word-break:break-all;flex:1;min-width:0;
  border-bottom:1px solid transparent;transition:border-color .14s var(--ease);
}
.lib__direct a:hover{border-bottom-color:var(--verified)}
.lib__direct-n{
  flex-basis:100%;font-size:11.8px;color:var(--muted-2);
}
.lib__direct-n code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.2px;
  background:var(--lib-t3);padding:1px 5px;border-radius:4px;
}
/* the facts table now runs into the direct-link strip below it */
.lib__facts{border-radius:10px 10px 0 0;margin:4px 0 0}

/* ============================================================
   SECTION JUMP BAR
   Eighty documents under eight headings makes the headings useless unless you
   can reach them directly. Sticky, so it stays available once you are deep in
   the list, and it marks the section you are actually in — a shortcut and a
   position indicator in one control.
   ============================================================ */
.lib__jump{
  position:sticky;top:0;z-index:4;
  display:flex;gap:6px;overflow-x:auto;
  padding:11px 0;margin:0 0 6px;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hairline);
  scrollbar-width:none;-ms-overflow-style:none;
}
.lib__jump::-webkit-scrollbar{display:none}
.lib__jump-i{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:8px 13px;border-radius:999px;min-height:38px;
  border:1px solid var(--hairline);background:var(--surface);
  font-size:12.9px;font-weight:500;color:var(--muted);white-space:nowrap;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.lib__jump-i:hover{border-color:var(--muted-2);color:var(--ink)}
.lib__jump-i.on{
  background:var(--verified-soft);border-color:var(--verified);color:var(--lib-on-ok);font-weight:600;
}
.lib__jump-n{
  font-size:10.6px;font-weight:600;color:var(--muted-2);
  background:var(--lib-t4);border-radius:999px;padding:2px 6px;
}
.lib__jump-i.on .lib__jump-n{background:var(--lib-okt);color:var(--lib-on-ok)}

/* the group headings are scroll targets, so they must clear the sticky bar */
.lib__h2[id]{scroll-margin-top:74px}

@media (hover:none),(pointer:coarse){
  .lib__jump-i{min-height:44px}
}

/* ============================================================
   THE PDF PANE
   The published document, shown first. Text extraction loses tables, schedules
   and signatures; the PDF keeps all of it. The transcription still sits below,
   because that is what search and citation run on.
   ============================================================ */
.lib__pdfpane{
  border:1px solid var(--hairline);border-radius:12px;overflow:hidden;
  background:var(--surface);margin:0 0 18px;
}
/* A page of a gazette is portrait. Filling a wide pane with it meant scaling
   to the WIDTH and seeing a horizontal band of the page; sizing the pane to
   the page's own proportions instead means the whole page fits, which is what
   makes it readable. Extra width goes back as margin rather than being spent
   on a bigger band. */
/* Bigger. `Fit` scales the whole page into the frame, so the page is only as
   large as the frame allows - a 582px-wide portrait box rendered a gazette
   page at roughly a third of life size. Taking the full height available and
   letting the width follow the page's own proportions gives a page you can
   actually read, and `min-width` stops narrow windows shrinking it further. */
.lib__pdfpane iframe{
  display:block;border:0;background:var(--paper);
  height:calc(100vh - 168px);min-height:560px;
  width:auto;max-width:100%;min-width:min(100%,620px);
  aspect-ratio:1 / 1.24;margin:0 auto;
}
.lib__pdfpane{display:flex;flex-direction:column}
.lib__pdfpane-h{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--hairline);background:var(--paper);
}
.lib__pdfpane-h > span:first-child{
  font-size:11.4px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-2);
}
.lib__pdfpane-sp{flex:1;min-width:0}
.lib__pdfpane-n{
  font-size:11.4px;color:var(--verified);white-space:nowrap;
}
.lib__pdfpane-h .lib__btn{min-height:36px;padding:0 12px;font-size:12.8px}
@media (max-width:700px){
  /* most mobile browsers refuse to render an inline PDF, so keep it short and
     let the two buttons in the header carry the load */
  /* on a phone the screen is already portrait - use the full width */
  .lib__pdfpane iframe{height:calc(100vh - 190px);min-height:380px;aspect-ratio:auto;width:100%}
  .lib__pdfpane-n{flex-basis:100%}
}

/* the transcription is now secondary - label it as such */
.lib__texthead{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:6px 0 14px;padding-top:16px;border-top:1px solid var(--hairline);
}
.lib__texthead h2{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin:0;
}
.lib__texthead p{font-size:12.4px;color:var(--muted-2);margin:0}

@media (hover:none),(pointer:coarse){
  /* the pane header buttons are compact on a mouse; a thumb needs the floor */
  .lib__pdfpane-h .lib__btn{min-height:44px;padding:0 14px}
}

/* ============================================================
   PDF-ONLY READER
   The transcription is gone. It was a second, worse copy of a document we
   already serve, and its extraction artefacts were showing. What is left is
   the published PDF plus the two things text was actually needed for:
   a contents list that knows page numbers, and a search that returns them.
   ============================================================ */

/* the contents rail now carries a page number per entry */
.lib__toc a{display:flex;align-items:baseline;gap:8px}
.lib__toc a > span,.lib__toc-x > span{flex:1;min-width:0;overflow-wrap:anywhere}
.lib__toc-p{
  margin-left:auto;flex:none;font-weight:600;font-size:11px;
  color:var(--muted-2);font-variant-numeric:tabular-nums;
}
.lib__toc a.on .lib__toc-p{color:var(--lib-on-ok)}
/* an entry with no reliable page is shown, but is not a link */
.lib__toc-x{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 10px;border-left:2px solid transparent;
  font-size:13.2px;line-height:1.4;color:var(--muted-2);cursor:default;
  overflow-wrap:anywhere;opacity:.62;
}


/* the PDF fills the reader now that nothing follows it */

@media (max-width:700px){
  /* on a phone the screen is already portrait - use the full width */
  .lib__pdfpane iframe{height:calc(100vh - 190px);min-height:380px;aspect-ratio:auto;width:100%}
}

/* a search hit is a page, so lead with the page number */
.lib__hit{display:flex;gap:12px;align-items:flex-start}
.lib__hit-p{
  flex:none;min-width:38px;text-align:center;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--verified);background:var(--verified-soft);
  border-radius:5px;padding:3px 6px;margin-top:1px;
}
.lib__hit > span:last-child{font-size:13.4px;color:var(--muted);line-height:1.6;min-width:0}

/* ============================================================
   THE DOCUMENT NOTE
   What used to be an amber warning banner. Those said "status requires
   verification" about files fetched directly from the regulator's own portal,
   which was never true and read as an error the reader could not act on.
   What is genuinely worth saying — this is a scan, this is a draft — is a
   quiet line under the metadata, in the same voice as everything else.
   ============================================================ */
.lib__docnote{
  font-size:13.4px;line-height:1.6;color:var(--muted);
  max-width:76ch;margin:0 0 20px;
}
/* a draft is a fact about the document, not a doubt about it */
.lib__st--draft{background:var(--gold-soft);color:var(--lib-on-gold)}

/* visually hidden, still announced */
.lib__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* the search view's h1 is for structure and screen readers; the field below it
   already says what the page is, so it does not need to shout visually */
.lib__title--search{font-size:clamp(19px,1.8vw,23px);margin:14px 0 4px}

/* ============================================================
   READING MODE
   Picking a section should put the reader INSIDE the document. Metadata, the
   direct link and related documents answer "should I open this?" - once that
   is decided they are in the way, so they fold away and the PDF takes the
   whole surface. The contents rail stays, because that is how you move.
   ============================================================ */
.lib__doc.is-reading > div > .lib__title,
.lib__doc.is-reading > div > .lib__facts,
.lib__doc.is-reading > div > .lib__direct,
.lib__doc.is-reading > div > .lib__docnote,
.lib__doc.is-reading > div > .lib__h2,
.lib__doc.is-reading > div > .lib__row,
.lib__doc.is-reading > div > .lib__disc{ display:none }

/* 1160px is a reading measure for prose. A page of a gazette is not prose -
   it wants every pixel, so reading mode drops the container cap and the PDF
   spans the window. */
.lib__body:has(.lib__doc.is-reading) .lib__in{
  max-width:none;padding-left:clamp(12px,2vw,20px);padding-right:clamp(12px,2vw,20px);
}
.lib__doc.is-reading{ gap:clamp(14px,1.6vw,22px) }

/* the pane fills what is left of the library once the top bar is accounted for */
.lib__doc.is-reading .lib__pdfpane{ margin:0 }
.lib__doc.is-reading .lib__pdfpane iframe{ height:calc(100vh - 108px);min-height:620px }

/* the rail scrolls with the document instead of running past it */
.lib__doc.is-reading .lib__toc{ max-height:calc(100vh - 132px) }

.lib__readtoggle[aria-pressed="true"]{
  background:var(--verified-soft);border-color:var(--verified);color:var(--lib-on-ok);
}

@media (max-width:900px){
  /* Reading mode used to hide the rail here. That left a phone reader who had
     just jumped to rule 22 with no way to reach rule 23 - the contents were
     gone until they left reading mode. Collapsed it costs 46px, so it stays. */
  .lib__doc.is-reading .lib__toc{ display:block }
  .lib__doc.is-reading .lib__pdfpane iframe{ height:calc(100vh - 118px) }
}

/* ============================================================
   THE STAGE — document centre, metadata right
   Contents sit in the grid's first column (see .lib__doc); this splits what
   is left into the reader and a narrow column for everything about it. The
   metadata used to run full-width ABOVE the PDF, which is what pushed the
   document off the first screen.
   ============================================================ */
/* 1160px is a measure for reading prose. A document view is three columns of
   which the middle one is a scanned page - capped, the PDF got 486px, which is
   narrower than it was before the columns existed. Document views use the
   window. */
.lib__body:has(.lib__doc) .lib__in{
  max-width:none;padding-left:clamp(14px,2.2vw,26px);padding-right:clamp(14px,2.2vw,26px);
}
.lib__stage{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:clamp(14px,1.6vw,24px);align-items:start}
.lib__stage-main{min-width:0}


@media (max-width:1180px){
  /* not enough room for three columns - the metadata drops below the reader,
     which keeps the PDF the largest thing on screen */
  .lib__stage{grid-template-columns:minmax(0,1fr)}
}

/* reading mode hides the metadata column entirely */
.lib__doc.is-reading .lib__stage{grid-template-columns:minmax(0,1fr)}

.lib__toc-src{
  margin-left:7px;font-size:9.4px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);
  background:var(--lib-t4);border-radius:999px;padding:2px 6px;
}

/* ============================================================
   THE FRONT PAGE — masthead left, collections right
   Stacked, the heading and search pushed all three entry points below the
   fold. Beside each other they share the first screen, and the whole block is
   tighter.
   ============================================================ */
.lib__top{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,24px);align-items:start;
  padding-top:clamp(18px,2.4vw,28px);
}
.lib__top-l{min-width:0}
.lib__top .lib__hero{padding:0 0 clamp(14px,2vw,20px);max-width:none}
.lib__top .lib__hero h1{font-size:clamp(27px,3.2vw,40px);margin-bottom:12px}
.lib__top .lib__hero p{font-size:clamp(14.5px,1.15vw,16px)}
.lib__top .lib__search{margin:0}
.lib__top .lib__hint{margin-top:10px}

/* ---- the collections, across ----
   Six streams in a row rather than a column. auto-fit rather than a fixed six
   so the row reflows to three-and-three and then two-and-two instead of
   squeezing six unreadable cards onto a laptop. */
.lib__colls{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:11px;margin:clamp(14px,2vw,20px) 0 4px;
}
/* Explicit counts rather than auto-fit: the reading column is 1160px, so
   auto-fit packed five and left the sixth alone on a second row. Six, then
   three-and-three, then two-and-two - every row full. */
@media (max-width:1140px){ .lib__colls{grid-template-columns:repeat(3,minmax(0,1fr))} }
.lib__coll{padding:15px 15px 13px}
.lib__coll h3{font-size:15.4px;margin-bottom:5px}
.lib__coll p{
  font-size:12.3px;line-height:1.45;
  /* two lines, so one long description cannot make every card taller */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.lib__coll-go{margin-top:9px;font-size:11.6px}

@media (max-width:900px){
  .lib__top{grid-template-columns:1fr;gap:16px}
}
@media (max-width:700px){
  /* on a phone the row becomes a two-up grid - a six-wide strip would be
     six taps off the side of the screen */
  .lib__colls{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .lib__coll{padding:13px 13px 11px}
  .lib__coll h3{font-size:14.4px}
  .lib__coll p{-webkit-line-clamp:2;font-size:11.8px}
}

/* ---------- back to the front page ---------- */
.lib__home{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;
  border-radius:8px;font-size:14px;font-weight:500;color:var(--muted);
  border:1px solid var(--hairline);background:var(--surface);
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.lib__home:hover{border-color:var(--ink);color:var(--ink)}
.lib__home svg{width:15px;height:15px;flex:none}
.lib__home[hidden]{display:none}
@media (max-width:640px){ .lib__home span{display:none} .lib__home{padding:0 10px} }
@media (hover:none),(pointer:coarse){ .lib__home{min-height:44px} }

/* ============================================================
   MOTION
   A view eases in when it replaces another; rows rise as they are scrolled to.
   Opacity and transform only, so it stays on the compositor. Everything here
   is off under prefers-reduced-motion — the content is simply present.
   ============================================================ */
.lib__in.is-in{animation:libViewIn .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes libViewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.lib-rise{opacity:0;transform:translateY(10px);will-change:opacity,transform}
.lib-rise.is-seen{
  opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 22ms),
             transform .42s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 22ms);
}

/* the PDF pane should never fade - a blank reader reads as broken */
.lib__pdfpane{animation:none!important}

@media (prefers-reduced-motion:reduce){
  .lib__in.is-in{animation:none}
  .lib-rise,.lib-rise.is-seen{opacity:1;transform:none;transition:none}
}
/* a derived entry has a routing key, not a section number, so nothing is
   printed in the number column - the heading starts at the margin instead */
.lib__toc a.is-unnumbered{padding-left:12px}

/* ============================================================
   LANGUAGE — the gazettes print Hindi first, then English
   Different halves of the same file, so a reader who wants the Hindi text of
   a rule needs a different page entirely. Only documents that really are
   bilingual show this.
   ============================================================ */
.lib__lang{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid var(--hairline);
}
.lib__lang-b{
  padding:6px 12px;border-radius:999px;min-height:34px;
  border:1px solid var(--hairline);background:var(--surface);
  font-size:12.6px;font-weight:500;color:var(--muted);
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.lib__lang-b:hover{border-color:var(--muted-2);color:var(--ink)}
.lib__lang-b.on{background:var(--verified-soft);border-color:var(--verified);color:var(--lib-on-ok);font-weight:600}
.lib__lang-n{flex-basis:100%;font-size:11.4px;color:var(--muted-2);margin-top:2px}
@media (hover:none),(pointer:coarse){ .lib__lang-b{min-height:44px} }

/* ============================================================
   ONE LINK, ONE META LINE
   The right-hand column and the six-button stack are gone. The viewer's own
   toolbar already offers download, print and full window; the breadcrumb and
   title already say what the document is. What was left that mattered — where
   the file came from — is one link above the document, and the rest is small
   text beside the page count.
   ============================================================ */
.lib__acts[hidden],.lib__facts[hidden]{display:none!important}

.lib__srcline{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 12px;
}
.lib__srclink{
  display:inline-flex;align-items:center;gap:7px;min-height:34px;
  font-size:13px;color:var(--verified);
  border-bottom:1px solid transparent;
  transition:border-color .15s var(--ease);
}
.lib__srclink:hover{border-bottom-color:var(--verified)}
.lib__srclink svg{width:14px;height:14px;flex:none}

.lib__panemeta{
  font-size:11.4px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--muted-2);min-width:0;overflow-wrap:anywhere;
}
#libPdfLbl:empty{display:none}
#libPdfLbl:not(:empty)::after{content:" ·";color:var(--muted-2)}

/* the stage is one column now, so the document takes the width the metadata
   used to occupy */
.lib__stage{grid-template-columns:minmax(0,1fr)}

/* ---- bigger page ----
   With `Fit` the page scales into the frame, so the frame is the only thing
   that governs how large it renders. Reclaiming the metadata column and the
   button stack means both dimensions can grow. */
/* `Fit` scales the page into the frame, so any frame that is not the page's
   own shape wastes the difference. A 760x750 frame rendered an A4 page at
   532x750 - 228px of empty margin. Matching the frame to the page means every
   pixel of the frame IS page, and the height is pushed as far as the window
   allows. */
/* ---- widest page the space allows ----
   `Fit` sizes the page to whichever of the frame's two dimensions runs out
   first. For a portrait page in any frame wider than 1:1.414 that is the
   HEIGHT, so every pixel of extra width came straight back as margin - a
   1072px column still rendered a 549px page. `FitH` fits the page to the
   WIDTH instead, so the frame's full width becomes page and the viewer
   scrolls the remainder internally, inside a frame that stays on screen.
   1180px is the stop: past roughly life size there is nothing more to see. */
.lib__pdfpane iframe{
  height:calc(100vh - 118px);min-height:560px;
  width:100%;max-width:1180px;min-width:0;aspect-ratio:auto;margin:0 auto;
}
@media (max-width:700px){
  .lib__pdfpane iframe{
    height:calc(100vh - 172px);min-height:400px;
    min-width:0;width:100%;aspect-ratio:auto;
  }
}
/* the document's own title, tightened - the breadcrumb above it already says
   which document this is, so it does not need display size */
.lib__title--doc{font-size:clamp(19px,1.9vw,25px);margin:0 0 8px}

/* ============================================================
   THEME
   Light is the default and is written as tokens rather than literals, so the
   dark theme below is a list of values and not a second stylesheet. Scoped to
   .lib: the marketing page keeps its own palette, and a reader who wants a
   dark library does not get a dark home page as a side effect.
   ============================================================ */
.lib{
  --lib-on-ok:#12503A;      /* text on a verified-tint chip */
  --lib-on-gold:#7A5A1E;    /* text on a gold-tint chip */
  --lib-flag-bg:#FBF6E9; --lib-flag-bd:#EBDCB8;
  --lib-flag-ico:#8A6520; --lib-flag-tx:#5E4A1E;
  --lib-warn-bg:#FBF0DC;
  --lib-mark:#FBEFCB;       /* search highlight */
  --lib-prose:#25332E;      /* long-form body text */
  /* wash tints, used for hovers and quiet chips */
  --lib-t1:rgba(17,44,40,.028); --lib-t2:rgba(17,44,40,.042);
  --lib-t3:rgba(17,44,40,.055); --lib-t4:rgba(17,44,40,.06);
  --lib-okt:rgba(28,122,85,.16); --lib-okl:rgba(28,122,85,.4);
  --lib-pdf-mat:var(--paper); /* what sits behind the PDF while it loads */
}

/* ---- dark ----
   Deep forest green rather than grey: the library keeps the brand's hue and
   only swaps which end of it is the ground. Every white surface becomes green
   and every ink-coloured text becomes white.

   The PDF is deliberately NOT touched. Inverting a gazette would recolour
   seals, stamps and signatures and make the document look altered, which is
   the one thing a legal reference must never do. It stays exactly as
   published, on a neutral mat so there is no green cast at its edges. */
.lib.is-dark{
  --ink:#FFFFFF;
  --ink-2:#EAF3EF;
  /* two greens, not one: a DARKER green is the ground the page sits on, and a
     lighter, glossier green lifts every surface off it. A single flat green
     reads as a tint over black; the pair reads as a material. */
  --paper:#031711;          /* darker green - the ground */
  --surface:#0B2E23;        /* shiny green - raised surfaces */
  --hairline:#1F5544;
  --muted:#D3E8DF;
  --muted-2:#A9C9BC;
  --verified:#3BE8A6;       /* the shine: a green that actually glows */
  --verified-soft:#0E4433;
  --gold:#EFC271;
  --gold-soft:#3E3218;
  --lib-on-ok:#8CF5CB;
  --lib-on-gold:#EFCF8C;
  --lib-flag-bg:#2E2413; --lib-flag-bd:#4A3A1C;
  --lib-flag-ico:#E0B461; --lib-flag-tx:#EAD7AC;
  --lib-warn-bg:#3A2F17;
  --lib-mark:#7A6320;
  --lib-prose:#E6EFEB;
  --lib-t1:rgba(140,245,203,.05); --lib-t2:rgba(140,245,203,.075);
  --lib-t3:rgba(140,245,203,.1); --lib-t4:rgba(140,245,203,.125);
  --lib-okt:rgba(59,232,166,.22); --lib-okl:rgba(59,232,166,.55);
  --lib-pdf-mat:#3A3A3A;
  color-scheme:dark;
}
/* the search highlight needs light text once its ground is dark */
.lib.is-dark .lib__text mark,
.lib.is-dark .lib__hit mark{color:#FFF7E0}
/* form controls: the UA paints these from color-scheme, but the search field
   is a custom surface and needs saying explicitly */
.lib.is-dark input,.lib.is-dark select,.lib.is-dark textarea{color:var(--ink)}
.lib.is-dark input::placeholder{color:var(--muted-2)}

/* the PDF itself is untouched - only the mat behind it changes, so a page
   that has not painted yet does not flash green */
.lib__pdfpane iframe{background:var(--lib-pdf-mat)}

/* ---- the toggle ---- */
.lib__theme{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:8px;color:var(--muted);flex:none;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.lib__theme:hover{background:var(--lib-t3);color:var(--ink)}
.lib__theme svg{width:18px;height:18px}
.lib__theme .lib__theme-sun{display:none}
.lib.is-dark .lib__theme .lib__theme-sun{display:block}
.lib.is-dark .lib__theme .lib__theme-moon{display:none}
.lib.is-dark .lib__theme{color:var(--gold)}
/* ============================================================
   HIERARCHICAL CONTENTS RAIL
   The rail now mirrors the document's own structure: a chapter, schedule,
   form or annexure heads a group, the rules or numbered sections sit under
   it, and a decimal subsection sits under that.

   It is still a FLAT list of rows carrying a data-lvl, not nested markup.
   Routing, the scroll-spy and the language switch all address entries by key,
   and every one of them keeps working untouched because the DOM shape did not
   change - only the indentation and a fold control were added.
   ============================================================ */

.lib__toc-i{
  display:flex;align-items:baseline;gap:2px;
  border-left:2px solid transparent;border-radius:7px;
  transition:background .16s var(--ease),border-color .16s var(--ease),
             opacity .2s var(--ease);
}
.lib__toc-i > a,.lib__toc-i > .lib__toc-x{flex:1;min-width:0;border-left:0}

/* one step of indent per level - enough to read as a hierarchy, not so much
   that a level-3 heading has no room left for its own words */
.lib__toc-i.l2{padding-left:11px}
.lib__toc-i.l3{padding-left:22px}
.lib__toc-i.l4{padding-left:31px}

/* a division heads its group: set apart, not just indented differently */
.lib__toc-i.is-div{margin-top:12px}
.lib__toc-i.is-div:first-child{margin-top:0}
.lib__toc-i.is-div > a,.lib__toc-i.is-div > .lib__toc-x{
  font-weight:600;color:var(--ink);font-size:12.4px;
  letter-spacing:.02em;text-transform:none;
}
.lib__toc-i.is-div > a > span,.lib__toc-i.is-div > .lib__toc-x > span{
  overflow-wrap:normal;word-break:normal;
}
/* schedules, forms and annexures are apparatus rather than substance, so they
   read a shade quieter than a chapter */
.lib__toc-i.is-schedule > a,.lib__toc-i.is-form > a,
.lib__toc-i.is-annexure > a,.lib__toc-i.is-appendix > a{
  color:var(--muted);font-weight:500;
}

/* ---- the fold control ----
   Kept out of the tab order: it is a shortcut, and the link beside it already
   reaches every entry. Screen readers still get the expanded state. */
.lib__toc-f{
  flex:0 0 auto;width:15px;height:15px;display:grid;place-items:center;
  color:var(--muted-2);border-radius:4px;align-self:center;
  opacity:0;transition:opacity .16s var(--ease),transform .22s var(--ease),
                       background .16s var(--ease);
}
.lib__toc-f svg{width:11px;height:11px;transform:rotate(90deg);
  transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.lib__toc:hover .lib__toc-f,.lib__toc-f:focus-visible{opacity:1}
button.lib__toc-f:hover{background:var(--lib-t3);color:var(--ink)}
.lib__toc-i.is-folded > .lib__toc-f svg{transform:rotate(0deg)}
.lib__toc-i.is-folded{opacity:.75}

/* a hidden child collapses its own height rather than just disappearing, so
   the fold reads as motion instead of a jump */
.lib__toc-i.is-hid{
  display:none;
}

/* the rail's own rows already carry the indent, so the old flat padding on
   unnumbered entries would double it */
.lib__toc-i.is-unnumbered > a,.lib__toc-i.is-unnumbered > .lib__toc-x{padding-left:4px}
.lib__toc-i.on{border-left-color:var(--verified);background:var(--verified-soft)}
.lib__toc-i.on > a{background:none;color:var(--lib-on-ok);font-weight:500}

@media (max-width:900px){
  .lib__toc-i.l2{padding-left:9px}
  .lib__toc-i.l3{padding-left:18px}
  .lib__toc-i.l4{padding-left:25px}
  .lib__toc-f{opacity:1}
}

/* ---- the shine ----
   A raised surface in the dark theme catches a little light at its top edge,
   the way the light theme's cards do with --hl. Without it the two greens read
   as two flat fills; with it the surface reads as sitting ABOVE the ground. */
.lib.is-dark .lib__coll,
.lib.is-dark .lib__grp,
.lib.is-dark .lib__pdfpane,
.lib.is-dark .lib__search,
.lib.is-dark .lib__btn{
  background-image:linear-gradient(180deg,rgba(140,245,203,.055),transparent 62%);
  box-shadow:inset 0 1px 0 rgba(180,255,222,.09);
}
.lib.is-dark .lib__coll:hover{
  box-shadow:inset 0 1px 0 rgba(180,255,222,.14),
             0 10px 30px -12px rgba(0,0,0,.7);
}
.lib.is-dark .lib__bar{
  box-shadow:0 1px 0 rgba(140,245,203,.07);
}

/* ---- direction-aware view transitions ----
   Going deeper moves the new view in from the right; coming back returns it
   from the left. It is the same 8px of travel either way - enough to say
   which direction you went, not so much that it reads as a slideshow. */
@keyframes libViewBack{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes libViewFwd{from{opacity:0;transform:translate3d(16px,0,0)}to{opacity:1;transform:none}}
.lib__in.is-in{animation:libViewFwd .38s cubic-bezier(.22,.61,.36,1) both}
.lib__in.is-in.is-back{animation-name:libViewBack}

/* ---- everything that responds to a pointer says so ---- */
.lib__row,.lib__coll,.lib__hit,.lib__grp-h,.lib__btn,.lib__chip,
.lib__back,.lib__home,.lib__close,.lib__theme,.lib__lang-b,.lib__ptool{
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease),
             box-shadow .22s var(--ease);
}
.lib__coll:hover{transform:translateY(-2px)}
.lib__coll:active,.lib__row:active{transform:translateY(0)}
.lib__row:hover{transform:translateX(2px)}
.lib__btn:hover,.lib__chip:hover{transform:translateY(-1px)}
.lib__back:hover,.lib__home:hover{transform:translateX(-2px)}

/* the caret and the theme icon turn rather than swap */
.lib__theme svg{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.lib__theme:hover svg{transform:rotate(25deg)}

/* a contents entry the reader just jumped to gets one quiet pulse, so the
   rail confirms the click even when the PDF takes a moment */
@keyframes libMark{0%{background:var(--lib-okt)}100%{background:var(--verified-soft)}}
.lib__toc-i.on{animation:libMark .5s var(--ease) both}

/* switching language re-renders the rail; fade it rather than flashing */
@keyframes libFadeIn{from{opacity:0}to{opacity:1}}
.lib__toc{animation:libFadeIn .3s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  .lib__in.is-in,.lib__in.is-in.is-back,.lib__toc,.lib__toc-i.on{animation:none}
  .lib__coll:hover,.lib__row:hover,.lib__btn:hover,.lib__chip:hover,
  .lib__back:hover,.lib__home:hover,.lib__theme:hover svg{transform:none}
  .lib__toc-f svg{transition:none}
}

/* ============================================================
   THE THREE COLLECTIONS, IN 3D
   These are the front door, so they get real depth rather than a flat panel:
   the stack sits in a shared perspective, each card tilts back slightly, and
   hovering brings one forward and levels it. The lift is done with rotation
   and translation on the compositor - no layout, no repaint.
   ============================================================ */
.lib__colls{perspective:1400px;perspective-origin:50% 40%}

.lib__coll{
  position:relative;display:block;width:100%;text-align:left;
  transform-style:preserve-3d;
  transform:rotateX(2.4deg) translateZ(0);
  transition:transform .42s cubic-bezier(.22,.61,.36,1),
             box-shadow .42s cubic-bezier(.22,.61,.36,1),
             border-color .3s var(--ease);
  box-shadow:0 1px 2px rgba(17,44,40,.05),
             0 10px 22px -14px rgba(17,44,40,.28);
}
.lib__coll-face{display:block;transform:translateZ(28px)}

.lib__coll:hover,.lib__coll:focus-visible{
  transform:rotateX(0deg) translateY(-6px) scale(1.018);
  border-color:var(--verified);
  box-shadow:0 3px 6px rgba(17,44,40,.07),
             0 26px 50px -20px rgba(17,44,40,.36),
             0 60px 90px -50px rgba(17,44,40,.30);
}
.lib__coll:active{transform:rotateX(1deg) translateY(-1px) scale(1.004)}

/* the edge that catches the light as the card lifts */
.lib__coll::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.5),transparent 42%);
  opacity:0;transition:opacity .42s var(--ease);
}
.lib__coll:hover::after{opacity:.55}
.lib.is-dark .lib__coll::after{
  background:linear-gradient(150deg,rgba(140,245,203,.16),transparent 46%);
}
.lib.is-dark .lib__coll:hover{
  box-shadow:0 3px 8px rgba(0,0,0,.5),
             0 28px 56px -20px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(180,255,222,.16);
}

/* the card now ends on an action rather than a tally */
.lib__coll-go{
  display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  font-size:12.4px;font-weight:600;letter-spacing:.04em;color:var(--verified);
}
.lib__coll-go svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.lib__coll:hover .lib__coll-go svg{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .lib__colls{perspective:none}
  .lib__coll,.lib__coll:hover,.lib__coll:active{transform:none}
  .lib__coll-face{transform:none}
  .lib__coll::after{display:none}
}

/* ============================================================
   MOBILE
   The library is a reference work, so on a phone the job is to get the
   reader to the document, not to the furniture around it.
   ============================================================ */

/* the rail's heading becomes its control */
.lib__toc-h{
  display:flex;align-items:center;gap:8px;width:100%;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:11px;
}
.lib__toc-hl{flex:0 0 auto}
.lib__toc-count{
  margin-left:auto;font-size:10.6px;letter-spacing:.04em;color:var(--muted-2);
  background:var(--lib-t3);border-radius:999px;padding:2px 7px;
}
.lib__toc-h > svg{width:12px;height:12px;flex:none;transform:rotate(90deg);
  transition:transform .26s var(--ease)}
/* on a wide screen the rail is always open, so the control is not a control */
.lib__toc-count,.lib__toc-h > svg{display:none}

@media (max-width:900px){
  .lib__toc-count,.lib__toc-h > svg{display:inline-flex}
  .lib__toc-h{margin-bottom:0;min-height:46px}
  /* closed by default: 39 contents entries is a long way to scroll before
     the document itself comes into view */
  .lib__toc{max-height:none;overflow:visible;padding:0 12px}
  .lib__toc:not(.is-open) .lib__toc-i{display:none}
  .lib__toc.is-open{max-height:min(62vh,520px);overflow-y:auto;padding-bottom:10px}
  .lib__toc.is-open .lib__toc-h > svg{transform:rotate(-90deg)}
  .lib__toc.is-open .lib__toc-h{margin-bottom:8px}
  /* the language switch stays out of the collapse: it re-points the whole
     document, not just the list, and a reader should not have to open the
     contents to find it */
  .lib__toc .lib__lang{display:flex;flex-wrap:wrap}
}

/* ---- touch targets ----
   A control smaller than about 44px is a miss on a phone. These are sized by
   pointer type rather than by width, so a small window on a desktop keeps its
   compact chrome and an actual touch device gets room. */
@media (pointer:coarse){
  .lib__back,.lib__home,.lib__close,.lib__theme{min-height:44px;min-width:44px}
  .lib__bar{gap:6px;padding:0 8px;min-height:56px}
  .lib__back span,.lib__home span{display:none}      /* icons carry it */
  .lib__toc-i > a,.lib__toc-i > .lib__toc-x{min-height:44px;display:flex;align-items:center}
  .lib__toc-f{width:44px;height:44px;opacity:1}
  .lib__crumb a{min-height:44px;display:inline-flex;align-items:center}
  .lib__chip,.lib__btn,.lib__lang-b,.lib__ptool{min-height:44px}
  .lib__row{padding-top:13px;padding-bottom:13px}
}

/* ---- things that were poking past the edge ---- */
.lib__bar{overflow:hidden}
.lib__close{flex:none}
/* The chip strip scrolls sideways ON PURPOSE - its children extend past the
   viewport inside their own scroller, which is not page overflow. */
.lib__jump{max-width:100%;overscroll-behavior-x:contain;
           -webkit-overflow-scrolling:touch}
.lib__jump::-webkit-scrollbar{display:none}
.lib__jump-i{flex:none}

@media (max-width:700px){
  /* the wordmark's subtitle is the first thing to go when the bar is tight */
  .lib__wordmark span{display:none}
  .lib__hero h1{font-size:clamp(25px,7.4vw,34px)}
  .lib__colls{perspective:none}
  .lib__coll,.lib__coll:hover{transform:none}
  .lib__coll-face{transform:none}
}
@media (pointer:coarse){
  .lib__srclink,.lib__ptool{min-height:44px;display:inline-flex;align-items:center}
}

/* The front page names things; it does not tally them. Page counts stay on
   the browse and search results, where a reader is sizing up a specific
   document rather than choosing a direction. */
.lib__home-list .lib__tag--extent{display:none}

/* ---- less air above the document ----
   The reader came for the PDF. The breadcrumb, title and source line each
   carried desktop-sized spacing, which together pushed the page 195px down
   the view before a single line of the gazette appeared. */
.lib__crumb{padding:11px 0 7px}
.lib__title--doc{font-size:clamp(18px,1.7vw,22px);margin:0 0 5px}
.lib__srcline{margin:0 0 8px}
.lib__pdfpane-h{padding:6px 12px}
.lib__pdfpane-h .lib__btn{min-height:32px;padding:0 10px}

/* At 80% the page renders around 635px wide, so the frame is sized to hold it
   rather than leaving a third of the pane as empty mat. */
.lib__pdfpane iframe{
  height:calc(100vh - 96px);min-height:560px;
  width:100%;max-width:800px;min-width:0;aspect-ratio:auto;margin:0 auto;
}
@media (max-width:700px){
  .lib__pdfpane iframe{height:calc(100vh - 150px);min-height:400px;max-width:100%}
}

/* The tightened pane header is written as `.lib__pdfpane-h .lib__btn` (0,2,0),
   which outranks the touch-target rule's plain `.lib__btn` (0,1,0). Restate it
   at the same weight so a finger still gets 44px. */
@media (pointer:coarse){
  .lib__pdfpane-h .lib__btn{min-height:44px;padding:0 14px}
}

/* ============================================================
   FRONT-PAGE BACKDROP
   The site's hero floats glass capsules over a deep green ground. The library
   uses the same language so the two read as one product, with two additions:
   more depths, and parallax on the pointer. Nothing here uses a blur filter
   or a mask - measured earlier, those were the only expensive parts of a
   backdrop, and this effect does not need either.
   ============================================================ */
.lib__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
  --mx:50vw;--my:38vh;--px:0;--py:0;
  contain:strict;
}
.lib.is-home .lib__bg{opacity:1;visibility:visible}
/* the views paint above it */
.lib__body{position:relative;z-index:1}

/* the ground the shapes sit on */
.lib__bg-wash{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% -18%, var(--lib-bg-top), transparent 64%),
    radial-gradient(90% 70% at 92% 108%, var(--lib-bg-bot), transparent 62%);
}
.lib__bg-aurora{
  position:absolute;inset:-14%;opacity:.55;will-change:transform;
  background:
    radial-gradient(38% 38% at 18% 14%, var(--lib-bg-a1) 0%,
      color-mix(in srgb, var(--lib-bg-a1) 42%, transparent) 40%, transparent 72%),
    radial-gradient(32% 32% at 84% 22%, var(--lib-bg-a2) 0%,
      color-mix(in srgb, var(--lib-bg-a2) 42%, transparent) 40%, transparent 72%),
    radial-gradient(34% 34% at 58% 76%, var(--lib-bg-a3) 0%,
      color-mix(in srgb, var(--lib-bg-a3) 42%, transparent) 40%, transparent 72%);
  animation:libAurora 48s ease-in-out infinite;
}
/* Translate only. Scaling a rasterised gradient re-rasters it every frame. */
@keyframes libAurora{
  0%,100%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(2.5%,-2%,0)}
  66%{transform:translate3d(-2%,1.5%,0)}
}

/* ---- the capsules ---- */
.lib__bg-shapes{position:absolute;inset:0;overflow:hidden}
.lib__shape{
  position:absolute;display:block;opacity:0;
  /* the fly-in sets the resting transform; the pointer offset rides on top of
     it through a variable, so the two never fight over the same property */
  animation:libShapeIn 1.9s cubic-bezier(.22,.61,.36,1) forwards;
  will-change:transform;
}
.lib__shape-i{
  position:relative;display:block;width:100%;height:100%;border-radius:999px;
  border:1px solid var(--lib-shape-edge);
  box-shadow:0 10px 44px var(--lib-shape-shadow),
             inset 0 1px 0 var(--lib-shape-hl);
  animation:libShapeFloat 19s ease-in-out infinite;
}
.lib__shape-i::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 42%, var(--lib-shape-hl), transparent 70%);
}
.lib__shape--teal  .lib__shape-i{background:linear-gradient(120deg, var(--lib-shape-teal),  transparent 72%)}
.lib__shape--gold  .lib__shape-i{background:linear-gradient(120deg, var(--lib-shape-gold),  transparent 72%)}
.lib__shape--sage  .lib__shape-i{background:linear-gradient(120deg, var(--lib-shape-sage),  transparent 72%)}
.lib__shape--paper .lib__shape-i{background:linear-gradient(120deg, var(--lib-shape-paper), transparent 72%)}

@keyframes libShapeIn{
  from{opacity:0;transform:translate3d(0,-70px,0) rotate(calc(var(--r) - 15deg))}
  to{opacity:1;transform:translate3d(calc(var(--px) * var(--d) * -22px),
                                     calc(var(--py) * var(--d) * -14px),0)
              rotate(var(--r))}
}
@keyframes libShapeFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,9px,0)}
}
/* once the fly-in has landed, the shape keeps answering the pointer */
.lib__shape{transition:transform .5s cubic-bezier(.22,.61,.36,1)}

/* ---- pointer light ---- */
.lib__bg-spot{
  position:absolute;top:0;left:0;width:44rem;height:36rem;
  margin:-18rem 0 0 -22rem;
  transform:translate3d(var(--mx),var(--my),0);
  will-change:transform;
  background:radial-gradient(closest-side, var(--lib-bg-spot) 0%,
    color-mix(in srgb, var(--lib-bg-spot) 35%, transparent) 45%, transparent 76%);
}

/* ---- grain, so the wide gradients do not band ---- */
.lib__bg-grain{
  position:absolute;inset:0;opacity:var(--lib-bg-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---- palette ---- */
.lib{
  --lib-bg-top:rgba(28,122,85,.10);
  --lib-bg-bot:rgba(184,136,47,.07);
  --lib-bg-a1:rgba(28,122,85,.16);
  --lib-bg-a2:rgba(184,136,47,.11);
  --lib-bg-a3:rgba(17,44,40,.08);
  --lib-bg-spot:rgba(28,122,85,.10);
  --lib-bg-grain:.03;
  --lib-shape-edge:rgba(17,44,40,.10);
  --lib-shape-hl:rgba(255,255,255,.55);
  --lib-shape-shadow:rgba(17,44,40,.07);
  --lib-shape-teal:rgba(28,122,85,.16);
  --lib-shape-gold:rgba(184,136,47,.15);
  --lib-shape-sage:rgba(120,160,145,.15);
  --lib-shape-paper:rgba(255,255,255,.62);
}
.lib.is-dark{
  --lib-bg-top:rgba(59,232,166,.10);
  --lib-bg-bot:rgba(239,194,113,.06);
  --lib-bg-a1:rgba(59,232,166,.20);
  --lib-bg-a2:rgba(20,120,86,.30);
  --lib-bg-a3:rgba(239,194,113,.07);
  --lib-bg-spot:rgba(140,245,203,.10);
  --lib-bg-grain:.05;
  --lib-shape-edge:rgba(255,255,255,.14);
  --lib-shape-hl:rgba(255,255,255,.13);
  --lib-shape-shadow:rgba(0,0,0,.34);
  --lib-shape-teal:rgba(28,122,85,.26);
  --lib-shape-gold:rgba(184,136,47,.20);
  --lib-shape-sage:rgba(150,185,170,.14);
  --lib-shape-paper:rgba(245,246,242,.12);
}
.lib.is-dark .lib__bg-aurora{opacity:.68}

@media (max-width:700px){
  /* a phone keeps the wash and three shapes; the rest is per-frame work it
     does not need to be doing */
  .lib__bg-grain,.lib__bg-spot{display:none}
  .lib__shape:nth-child(n+4){display:none}
  .lib__bg-aurora{opacity:.5;animation-duration:70s}
}

@media (prefers-reduced-motion:reduce){
  .lib__bg-aurora{animation:none}
  .lib__shape{animation-duration:.01s;transition:none}
  .lib__shape-i{animation:none}
}


/* ---- the reader's chrome, on a phone ----
   The pane header stacked into three rows - metadata, "N entries linked to a
   page", then the button - and pushed the document to 335px down an 844px
   screen. On a phone the header's job is to say which page you are on and get
   out of the way; the entry count is desk information and the metadata can
   run to one line and truncate. */
@media (max-width:700px){
  .lib__pdfpane-h{padding:5px 10px;gap:8px;flex-wrap:nowrap}
  .lib__pdfpane-n{display:none}
  .lib__pdfpane-sp{display:none}
  .lib__panemeta{
    flex:1 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:11.2px;
  }
  .lib__pdfpane-h > span:first-child{flex:0 0 auto;font-size:10.6px}
  .lib__crumb{padding:8px 0 5px}
  /* with the header down to one row the frame can take the space back */
  .lib__pdfpane iframe{height:calc(100vh - 118px)}
}

/* ---- the phone's page reader ----
   An image of the page, not an embedded PDF. See SMALL in library.js for why
   the browser's own viewer cannot be used here. */
.lib__pageview{
  background:var(--lib-pdf-mat);
  overflow:auto;-webkit-overflow-scrolling:touch;
  display:block;
}
.lib__pageview img{
  display:block;width:100%;height:auto;
  background:#fff;
}
.lib__pagenav{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:8px 10px;border-top:1px solid var(--hairline);
  background:var(--paper);
}
.lib__pagenav button{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;min-height:44px;border-radius:9px;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink);
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.lib__pagenav button:active{background:var(--lib-t3)}
.lib__pagenav button svg{width:15px;height:15px}
.lib__pagenav button[data-page="prev"] svg{transform:rotate(180deg)}
.lib__pagenav-n{
  font-size:13px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:5.5em;text-align:center;
}

/* ---- phone: contents first ----
   The rail was ordered last, so on a phone the contents sat below the reader
   AND below the disclaimer - a reader had to scroll past the whole document to
   find the way into it. Collapsed it is 46px, so it belongs at the top where
   it is the first thing you can act on. */
@media (max-width:900px){
  .lib__doc .lib__toc{order:0;margin:0 0 12px}
  .lib__doc > div{order:1}
  /* the source line and title read as the document's, so they stay above it */
  .lib__toc{border:1px solid var(--hairline);border-radius:11px;background:var(--surface)}
}

@media (max-width:700px){
  /* "Full window" was wrapping onto two lines inside the pane header and
     taking the height back that the single row had just saved */
  .lib__pdfpane-h .lib__btn{white-space:nowrap;padding:0 11px;font-size:12.2px;gap:5px}
  .lib__pdfpane-h .lib__btn svg{width:13px;height:13px}
}
@media (max-width:400px){
  /* at this width the label loses to the page number; the icon still says it */
  .lib__pdfpane-h .lib__btn span,.lib__pdfpane-h .lib__btn{font-size:0}
  .lib__pdfpane-h .lib__btn{padding:0 12px;min-width:44px}
  .lib__pdfpane-h .lib__btn svg{width:16px;height:16px}
}

@media (max-width:900px){
  /* The language switch has to stay out of the collapse (a reader should not
     have to open Contents to find Hindi), but stacked it cost 150px before
     the document even began. One row: two buttons and the range beside them. */
  .lib__toc .lib__lang{
    display:flex;align-items:center;gap:7px;flex-wrap:nowrap;
    margin:0;padding:6px 0 0;border:0;
  }
  /* 44px stays 44px - compacting the row must not shrink the targets */
  .lib__lang-b{min-height:44px;padding:0 13px;font-size:13px;flex:0 0 auto}
  .lib__lang-n{
    flex:1 1 auto;min-width:0;font-size:10.6px;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;
  }
  .lib__toc-h{min-height:44px}
}