/**
* @file
* technical library styles
*
* Palette, type scale and corner radii are pulled from the live he4hc
* theme (https://heforhc-dev.panapps.net): brand blue #1cabe2 / orange
* #f26a21, Roboto, body copy at 1.125rem, and the theme's flat, square
* corners (--bs-border-radius / --bs-badge-border-radius are both 0
* there) rather than the rounded look this component started with.
*/
.chapter-library,
.chapter-library *,
.chapter-library *::before,
.chapter-library *::after {
  box-sizing: border-box;
}

.chapter-library {
  --chapter-library-border-color: #ced4da;
  --chapter-library-accent: #1cabe2;
  --chapter-library-accent-hover: #1689b5;
  --chapter-library-secondary: #f26a21;
  --chapter-library-hover-bg: #e9ecef;
  --chapter-library-muted-bg: #f8f9fa;
  --chapter-library-text: #212529;
  --chapter-library-text-muted: rgba(33, 37, 41, .75);
  --chapter-library-badge-bg: #d2eef9;
  --chapter-library-badge-text: #0b445a;
  --chapter-library-badge-border: #a4ddf3;
  --chapter-library-card-shadow: 0 6px 30px 0 rgb(33 37 41 / 10%);

  display: flex;
  gap: 24px;
  align-items: flex-start;
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--chapter-library-text);
}

.chapter-library--loading {
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.chapter-library--error {
  color: #b3261e;
}

/* Section heading and intro, rendered by report-chapter-filter-results.html.twig
   just above the mount element. Styled as one gradient banner, as in the
   reference compendium page, in the theme's brand blue. */
h2.ceh-custom-report-chapter-filter-title,
.technical-compendium-description {
  background: #1cabe2;
  color: #fff;
}

h2.ceh-custom-report-chapter-filter-title {
  margin: 0;
  padding: 28px 34px 8px;
  border-radius: 12px 12px 0 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* No intro below: the heading is the whole banner. */
h2.ceh-custom-report-chapter-filter-title:not(:has(+ .technical-compendium-description)) {
  padding-bottom: 28px;
  border-radius: 12px;
}

.technical-compendium-description {
  padding: 0 34px 28px;
  border-radius: 0 0 12px 12px;
  font-size: 1rem;
  line-height: 1.5;
}

.technical-compendium-description p {
  max-width: 980px;
  margin: 0 0 0.5rem;
  color: inherit;
  opacity: 0.96;
}

.technical-compendium-description> :last-child,
.technical-compendium-description .field> :last-child {
  margin-bottom: 0;
}

.technical-compendium-description a {
  color: inherit;
  text-decoration: underline;
}

/* Mount element: separates the widget from the intro copy above it. */
.technical-compendium {
  padding-top: 24px;
}

/* Scroll targets for revealDetail() in library.js: land just below the
   theme's sticky .navbar (115px, as used for the panel's sticky top). */
.technical-compendium,
.chapter-library__detail-panel {
  scroll-margin-top: 115px;
}

/* Left column: search, filters and the grouped chapter listing. Sticks
   in place as the (much taller) detail column on the right is scrolled,
   with its own internal scroll for when the listing itself is taller
   than the viewport. */
.chapter-library__panel {
  flex: 0 0 330px;
  max-width: 330px;
  border: 1px solid var(--chapter-library-border-color);
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  /* Clears the theme's sticky .navbar, same offset as the chapter filters. */
  top: 115px;
  max-height: calc(100vh - 115px - 24px);
  /* The listing scrolls inside this padding, so scrolled content stops
     short of the rounded top/bottom edges instead of running into them. */
  padding: 10px 0;
  overflow: hidden;
}

.chapter-library__panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Slim scrollbar without the up/down arrow buttons. Chromium/Safari only
   honour ::-webkit-scrollbar-button once the scrollbar itself is styled;
   Firefox has no arrows, so it just gets the thin standard scrollbar. */
.chapter-library__panel-scroll::-webkit-scrollbar {
  width: 14px;
}

.chapter-library__panel-scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* The transparent thumb border (clipped out of the background) leaves a
   gap on either side so it doesn't touch the panel's right edge. */
.chapter-library__panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.chapter-library__panel-scroll::-webkit-scrollbar-thumb {
  background: var(--chapter-library-border-color);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 7px;
}

.chapter-library__panel-scroll::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
  background-clip: padding-box;
}

@supports not selector(::-webkit-scrollbar) {
  .chapter-library__panel-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--chapter-library-border-color) transparent;
  }
}

/* 6px + the panel's 10px padding keeps the same 16px top gap as before. */
.chapter-library__panel-header {
  padding: 6px 16px 0;
}

.chapter-library__panel-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--chapter-library-text);
}

.chapter-library__panel-intro {
  font-size: 0.875rem;
  color: var(--chapter-library-text-muted);
  margin: 0 0 12px;
}

.chapter-library__panel-intro p {
  margin: 0 0 0.5rem;
}

.chapter-library__panel-intro> :last-child {
  margin-bottom: 0;
}

.chapter-library__controls {
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--chapter-library-border-color);
}

.chapter-library__field {
  margin-bottom: 12px;
}

.chapter-library__field:last-child {
  margin-bottom: 0;
}

.chapter-library__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--chapter-library-text-muted);
  margin-bottom: 4px;
}

.chapter-library__search,
.chapter-library__select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--chapter-library-border-color);
  border-radius: 0;
  font-size: 0.875rem;
  background: #fff;
  color: var(--chapter-library-text);
}

.chapter-library__search:focus,
.chapter-library__select:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--chapter-library-accent);
}

.chapter-library__listing {
  padding: 8px 0;
}

.chapter-library__domain {
  border-bottom: 1px solid var(--chapter-library-border-color);
}

.chapter-library__domain:last-child {
  border-bottom: none;
}

.chapter-library__domain-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.7rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--chapter-library-text);
  cursor: pointer;
}

.chapter-library__domain-header:hover {
  background: var(--chapter-library-hover-bg);
}

.chapter-library__domain--expanded>.chapter-library__domain-header,
.chapter-library__domain--active>.chapter-library__domain-header {
  color: var(--chapter-library-accent-hover);
}

.chapter-library__domain-count {
  flex: 0 0 auto;
  min-width: 1.75rem;
  padding: 0.188rem 0.625rem;
  border-radius: 0;
  background: var(--chapter-library-badge-bg);
  color: var(--chapter-library-badge-text);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.chapter-library__cards {
  display: flex;
  flex-direction: column;
  padding: 0 1rem 0.75rem 1.5rem;
  gap: 6px;
}

/* Subdomain headings inside an expanded domain group. */
.chapter-library__subdomain-heading {
  margin: 0;
  padding: 0.5rem 1rem 0.35rem 1.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chapter-library-text-muted);
}

.chapter-library__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--chapter-library-border-color);
  border-radius: 8px;
  background: var(--chapter-library-muted-bg);
  font-size: 0.85rem;
  color: var(--chapter-library-text);
  cursor: pointer;
  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out, background-color 300ms ease-in-out;
}

.chapter-library__card:not(.chapter-library__card--active):hover {
  border-color: var(--chapter-library-accent);
  background: #fff;
  box-shadow: var(--chapter-library-card-shadow);
}

/* The open chapter: no hover effect and not clickable (see renderCards). */
.chapter-library__card--active {
  border-color: var(--chapter-library-accent);
  background: var(--chapter-library-badge-bg);
  color: var(--chapter-library-badge-text);
  font-weight: 600;
}

/* Specific enough to beat Bootstrap reboot's
   [type=button]:not(:disabled) { cursor: pointer }. */
.chapter-library__cards .chapter-library__card.chapter-library__card--active {
  cursor: default;
}

.chapter-library__cards .chapter-library__card.chapter-library__card--active .chapter-library__card-badge {
  background: #fff;
}

/* A card can carry several badges, so they wrap onto their own line(s)
   under the title instead of widening the card. */
.chapter-library__card-title {
  flex: 1 1 100%;
  min-width: 0;
}

.chapter-library__card-badge {
  flex: 0 1 auto;
  max-width: 100%;
  padding: 0.188rem 0.625rem;
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  background: #e9ecef;
  color: #495057;
}

.chapter-library__detail-status {
  padding: 0.25rem 0;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--chapter-library-text-muted);
}

.chapter-library__empty {
  padding: 1rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--chapter-library-text-muted);
}

/* Right column: detail panel. */
.chapter-library__detail-panel {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--chapter-library-border-color);
  border-radius: 12px;
  background: #fff;
}

.chapter-library__detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--chapter-library-border-color);
  font-size: 0.8125rem;
  color: var(--chapter-library-text-muted);
}

.chapter-library__overview-link {
  color: var(--chapter-library-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.chapter-library__detail {
  padding: 1.5rem;
}

.chapter-library__detail-title {
  margin: 0 0 0.35rem;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--chapter-library-text);
}

.chapter-library__detail-domain {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--chapter-library-text-muted);
}

.chapter-library__detail-description {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--chapter-library-text);
}

.chapter-library__detail-description p {
  margin: 0 0 0.75rem;
}

.chapter-library__detail-description> :last-child {
  margin-bottom: 0;
}

.chapter-library__edit-link {
  display: inline-block;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--chapter-library-accent);
  text-decoration: underline;
}

.chapter-library__edit-link:hover {
  color: var(--chapter-library-accent-hover);
}

.chapter-library__detail-figure {
  border: 1px solid var(--chapter-library-border-color);
  overflow: hidden;
  background: var(--chapter-library-muted-bg);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-library__detail-image {
  display: block;
  width: 100%;
  height: auto;
}

.chapter-library__detail-figure--placeholder {
  color: var(--chapter-library-text-muted);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  padding: 2rem;
}

.chapter-library__meta {
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
}

.chapter-library__meta dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--chapter-library-text-muted);
}

.chapter-library__meta dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--chapter-library-text);
}

/* Rendered chapter markup (contentHtml / sectionsHtml). */
.chapter-library__html {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--chapter-library-text);
}

.chapter-library__html>div+div {
  margin-top: 1.75rem;
}

/* Map/chart/table mounts until their widget renders (showBlockLoaders in
   library.js): a shimmering block in the widget's footprint, painted in the
   content box so the mount's own padding stays clear. Placeholder text
   ("Chart Here") is hidden, and the table's own faded loading state is
   overridden so the shimmer shows at full strength. */
.chapter-library__html .chapter-library__block-loading {
  min-height: 320px;
  border-radius: 8px;
  color: transparent;
  opacity: 1;
  background: linear-gradient(90deg, #eef1f4 25%, #f8f9fa 37%, #eef1f4 63%) 0 0 / 400% 100% content-box;
  animation: chapter-library-shimmer 1.4s ease infinite;
}

.chapter-library__html [data-table].chapter-library__block-loading {
  min-height: 12rem;
}

@keyframes chapter-library-shimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-library__html .chapter-library__block-loading {
    animation: none;
  }
}

/* Bottom margin separates an image from the title/text that follows it
   (the theme gives those headings no top margin). */
.chapter-library__html img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
}

.chapter-library__html .slick__slide img {
  margin-bottom: 0;
}

.chapter-library__html .accordion .accordion-header .field-header-svg {
  flex-shrink: 0;
}

.chapter-library__html a {
  color: var(--chapter-library-accent);
}

.chapter-library__html .chapter-reference-item {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--chapter-library-text-muted);
}

.chapter-library__html .chapter-reference-item p {
  margin: 0 0 0.5rem;
}