hdoc-tools 0.62.5 → 0.63.0

package/ui/css/theme-default/styles/htldoc.layouts.css

@@ -1,55 +1,115 @@
 /* put htl styles here */
 
+/*
+    No `.main-layout .library-banner` rule here. Nothing carried that class - index.html uses
+    .library-banner-hug below - so it was dead along with its 72KB /images/library.png.
+    Removed r723.
+*/
+
+.main-layout .library-banner-hug{
+  position:relative;
+  /* scrim gradient UNDER the text, over the photo: the image's bright light-streak ran
+     straight behind "How can we help?" and made it hard to read. The gradient darkens the
+     left/text side and fades out by ~78% so the right of the image stays visible.
+     background-position/size/repeat are comma lists - first value per layer is the gradient,
+     second the photo. */
+  background-image: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 78%),
+                    url(/images/hug_library.jpg);
+  background-repeat:no-repeat,no-repeat;
+  background-position: 0 0, 100% 50%;
+  background-size: 100% 100%, 900px;
+  background-color:#000000;
+  color: #ffffff;
+  height:250px;
+}
+
+.main-layout .library-banner-hug h1{
+  /* soft drop shadow lifts the heading off any bright detail the scrim doesn't fully cover */
+  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
+}
+
 /* LAYOUT */
 .hb-container-vertical{
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height:100%;
 }
+
 .hb-container-horizontal{
-    display: flex;
+  display: flex;
   flex-direction: row;
-  width: 100%;  
+  width:100%;
 }
 .hb-container-vertical > *,
 .hb-container-horizontal > *{
   flex-shrink: 1;
 }
-.hb-container-vertical > .hb-container-expand,
+
+/* "Grow to fill the parent" - a LAYOUT utility, nothing more.
+ *
+ * This used to declare `overflow: auto` alongside flex-grow, which quietly made every
+ * container that merely needed to fill its parent into a scroll container too. On the search
+ * view six of them nested inside each other and only the innermost two ever scrolled. Because
+ * :hover propagates to ancestors and the outer ones span the full width, any scrollbar they
+ * painted landed on the same pixels as the content scrollbar - so the content bar appeared to
+ * light up on its own when the filter sidebar was hovered.
+ *
+ * min-height/min-width are now explicit. They are NOT decoration: a flex item's automatic
+ * minimum size is its content size, which is why a nested flex column refuses to shrink and
+ * overflows its parent. `overflow: auto` used to set that minimum to zero as a side effect
+ * (per spec, any overflow value other than visible does), so removing the overflow without
+ * these would have broken every nested layout in the app.
+ *
+ * Scrolling is now opted into with .hb-scroll, below. */
+.hb-container-expand,
 .hb-container-horizontal > .hb-container-expand{
   flex-grow: 1;
-  overflow: auto;
-}
-.hb-full-height{
-  height: 100%;
-}
-.hb-min-height{
-  height: auto;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
 }
-.hb-overflow-hidden{
-  overflow: hidden !important;
+
+/* The scroll regions themselves. Selectors are specific enough to beat the
+ * `.hb-container-horizontal > .hb-container-expand` form above, which is (0,2,0) - a bare
+ * .hb-scroll would lose the tie and silently do nothing. */
+.hb-scroll,
+.hb-container-expand.hb-scroll,
+.hb-container-horizontal > .hb-container-expand.hb-scroll{
+  overflow: auto;
 }
+
+/* hb-full-height / hb-min-height / hb-overflow-hidden / hb-center-h / hb-text-overflow were
+   unused hb- layout utilities (the hb- system is app chrome, never authored content) and have
+   been removed. hb-text-overflow duplicated .overflow-ellipsis, which is the one in use. */
 .hb-center-v
 {
   margin-top: auto;
   margin-bottom: auto;
 }
-.hb-text-overflow
+
+.hb-bg-mute
 {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  background-color: var(--htl-c-bg-mute);  
 }
 
 /* toolbar */
 .toolbar-layout
 {
-    min-height: 58px;
     height: 58px;
     line-height: 58px;
     border-bottom: 1px solid var(--htl-c-divider-light);
 }
 
+.toolbar-layout .documentation-home
+{
+  font-size:16px;
+  font-weight:500;
+  color: var(--htl-button-alt-text);
+  border-left: 2px solid #efefef;
+  padding-left: 20px;
+  margin: 0;
+}
+
 .toolbar-logo
 {
   width: 200px;
@@ -60,18 +120,15 @@
 
 .toolbar-logo-image
 {
-    background: url(/css/images/hornbill-logo-full.svg) no-repeat left center;
+    cursor: pointer;
+    background: url(/images/hornbill-logo-full.svg) no-repeat left center;
     height:100%;
+    display: block;
 }
 
-.toolbar-split {
-  margin-top: auto;
-  margin-bottom: auto;
-  height: 50%;
-  border-left: 2px solid var(--htl-c-divider-light);
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  display: block;
+.dark .toolbar-logo-image
+{
+    background-image: url(/images/hornbill-logo-full-reversed.svg);
 }
 
 .toolbar-middle
@@ -82,53 +139,155 @@
 .toolbar-right
 {
   padding: 0px 20px;
+  /* never flex-shrink the icon/profile groups: when the toolbar row ran short of space the
+     default shrink squeezed the profile <img> (max-width:100%) to a 19px-wide oval. The
+     search-bar variant below is the one element that gives up width instead. */
+  flex-shrink: 0;
+}
+
+.toolbar-right.toolbar-search-bar
+{
+  /* the flexible element of the toolbar: fixed 240px basis when there is room, shrinks down
+     to 130px before anything else in the row is squeezed (everything else is flex-shrink:0) */
+  flex: 0 1 240px;
+  min-width: 130px;
+}
+
+.toolbar-search-bar .position-relative
+{
+  width: 100%; /* let the search input track the flexing container width */
+}
+
+ /* Transient "needs two characters" hint under the toolbar search box. Positioned against
+   .toolbar-search-bar .position-relative (the input wrapper), right-aligned because the box
+   sits at the right edge of the toolbar and a left-aligned bubble would run off screen at
+   narrow widths. Not in flow, so it never nudges the toolbar. */
+.search-tooshort-hint
+{
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 1200;
+  padding: 6px 10px;
+  border: 1px solid var(--htl-c-divider);
+  border-radius: 6px;
+  background-color: var(--htl-c-bg-soft);
+  color: var(--htl-c-text-2);
+  font-size: 0.8rem;
+  line-height: 1.2;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
 }
 
 .toolbar-action
 {
   cursor:pointer;
   text-decoration : none;
-  padding: 4px;
+  padding: 6px;
 }
 .toolbar-action:hover
 {
   background-color: var(--htl-c-blue-dimm-2);
+  border-radius: 4px 4px;
+}
+.toolbar-action.documentation-menu-popper
+{
+  display:none;
 }
 
+/* circular toolbar icon buttons */
+.toolbar-icon-btn
+{
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 
+/* Glyph size for the toolbar buttons. These are btn-sm, so without this the Bootstrap
+   Icons inherit a 12px font-size and read as specks in a 32px button. Sized here rather
+   than per-icon so every toolbar button matches - the MCP catalog icon is a CSS mask
+   (.hb-icon-mcp) and fills its box exactly, whereas an icon font glyph carries its own
+   internal padding, so the mask is set slightly smaller to land at the same weight. */
+.toolbar-icon-btn .bi
+{
+  font-size: 1.15rem;
+  line-height: 1;
+}
 
+/* WCAG 2.5.5: 44px minimum touch target - only on touch devices */
+@media (pointer: coarse) {
+  .toolbar-icon-btn {
+    width: 44px;
+    height: 44px;
+  }
+}
 
-/* toolbar title and desc */
+/* toolbar title (the description span is .description2, styled in base.css) */
 .toolbar-layout .title
 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.toolbar-layout .description
-{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 
-.toolbar-layout .mobile-menu-btn
+/* mobile burger (book navigation toggle). Lives in the book title band in the main app and in
+   the toolbar in the settings app - hence the unscoped selector. Hidden >=1020px (sidebar.css). */
+.mobile-menu-btn
 {
    border-radius: 4px 4px;
    margin-left:10px;
-   padding: 4 4;
+   /* no padding declaration: the old "padding: 4 4;" was unitless and therefore DROPPED by the
+      parser, so the button has always rendered with the UA default - keep that, don't "fix" it
+      into a visual change */
    font-size: var(--htl-massive-font-size);
    border-color: var(--htl-button-brand-border);
    color:var(--htl-c-brand-dark);
 }
 
-.toolbar-layout .mobile-menu-btn:hover
+.mobile-menu-btn:hover
 {
    border: var(--htl-button-brand-lighter);
    color:var(--htl-c-text-dark-1);
    background:var(--htl-c-brand);
 }
 
+/* book title band - burger sits left of the title/description block, vertically centered */
+.title-band
+{
+   display: flex;
+   align-items: center;
+   gap: 12px;
+}
+/* round brand button, matching the in-page TOC button (.toc-mobile-btn in content.css).
+   sidebar.css hides it >=1020px with an equal-specificity selector - it loads later, so
+   the display:flex here loses there by source order, as intended. */
+.title-band .mobile-menu-btn
+{
+   margin-left: 0;
+   flex: 0 0 auto;
+   width: 44px;
+   height: 44px;
+   border-radius: 50%;
+   border: none;
+   background: var(--htl-c-brand);
+   color: var(--htl-c-text-dark-1);
+   box-shadow: var(--htl-shadow-3);
+   font-size: 1.4rem;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+}
+.title-band .mobile-menu-btn:hover
+{
+   border: none;
+   background: var(--htl-c-brand);
+   color: var(--htl-c-text-dark-1);
+   filter: brightness(1.05);
+}
+
 /* top nav bar */
 .nav-bar-nav-list {
   align-items: stretch;
@@ -171,8 +330,8 @@
 {
   background-color: var(--htl-c-white-soft);
   padding:10px;
-  border: 1px solid  var(--htl-c-divider-light);  
-  border-radius: 4px 4px 0 0;
+  border: 1px solid  var(--htl-c-divider-light);
+  border-radius: var(--htl-box-radius) var(--htl-box-radius) 0 0;
 }
 .panel-header .icon
 {
@@ -198,12 +357,14 @@
 {
   background-color: var(--htl-c-black);
 }
+
 .panel-content
 {
   padding:10px;
-  border: 1px solid  var(--htl-c-divider-light);  
+  border: 1px solid  var(--htl-c-divider-light);
   border-color: var(--htl-c-divider-light)!important;
   border-top-width: 0px;
+  border-radius: 0 0 var(--htl-box-radius) var(--htl-box-radius);
 }
 
 .lh-normal
@@ -216,14 +377,30 @@
 }
 .fs-12
 {
-  font-size:12px;
+  font-size:12px !important;
 }
-/* user profile stuff */
-.dark .userprofile
+.fs-14
 {
-  background-color: var(--htl-c-bg);
-  
+  font-size:14px !important;
 }
+.fs-16
+{
+  font-size:16px !important;
+}
+.fs-18
+{
+  font-size:18px !important;
+}
+.fs-20
+{
+  font-size:20px !important;
+}
+
+/* user profile stuff */
+/* No background on .userprofile itself: the wrapper spans the toolbar's full 58px height,
+   so an opaque dark fill painted OVER the toolbar's border-bottom - a toolbar-coloured
+   notch "hanging" into the band below, dark mode only. The open menu is coloured by the
+   .dropdown-menu rules below, which is all the removed .dark rule was ever needed for. */
 
 .dark .userprofile .dropdown-menu
 {
@@ -241,70 +418,562 @@
 {
   display:none;
 }
-.userprofile .svg-prof
+/* unscoped: covers the toolbar dropdown avatars (.userprofile) AND the settings profile
+   details view, which renders .svg-prof outside .userprofile */
+.svg-prof
 {
   border-radius: 50%;
+  /* the default avatar SVG is an octagon with TRANSPARENT corners, so border-radius alone
+     changed nothing visible - a solid fill behind it makes the clipped shape read as a
+     circle, and the border keeps that circle visible on same-coloured toolbars */
+  background-color: #ffffff;
+  border: 1px solid var(--htl-c-divider-light);
 }
+/* eof user profile stuff */
 
-/* theme switcher */
-.theme-switch {
-  position:relative;
+/* The .theme-switch / .slider checkbox-toggle block lived here. The theme control has been the
+   two toolbar buttons for a long time - no markup anywhere emits theme-switch or slider, and
+   `input:checked + .slider` was an unscoped global rule. Removed along with the
+   .theme-switch-checkbox JS that used to drive it. */
+
+.input-group-text.white
+{
+  background-color: #ffffff;
+}
+
+/* Dark mode: Search input and filter button styles.
+   Borderless (transparent, not none, so the box height stays in step with the adjoining
+   .form-control) - the visible border made the magnifier segment stand out against the
+   search input beside it. */
+.dark .input-group-text.white
+{
+  background-color: var(--htl-c-bg-soft);
+  color: var(--htl-c-text-1);
+  border-color: transparent;
+}
+
+.dark .input-group .form-control
+{
+  background-color: var(--htl-c-bg-soft);
+  color: var(--htl-c-text-1);
+  /* transparent, matching .input-group-text.white above - a divider-coloured border left
+     light notches at the segment join and a faint outline round the input half while the
+     magnifier half was borderless */
+  border-color: transparent;
+  /* bootstrap's .form-control clips its background to padding-box, so with a transparent
+     border the fill stops 1px short all round and the input renders smaller than the
+     magnifier segment - paint under the border like .input-group-text does */
+  background-clip: border-box;
+}
+
+/* Dark mode: Toolbar search input */
+.dark .toolbar-search-bar .form-control
+{
+  background-color: var(--htl-c-bg-soft);
+  color: var(--htl-c-text-1);
+  border-color: var(--htl-c-divider);
+}
+
+/* Bootstrap's default placeholder is a near-black grey (rgba(33,37,41,.75)) - unreadable on
+   the dark-soft input backgrounds above. Covers every dark-mode text input in one go. */
+.dark .form-control::placeholder
+{
+  /* text-4 rather than text-2: placeholder is a hint, not content - the brighter tone read
+     like typed text. Still ~5:1 on the dark-soft input background. */
+  color: var(--htl-c-text-4);
+}
+
+.dark .LibraryContent .btn-light,
+.dark .library-banner-hug .btn-light
+{
+  background-color: var(--htl-c-bg-soft);
+  color: var(--htl-c-text-1);
+  border-color: var(--htl-c-divider);
+}
+
+.dark .LibraryContent .btn-light:hover,
+.dark .library-banner-hug .btn-light:hover
+{
+  background-color: var(--htl-c-bg-mute);
+  color: var(--htl-c-text-1);
+  border-color: var(--htl-c-divider-light);
+}
+
+.dark .LibraryContent .dropdown-menu,
+.dark .library-banner-hug .dropdown-menu
+{
+  background-color: var(--htl-c-bg-soft);
+  border-color: var(--htl-c-divider);
+}
+
+.dark .LibraryContent .dropdown-menu .dropdown-item,
+.dark .library-banner-hug .dropdown-menu .dropdown-item
+{
+  color: var(--htl-c-text-1);
+}
+
+.dark .LibraryContent .dropdown-menu .dropdown-item:hover,
+.dark .library-banner-hug .dropdown-menu .dropdown-item:hover
+{
+  background-color: var(--htl-c-bg-mute);
+  color: var(--htl-c-text-1);
+}
+
+.form-control:focus {
+  border-color: #0066cc;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+} 
+
+.pad-20
+{
+  padding:20px 20px;
+}
+
+.c-pointer
+{
+  cursor: pointer;
+}
+
+.mw-800
+{
+  max-width: 800px!important;
+}
+
+.fs-7
+{
+  font-size: 0.75rem!important;
+}
+
+.mt-018
+{
+  margin-top: 0.18rem!important;
+}
+
+.overflow-ellipsis
+{
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+
+.text-light-1
+{
+  color: var(--htl-c-text-2);
+}
+.text-light-2
+{
+  color: var(--htl-c-text-3);
+}
+
+
+/* edit action icon - to make align with pdf download */
+.toolbar-action .bi
+{
+  font-size: 20px;
+  top: 4px;
+  position: relative;
+}
+/* pdf download button */
+.toolbar-action.pdffile:hover{
+  background: rgba(0, 0, 255, 0);
+
+}
+.toolbar-action.pdffile a {
   display: inline-block;
-  width: 30px;
-  height: 20px;
-  
+  margin: 5px;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: 50px;
+}
+
+.toolbar-action.pdffile a span {
+  background: #a82315; /* Darkened for WCAG AAA (7:1) with white text */
+  border-radius: 4px;
+  color: #ffffff;
+  display: inline-block;
+  font-size: 8px;
+  font-weight: normal;
+  line-height: normal;
+  padding: 5px 10px;
+  position: relative;
+  text-transform: uppercase;
+  z-index: 1;
 }
 
-.theme-switch input { 
-  opacity: 0;
-  width: 0;
-  height: 0;
+.toolbar-action.pdffile a span:last-child {
+  margin-left: -20px;
 }
 
-.slider {
+.toolbar-action.pdffile a:after {
+  background: #ffffff;
+  border: solid 2px  #9fb4cc;
+  border-radius: 4px;
+  content: '';
+  display: block;
+  height: 28px;
+  left: 50%;
+  margin: -16px 0 0 -8px;
   position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  top: 60%;
+  width: 22px;
+}
+
+.toolbar-action.pdffile a span:first-child {
+  display: none;
+  margin-left: -7px;
+}
+
+.toolbar-action.pdffile a:hover span:first-child {
+  display: inline-block;
+}
+
+.toolbar-action.pdffile a:hover span:last-child {
+  display: none;
+}
+/* eof pdf download button */
+
+
+/* modal dialog - support dark mode */
+.modal-content
+{
+  color: var(--htl-c-text-1);
+  background-color: var(--htl-c-bg);
+  border: 1px solid var(--htl-c-divider-light);
 }
 
-.slider:before {
+.dark .border{
+  
+  border: 1px solid var(--htl-c-divider-light) !important;
+}
+.dark .border-bottom{
+  
+  border-bottom: 1px solid var(--htl-c-divider-light) !important;
+}
+.dark .border-top{
+  
+  border-top: 1px solid var(--htl-c-divider-light) !important;
+}
+
+
+/* only the hide-on-* utilities are used; the show-on-* twins matched nothing (and their
+   display:inherit made them a poor "show" anyway) */
+@media (max-width: 900px) {
+
+  .hide-on-tablet
+    {
+      display:none;
+    }
+
+  /* compact the toolbar: at the fixed 200px logo width plus the default 20px paddings the
+     fixed toolbar pieces (logo, wordmark, icon buttons, profile) exceeded the viewport well
+     above phone widths, so the flex row squeezed whatever it could - most visibly the
+     profile image. Applies from here down rather than only <=602px for the same reason. */
+  .toolbar-logo {
+    width: auto;
+    min-width: 0;
+    flex: 0 0 auto; /* without this the flex row shrank the container under its own 140px image */
+    padding: 0 10px;
+  }
+
+  .toolbar-logo-image {
+    width: 140px;
+    background-size: contain;
+  }
+
+  /* the logo already reads "Hornbill"; the wordmark doesn't fit alongside the search
+     bar/button and profile at these widths */
+  .toolbar-layout .documentation-home {
+    display: none;
+  }
+
+  .toolbar-middle {
+    padding: 0;
+  }
+
+  .toolbar-right {
+    padding: 0 10px;
+  }
+
+}
+
+
+/* narrow-viewport-only elements (e.g. the toolbar search button that replaces the inline
+   search box below 602px) - hidden by default, shown by the media query below */
+.show-on-mobile-only {
+  display: none;
+}
+
+@media (max-width: 602px) {
+  /* the inline search box is replaced by the .show-on-mobile-only search button */
+  .toolbar-search-bar{
+    display:none;
+  }
+
+  .hide-on-mobile
+    {
+      display:none;
+    }
+
+  .show-on-mobile-only {
+    display: inline-block;
+  }
+
+  /* the rest of the narrow-toolbar compaction (logo, wordmark, paddings) lives in the
+     max-width:900px block above - the toolbar ran out of space well above phone widths */
+
+}
+
+
+/* H2 toc/hash  highlighter.
+   Declared on :root, not `*`: these used to be stamped onto every element in the document
+   instead of inherited once - a real style-recalc cost on element-heavy article pages. */
+:root {
+  --highlight-anim-time: 3s;
+  --highlight-bkgnd: rgba(255, 219, 206, 0.212);
+  /* Was rgb(53,53,53) - fully opaque, and therefore able to hide the very section it is
+     highlighting if it ever paints above the text. White at 7.8% over the dark page background
+     (rgb(36,36,36)) composites to exactly that same rgb(53,53,53), so this is the same colour
+     with none of the risk, and it matches how the light-mode fill was already written. */
+  --dark-highlight-bkgnd: rgba(255, 255, 255, 0.078);
+}
+
+@keyframes ref-animation {
+    0% { background-color: transparent; border: dashed 2px transparent;}
+    4% {  background-color: var(--highlight-bkgnd); border: dashed 2px rgb(202, 40, 0); }
+    8% { background-color: transparent; border: dashed 2px transparent; }
+   12% {  background-color: var(--highlight-bkgnd); border: dashed 2px rgb(202, 40, 0); }
+   100% { background-color: transparent; border: dashed 2px transparent; }
+}
+
+/* Section highlight. This is an OVERLAY drawn over the section, not a wrapper around it -
+   the old .highlight-container re-parented the heading and its siblings into a new div and
+   never put them back, so containers accumulated and nested on every hash click. The overlay
+   is positioned against .injected-document-container (position:relative) and is inert. */
+.hb-section-highlight {
   position: absolute;
-  content: "";
-  height: 13px;
-  width: 13px;
-  left: 2px;
-  bottom: 4px;
+  left: 8px;
+  right: 8px;
+  /* behind the article text. Both fills are translucent, so being on top would only tint rather
+     than hide - this is the preferred rendering, not a correctness crutch. Keep both properties
+     that way round: if you ever make a fill opaque again, the overlay becomes a blindfold. */
+  z-index: -1;
+  pointer-events: none;
+  border-radius: 8px;
+  box-sizing: border-box;
+  animation-name: ref-animation;
+  animation-duration: var(--highlight-anim-time);
+}
+
+.dark .hb-section-highlight {
+  animation-name: dark-ref-animation;
+}
+
+@keyframes dark-ref-animation {
+    0% { background-color: transparent; border: dashed 2px transparent; }
+    4% { background-color: var(--dark-highlight-bkgnd); border: dashed 2px rgb(146, 146, 146); }
+    8% { background-color: transparent; border: dashed 2px transparent; }
+   12% { background-color: var(--dark-highlight-bkgnd); border: dashed 2px rgb(146, 146, 146); }
+  100% { background-color: transparent; border: dashed 2px transparent; }
+}
+
+.HTL-doc table {
   background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
 }
 
-input:checked + .slider {
-  background-color: #2196F3;
+.dark .HTL-doc table {
+  background-color: rgb(36, 36, 36);
 }
 
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
+.HTL-fs-sm {
+  font-size: .875rem !important;
 }
 
-input:checked + .slider:before {
-  -webkit-transform: translateX(13px);
-  -ms-transform: translateX(13px);
-  transform: translateX(13px);
+.HTL-actionlink {
+  color: var(--htl-c-blue);
+  cursor: pointer;
 }
 
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
+/* --htl-c-blue is a dark blue tuned for light backgrounds; on the dark page background
+   it measures 1.86:1, well under the WCAG AA 4.5:1 floor and dimmer than the body text
+   beside it - backwards for a call to action. The lighter blue is the same one the
+   library and search result links switch to in dark mode. */
+.dark .HTL-actionlink {
+  color: var(--htl-c-blue-light);
 }
 
-.slider.round:before {
-  border-radius: 50%;
+.HTL-skeleton{
+  background-color: var(--htl-c-gray-light-4);
+  position: relative;
+  border-radius: 0.25rem;
+  overflow: hidden;
 }
 
+.HTL-skeleton::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 20%,
+    rgba(255, 255, 255, 0.6) 50%,
+    rgba(255, 255, 255, 0.4) 80%,
+    transparent 100%
+  );
+  animation: HTL-wave-anim 1.5s ease-in-out infinite;
+  transform: translateX(-100%);
+}
+
+.dark .HTL-skeleton {
+  background-color: var(--htl-c-gray-dark-3);
+}
+
+.dark .HTL-skeleton::after {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.05) 20%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 80%,
+    transparent 100%
+  );
+}
+
+@keyframes HTL-wave-anim {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* skeletons are app chrome only (search + library loading states); the size variants that
+   nothing emits (-lg -sm -20 -40 -60 -80) have been removed - only -10 and -100 are used */
+.HTL-skeleton.HTL-skeleton-text{
+  height: 1rem;
+  width: 40%;
+  border-radius: 0.25rem;
+}
+.HTL-skeleton.HTL-skeleton-text.HTL-skeleton-text-10{ width: 10%; }
+.HTL-skeleton.HTL-skeleton-text.HTL-skeleton-text-100{ width: 100%; }
+
+.btn-xs{
+  padding: .14rem .14rem !important;
+  font-size: .875rem!important;
+  border-radius: .1rem!important;
+  line-height: 0!important;
+}
+
+
+/* One scrollbar width for the whole site.
+
+   Deliberately separate from the fade below, and deliberately on `*`. Unlike
+   scrollbar-color, `scrollbar-width` does NOT inherit, so setting it only on the
+   regions named below leaves every other scroll container - modals, the mobile
+   TOC panel, the settings app, long <select> popups - at the browser default.
+   That default is roughly 15px against `thin`'s 11px, so two scrollbars sitting
+   side by side visibly differ in width. Applying it once, to everything, is what
+   makes the width uniform; which bars FADE is a separate question, answered by
+   the scoped selectors below. */
+* { scrollbar-width: thin; }
+
+/* ---------------------------------------------------------------------------
+   Overlay scrollbars for the app's scroll regions.
+
+   This is a fixed-viewport shell: the document itself never scrolls and each
+   view is its own scroll region, so those regions each paint a permanent
+   scrollbar. The bar is transparent at rest and fades in on hover of the region
+   it controls.
+
+   Driven by the standard `scrollbar-color`, NOT `::-webkit-scrollbar`. Two
+   reasons, both load-bearing:
+
+     1. Chrome ignores the ::-webkit-scrollbar pseudo-elements entirely on any
+        element that also sets scrollbar-color or scrollbar-width. The two
+        cannot be combined - a Firefox fallback written the obvious way silently
+        disables the Chromium styling it was meant to complement.
+     2. ::-webkit-scrollbar pseudo-elements cannot be transitioned, so a fade
+        through them needs a custom-property indirection. scrollbar-color is a
+        real animatable property (verified interpolating in Chrome 151), so the
+        transition is just a transition.
+
+   Keyed off .hb-scroll, which is the class a scroll region opts in with (see the
+   top of this file). This used to be a hand-maintained list naming each region
+   individually, because .hb-container-expand could not be used as the shorthand -
+   it set `overflow: auto` alongside `flex-grow: 1`, so every layout container was
+   a scroll container too, and since :hover propagates to ancestors, hovering the
+   filter sidebar lit all six of the nested ones. Now that grow-to-fill and
+   is-a-scroll-region are separate classes, the fade can simply follow the latter
+   and stays correct as views are added.
+
+   .DocSidebar is listed separately because the search filter panel takes its
+   overflow from Bootstrap's .overflow-auto utility rather than from .hb-scroll.
+
+   Each region also declares the transparent rest value ITSELF rather than leaning
+   on an ancestor: scrollbar-color is an inherited property, and a region that only
+   inherits it never matches its own :hover rule.
+
+   Applied per-region rather than globally: touch and keyboard users, and anyone
+   who never hovers, still need to know a region scrolls. Touch keeps the
+   platform's own overlay bar, and the thumb still appears while scrolling.
+
+   No prefers-reduced-motion guard, deliberately. That query is about motion that
+   can cause discomfort - parallax, transforms, things that travel. This is a
+   colour cross-fade on a 10px bar, which travels nowhere. Guarding it would mean
+   anyone with the OS "reduce animations" setting on (common on Windows, and on
+   this machine) silently loses the behaviour entirely.
+   --------------------------------------------------------------------------- */
+.hb-scroll,
+.DocSidebar,
+.injected-document-content
+{
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.12s ease-out;
+}
+
+.hb-scroll:hover,
+.DocSidebar:hover,
+.injected-document-content:hover
+{
+  scrollbar-color: var(--htl-c-gray-light-2) transparent;
+}
+
+.dark .hb-scroll:hover,
+.dark .DocSidebar:hover,
+.dark .injected-document-content:hover
+{
+  scrollbar-color: var(--htl-c-gray-dark-1) transparent;
+}
+
+/* Safari predates scrollbar-color; it gets the pseudo-elements instead. Kept in
+   @supports so it can never apply alongside the block above. */
+@supports not (scrollbar-color: transparent) {
+  .hb-scroll::-webkit-scrollbar,
+  .DocSidebar::-webkit-scrollbar,
+  .injected-document-content::-webkit-scrollbar { width: 10px; }
+
+  .hb-scroll::-webkit-scrollbar-track,
+  .DocSidebar::-webkit-scrollbar-track,
+  .injected-document-content::-webkit-scrollbar-track { background: transparent; }
+
+  .hb-scroll::-webkit-scrollbar-thumb,
+  .DocSidebar::-webkit-scrollbar-thumb,
+  .injected-document-content::-webkit-scrollbar-thumb { background: transparent; }
+
+  .hb-scroll:hover::-webkit-scrollbar-thumb,
+  .DocSidebar:hover::-webkit-scrollbar-thumb,
+  .injected-document-content:hover::-webkit-scrollbar-thumb
+  {
+    background-color: var(--htl-c-gray-light-2);
+    border-radius: 10px;
+  }
+}