/* Flyleaf chrome — scrollbars + page-language picker (follows html[data-light]) */

/* Thin luminous scrollbar (all scrollable areas) */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--gold, #d4b46a) 32%, transparent) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--gold, #d4b46a) 26%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold, #d4b46a) 14%, transparent);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--gold, #d4b46a) 38%, transparent);
}

/* ---- Out language picker (replaces native select menu) ---- */
.outlang-wrap {
  position: relative;
  width: 100%;
}
.outlang-native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}
.outlang-trigger {
  width: 100%;
  min-height: 48px;
  padding: 0 44px 0 14px;
  border-radius: 14px;
  text-align: left;
  font: inherit;
  font-size: 15px;
  color: var(--card-ink, #eee6d4);
  border: 1px solid color-mix(in srgb, var(--gold, #d4b46a) 28%, transparent);
  background: color-mix(in srgb, var(--gold, #d4b46a) 9%, var(--card, #2a2822));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card-ink, #fff) 6%, transparent);
  cursor: pointer;
  position: relative;
}
.outlang-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 1.75px solid var(--muted, #8a7d62);
  border-bottom: 1.75px solid var(--muted, #8a7d62);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
  pointer-events: none;
}
.outlang-wrap.is-open .outlang-trigger::after {
  transform: rotate(-135deg) translateY(1px);
}
.outlang-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 24;
  max-height: min(52vh, 320px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--card-ink, #eee6d4) 14%, transparent);
  background: var(--card, #2a2822);
  color: var(--card-ink, #eee6d4);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.outlang-panel[hidden] { display: none !important; }
.outlang-search {
  flex: 0 0 auto;
  margin: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--card-ink, #eee6d4) 12%, transparent);
  background: color-mix(in srgb, var(--paper, #0e1812) 35%, var(--card, #2a2822));
  color: inherit;
  font-size: 14px;
}
.outlang-list {
  list-style: none;
  margin: 0;
  padding: 4px 6px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.outlang-list button {
  width: 100%;
  text-align: left;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.outlang-list button:hover,
.outlang-list button:focus-visible {
  background: color-mix(in srgb, var(--gold, #d4b46a) 12%, transparent);
}
.outlang-list button.is-on {
  background: color-mix(in srgb, var(--gold, #d4b46a) 22%, transparent);
  font-weight: 600;
  color: var(--gold, #d4b46a);
}

html[data-light="day"] .outlang-trigger {
  background: color-mix(in srgb, var(--gold, #b49656) 8%, var(--card, #f3efe6));
}
html[data-light="day"] .outlang-panel {
  box-shadow: 0 12px 28px rgba(20, 16, 10, 0.14);
}