/* ==========================================================================
   ReferOn theme for BookStack — styled like the ReferOn app (admin.amsrefer.io).
   Tokens: see REFERON_UI_STYLE_GUIDE.md. Loaded by themes/referon/layouts/parts/custom-head.
   ========================================================================== */

:root {
  --ro-bg: #F8F8FF;
  --ro-surface: #FFFFFF;
  --ro-text: #2D3748;
  --ro-text-table: #343944;
  --ro-text-secondary: #4A5568;
  --ro-text-muted: #718096;
  --ro-text-faint: #A0AEC0;
  --ro-border: #E2E8F0;
  --ro-divider: #DBE0E6;
  --ro-primary: #235EA5;
  --ro-primary-hover-bg: #CEE5FC;
  --ro-primary-hover-text: #174376;
  --ro-primary-soft: #EBF5FE;
  --ro-nav-active: #E7EEFF;
  --ro-head-soft: #F3F9FF;
  --ro-hover: #EDF2F7;
  --ro-focus: 0 0 0 3px #B8DBFF;
  --ro-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --ro-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
  --ro-shadow-active: 0 1px 2px rgba(23, 25, 35, .1), 0 0 1px rgba(23, 25, 35, .2);
  --ro-radius: 6px;
  --ro-sidebar: 240px;

  /* BookStack variables (override the values printed from settings) */
  --color-primary: #235EA5;
  --color-primary-light: rgba(35, 94, 165, .12);
  --color-link: #235EA5;
  --color-bookshelf: #235EA5;
  --color-book: #235EA5;
  --color-chapter: #2E76CD;
  --color-page: #235EA5;
  --color-page-draft: #805AD5;
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Inter', sans-serif;
}
:root.dark-mode {
  --ro-bg: #14161C;
  --ro-surface: #1C1F27;
  --ro-text: #E2E8F0;
  --ro-text-table: #E2E8F0;
  --ro-text-secondary: #CBD5E0;
  --ro-text-muted: #A0AEC0;
  --ro-border: #2D3342;
  --ro-divider: #2D3342;
  --ro-primary-soft: rgba(58, 142, 247, .14);
  --ro-nav-active: rgba(58, 142, 247, .20);
  --ro-head-soft: rgba(58, 142, 247, .08);
  --ro-hover: rgba(255, 255, 255, .06);
  --color-primary: #3A8EF7;
  --color-link: #9DCCFA;
  --color-bookshelf: #9DCCFA;
  --color-book: #9DCCFA;
  --color-chapter: #9DCCFA;
  --color-page: #9DCCFA;
}

/* ---------- Base ---------- */
html, body { background-color: var(--ro-bg) !important; }
body, button, input, select, textarea, .text-body {
  font-family: 'Inter', sans-serif;
  color: var(--ro-text);
}
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; color: var(--ro-text); letter-spacing: 0; }
a { color: var(--ro-primary); }
a:hover { color: var(--ro-primary-hover-text); }
::selection { background: var(--ro-primary-hover-bg); }
.text-muted { color: var(--ro-text-muted) !important; }

/* ---------- App sidebar (the BookStack header, restyled) ---------- */
#header.referon-sidebar {
  background: var(--ro-bg) !important;
  color: var(--ro-text);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
  border-bottom: 0;
  box-shadow: none;
}
.referon-sidebar .rs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.referon-sidebar .rs-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--ro-text); font-size: 15px; font-weight: 600; text-decoration: none;
}
.referon-sidebar .rs-logo img { width: 32px; height: 32px; display: block; }
.referon-sidebar .rs-logo:hover { color: var(--ro-text); text-decoration: none; }
.referon-sidebar .mobile-menu-toggle svg { fill: var(--ro-text-secondary) !important; }

.referon-sidebar .rs-menu { display: flex; flex-direction: column; gap: 16px; min-height: 0; }

/* search */
.referon-sidebar .rs-search .search-box { max-width: none; width: 100%; margin: 0; position: relative; }
.referon-sidebar .rs-search .search-box input {
  width: 100%; height: 36px; box-sizing: border-box;
  background: var(--ro-surface) !important;
  border: 0 !important; border-radius: var(--ro-radius) !important;
  box-shadow: var(--ro-shadow-active);
  padding: 0 12px 0 34px !important;
  font-size: 14px; color: var(--ro-text) !important;
}
.referon-sidebar .rs-search .search-box input::placeholder { color: var(--ro-text-muted) !important; }
.referon-sidebar .rs-search .search-box button { left: 4px; color: var(--ro-text-muted) !important; }
.referon-sidebar .rs-search .search-box button svg { fill: var(--ro-text-muted) !important; }
.referon-sidebar .global-search-suggestions { min-width: 420px; z-index: 1000; }

/* shelf switcher (like the partner selector in ReferOn) */
.referon-sidebar .rs-shelf-switch { width: 100%; }
.referon-sidebar .rs-shelf-button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box; background: var(--ro-surface); border: 0; border-radius: var(--ro-radius); box-shadow: var(--ro-shadow-active); color: var(--ro-text); font-size: 14px; text-align: left; cursor: pointer; }
.referon-sidebar .rs-shelf-button svg { width: 18px; height: 18px; fill: var(--ro-primary); flex-shrink: 0; }
.referon-sidebar .rs-shelf-button svg:last-child { fill: var(--ro-text-muted); }
.referon-sidebar .rs-shelf-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.referon-sidebar .rs-shelf-switch .dropdown-menu { left: 0; right: 0; min-width: 100%; }

/* main links */
.referon-sidebar .rs-links { display: flex; flex-direction: column; gap: 6px; text-align: left !important; }
.referon-sidebar .rs-links > a {
  display: flex !important; align-items: center; gap: 12px;
  height: 36px; padding: 0 12px !important; margin: 0 !important; box-sizing: border-box;
  border-radius: var(--ro-radius);
  color: var(--ro-text) !important; font-size: 14px; font-weight: 400;
  opacity: 1 !important; text-decoration: none;
}
.referon-sidebar .rs-links > a svg { width: 18px; height: 18px; fill: var(--ro-text-secondary) !important; margin: 0 !important; flex-shrink: 0; }
.referon-sidebar .rs-links > a:hover { background: var(--ro-hover); }
.referon-sidebar .rs-links > a.active,
.referon-sidebar .rs-links > a[aria-current="page"] { background: var(--ro-nav-active); box-shadow: var(--ro-shadow-active); }
/* guests get a dedicated login card at the bottom */
.referon-sidebar .rs-links > a[href$="/login"] { display: none !important; }

/* current book tree inside the sidebar */
.referon-sidebar .rs-book-tree { border-top: 1px solid var(--ro-divider); padding-top: 12px; }
.referon-sidebar .rs-book-tree .book-tree { margin: 0 !important; }
.referon-sidebar .rs-book-tree h5 {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12px; line-height: 16px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ro-text-table); margin: 0 0 8px 12px;
}
.referon-sidebar .rs-book-tree .entity-list-item {
  padding: 7px 12px; border-radius: var(--ro-radius); font-size: 14px; line-height: 20px; color: var(--ro-text);
  gap: 10px;
}
.referon-sidebar .rs-book-tree .entity-list-item .icon { width: 18px; height: 18px; flex-shrink: 0; }
.referon-sidebar .rs-book-tree .entity-list-item .icon svg { width: 18px; height: 18px; fill: var(--ro-text-secondary); }
.referon-sidebar .rs-book-tree .entity-list-item .icon::after { display: none !important; }
.referon-sidebar .rs-book-tree .entity-list-item .entity-list-item-name { font-size: 14px; font-weight: 400; }
.referon-sidebar .rs-book-tree .entity-list-item:hover { background: var(--ro-hover); }
.referon-sidebar .rs-book-tree .entity-list-item.selected {
  background: var(--ro-nav-active) !important; box-shadow: var(--ro-shadow-active);
}
.referon-sidebar .rs-book-tree .entity-list-item.selected .entity-list-item-name { font-weight: 500; color: var(--ro-primary); }
.referon-sidebar .rs-book-tree .entity-list-item.no-hover { padding: 0 0 0 12px; }
.referon-sidebar .rs-book-tree .entity-list-item.no-hover:hover { background: transparent; }
.referon-sidebar .rs-book-tree .chapter-contents-toggle { font-size: 12px; color: var(--ro-text-muted); padding: 2px 0 2px 28px; }
.referon-sidebar .rs-book-tree .chapter-contents-toggle svg { fill: var(--ro-text-muted); }
.referon-sidebar .rs-book-tree .inset-list { border-left: 1px solid var(--ro-divider); }

.referon-sidebar .rs-spacer { flex-grow: 1; }

/* account card */
.referon-sidebar .rs-account {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 12px; box-sizing: border-box;
  background: var(--ro-primary-soft); border-radius: var(--ro-radius);
  text-decoration: none;
}
.referon-sidebar .rs-account:hover { text-decoration: none; }
.referon-sidebar .rs-account > svg { width: 20px; height: 20px; fill: var(--ro-primary); flex-shrink: 0; }
.referon-sidebar .rs-account strong { display: block; font-size: 14px; font-weight: 500; color: var(--ro-primary); }
.referon-sidebar .rs-account small { display: block; font-size: 12px; color: var(--ro-text-muted); }
.referon-sidebar .rs-account .dropdown-container { width: 100%; }
.referon-sidebar .rs-account .user-name {
  width: 100%; display: flex !important; align-items: center; gap: 10px;
  padding: 0 !important; background: transparent; border: 0; color: var(--ro-text) !important; font-size: 14px; font-weight: 500;
}
.referon-sidebar .rs-account .user-name .avatar { width: 36px; height: 36px; border-radius: 9999px; }
.referon-sidebar .rs-account .user-name .name { flex-grow: 1; text-align: left; color: var(--ro-text) !important; }
.referon-sidebar .rs-account .user-name svg { fill: var(--ro-text-muted) !important; }
.referon-sidebar .rs-account .dropdown-menu { bottom: 100%; top: auto !important; left: 0; right: 0; margin-bottom: 8px; }

/* dropdown menus */
.dropdown-menu {
  border-radius: var(--ro-radius) !important; border: 0 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05) !important;
  padding: 6px 0 !important;
}
.dropdown-menu .icon-item { color: var(--ro-text) !important; font-size: 14px; }
.dropdown-menu .icon-item svg { fill: var(--ro-text-secondary) !important; }
.dropdown-menu .icon-item:hover { background: var(--ro-hover) !important; }

/* ---------- Desktop layout: fixed sidebar + content ---------- */
@media screen and (min-width: 1000px) {
  #header.referon-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ro-sidebar); height: 100vh; z-index: 20; border-right: 1px solid var(--ro-divider); }
  .referon-sidebar .rs-menu { display: flex !important; flex-grow: 1; position: static !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
  body { padding-left: var(--ro-sidebar); box-sizing: border-box; }

  /* tri layout: content + one right column (right blocks, then left blocks) */
  .tri-layout-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
    grid-template-areas: "b c" !important;
    column-gap: 24px !important;
    margin: 0 !important;
    padding: 24px !important;
    max-width: 1440px;
  }
  .tri-layout-middle { grid-area: b !important; padding-top: 0 !important; min-width: 0; }
  .tri-layout-middle-contents { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .tri-layout-sides { grid-area: c !important; grid-column: auto !important; }
  .tri-layout-sides-content {
    display: flex !important; flex-direction: column; gap: 0;
    position: sticky !important; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto;
    grid-template-columns: none !important;
  }
  .tri-layout-left, .tri-layout-right { width: auto !important; grid-area: auto !important; }
  .tri-layout-left-contents, .tri-layout-right-contents {
    position: static !important; height: auto !important; max-height: none !important;
    padding: 0 !important; overflow: visible !important;
  }
  body.rf-home .tri-layout-container { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "b" !important; }
  body.rf-home .tri-layout-sides { display: none !important; }
}

/* ---------- Side column blocks (right column) ---------- */
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
  background: var(--ro-surface);
  border-radius: var(--ro-radius);
  box-shadow: var(--ro-shadow);
  padding: 16px;
  margin: 0 0 16px !important;
  opacity: 1 !important;
}
.tri-layout-left-contents h5, .tri-layout-right-contents h5 {
  font-family: 'Oswald', sans-serif !important; font-weight: 500 !important;
  font-size: 12px !important; line-height: 16px !important; letter-spacing: .6px !important;
  text-transform: uppercase; color: var(--ro-text-table) !important; margin: 0 0 10px !important;
}
.tri-layout-left-contents .icon-list-item, .tri-layout-right-contents .icon-list-item {
  color: var(--ro-text) !important; font-size: 14px; padding: 6px 8px !important; border-radius: var(--ro-radius);
  gap: 10px;
}
.tri-layout-left-contents .icon-list-item > span:first-child,
.tri-layout-right-contents .icon-list-item > span:first-child {
  background: transparent !important; width: 18px !important; height: 18px !important; margin: 0 !important;
}
.tri-layout-left-contents .icon-list-item svg, .tri-layout-right-contents .icon-list-item svg {
  fill: var(--ro-primary) !important; width: 18px; height: 18px;
}
.tri-layout-left-contents .icon-list-item:hover, .tri-layout-right-contents .icon-list-item:hover {
  background: var(--ro-primary-soft) !important; color: var(--ro-primary-hover-text) !important;
}
.tri-layout-right-contents hr, .tri-layout-left-contents hr { border-color: var(--ro-divider); margin: 8px 0; }
.entity-meta { font-size: 13px; color: var(--ro-text-muted); }

/* page navigation (table of contents) */
#page-navigation .sidebar-page-nav { border-left: 0 !important; padding: 0; margin: 0; }
#page-navigation .sidebar-page-nav li { padding: 0 !important; margin: 0; }
#page-navigation .sidebar-page-nav li a {
  display: block; padding: 6px 8px; border-radius: var(--ro-radius);
  font-size: 14px; line-height: 20px; color: var(--ro-text-secondary);
}
#page-navigation .sidebar-page-nav li.h3 a, #page-navigation .sidebar-page-nav li.h4 a,
#page-navigation .sidebar-page-nav li.h5 a, #page-navigation .sidebar-page-nav li.h6 a { padding-left: 20px; }
#page-navigation .sidebar-page-nav li a:hover { background: var(--ro-hover); color: var(--ro-text); text-decoration: none; }
#page-navigation .sidebar-page-nav li.current-heading a { background: var(--ro-primary-soft); color: var(--ro-primary); font-weight: 500; }
#page-navigation .sidebar-page-nav-bullet { display: none !important; }

/* tags */
.tag-item { border: 0 !important; border-radius: var(--ro-radius) !important; background: var(--ro-primary-soft) !important; }
.tag-item .tag-name, .tag-item .tag-value { color: var(--ro-primary) !important; font-size: 12px; font-weight: 500; border: 0 !important; background: transparent !important; }
.tag-item .tag-name svg { fill: var(--ro-primary) !important; }

/* ---------- Cards, headings, breadcrumbs ---------- */
.card, .content-wrap.card {
  background: var(--ro-surface) !important;
  border: 0 !important;
  border-radius: var(--ro-radius) !important;
  box-shadow: var(--ro-shadow) !important;
}
.content-wrap.card { padding: 32px 40px 40px !important; margin: 0 0 16px !important; }
.card-title { font-family: 'Oswald', sans-serif !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: .6px; text-transform: uppercase; color: var(--ro-text-table) !important; }

.breadcrumbs { justify-content: flex-start !important; text-align: left !important; font-size: 14px; }
.breadcrumbs .icon-list-item { padding: 4px 6px !important; color: var(--ro-text-muted) !important; gap: 6px; }
.breadcrumbs .icon-list-item span:first-child { background: transparent !important; width: 16px !important; height: 16px !important; margin: 0 !important; }
.breadcrumbs .icon-list-item svg { fill: var(--ro-text-muted) !important; width: 16px; height: 16px; }
.breadcrumbs .icon-list-item:hover { color: var(--ro-primary) !important; background: transparent !important; }
.breadcrumbs .separator svg { fill: var(--ro-text-faint) !important; }

h1, .list-heading, .content-wrap h1 { font-size: 30px !important; line-height: 38px !important; font-weight: 500 !important; }

/* ---------- Page content typography ---------- */
.page-content { font-size: 16px; line-height: 1.65; color: var(--ro-text); }
.page-content h1 { margin-bottom: 16px; }
.page-content h2 { font-size: 20px; line-height: 28px; font-weight: 600; margin-top: 28px; }
.page-content h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin-top: 20px; }
.page-content h4, .page-content h5, .page-content h6 { font-size: 15px; font-weight: 600; }
.page-content p, .page-content li { color: var(--ro-text); }
.page-content a { color: var(--ro-primary); text-decoration: none; font-weight: 500; }
.page-content a:hover { text-decoration: underline; }
.page-content img { border-radius: 4px; }
.page-content figure.image { border: 1px solid var(--ro-border); border-radius: var(--ro-radius); background: #FBFCFD; padding: 8px; }
html.dark-mode .page-content figure.image { background: var(--ro-bg); }
.page-content video, .page-content iframe { max-width: 100%; border-radius: var(--ro-radius); border: 1px solid var(--ro-border); }
.page-content code { background: var(--ro-hover); border: 0; border-radius: 4px; padding: 1px 5px; }
.page-content pre { border-radius: var(--ro-radius); border: 1px solid var(--ro-border); }
.page-content blockquote { border-left: 3px solid var(--ro-primary-hover-bg); background: var(--ro-bg); border-radius: 0 var(--ro-radius) var(--ro-radius) 0; }
.page-content hr { border-color: var(--ro-divider); }

/* callouts: soft tinted boxes without the left border (ReferOn palette) */
.page-content .callout {
  border-left: 0 !important; border-radius: var(--ro-radius) !important;
  padding: 12px 16px 12px 44px !important; margin: 12px 0 !important; font-size: 15px;
}
.page-content .callout::before { left: 16px !important; top: 14px !important; }
.page-content .callout.info    { background: #EFF8FF !important; color: #1849A9 !important; }
.page-content .callout.success { background: #ECFDF3 !important; color: #05603A !important; }
.page-content .callout.warning { background: #FFFAEB !important; color: #93370D !important; }
.page-content .callout.danger  { background: #FEF3F2 !important; color: #912018 !important; }
.page-content .callout * { color: inherit !important; }

/* details / accordions */
.page-content details {
  border: 0; border-radius: var(--ro-radius); background: var(--ro-bg);
  box-shadow: inset 0 0 0 1px var(--ro-border); padding: 8px 16px; margin: 12px 0;
}
.page-content details summary { font-weight: 500; color: var(--ro-primary); cursor: pointer; padding: 4px 0; }

/* tables: like ReferOn data tables */
.page-content table { border-collapse: collapse; border: 0 !important; border-radius: var(--ro-radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ro-divider); }
.page-content table td, .page-content table th {
  border: 0 !important; border-bottom: 1px solid var(--ro-divider) !important;
  padding: 12px !important; font-size: 14px; line-height: 20px; color: var(--ro-text-table); background: transparent;
}
.page-content table thead th, .page-content table thead td, .page-content table th {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12px; line-height: 16px;
  letter-spacing: .6px; text-transform: uppercase; background: var(--ro-head-soft) !important;
}
.page-content table tr:last-child td { border-bottom: 0 !important; }

/* previous / next */
#sibling-navigation { padding: 0 !important; gap: 16px; margin-bottom: 24px !important; }
#sibling-navigation a {
  display: block; background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow);
  padding: 12px 16px !important; border: 0 !important;
}
#sibling-navigation a > div:first-child { padding: 0 !important; font-size: 12px; color: var(--ro-text-muted); }
#sibling-navigation .icon-list-item { padding: 2px 0 !important; font-size: 14px; font-weight: 500; color: var(--ro-text); gap: 8px; }
#sibling-navigation .icon-list-item span:first-child { background: transparent !important; width: 18px !important; margin: 0 !important; }
#sibling-navigation .icon-list-item svg { fill: var(--ro-primary) !important; }

/* ---------- Buttons & forms ---------- */
.button, button.button {
  background-color: var(--ro-primary-fill, var(--ro-primary)) !important; border: 0 !important; color: #FFFFFF !important;
  border-radius: var(--ro-radius) !important; box-shadow: var(--ro-shadow-sm) !important;
  font-weight: 500; text-transform: none; letter-spacing: 0;
}
.button:hover { background-color: #174376 !important; }
.button.outline {
  background: var(--ro-surface) !important; color: var(--ro-primary) !important; box-shadow: var(--ro-shadow) !important;
}
.button.outline:hover { background: var(--ro-primary-hover-bg) !important; color: var(--ro-primary-hover-text) !important; }
.button.outline svg { fill: currentColor !important; }
.text-button { color: var(--ro-primary); }
.input-base, .form-group input[type=text], .form-group input[type=email], .form-group input[type=password], .form-group select, .form-group textarea {
  border: 1px solid var(--ro-border) !important; border-radius: var(--ro-radius) !important;
  background: var(--ro-surface) !important; color: var(--ro-text) !important;
}
.input-base:focus, .form-group input:focus, .form-group textarea:focus { box-shadow: var(--ro-focus) !important; border-color: #9DCCFA !important; }

/* ---------- Lists: books, shelves, chapters ---------- */
.entity-list-item { border-radius: var(--ro-radius); }
.entity-list-item:hover { background: var(--ro-bg) !important; }
.entity-list-item .entity-list-item-name { font-weight: 500; color: var(--ro-text); }
.entity-list-item .entity-item-snippet p { color: var(--ro-text-muted) !important; font-size: 13px; }
.entity-list-item-image {
  width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important;
  border-radius: 9999px !important; background-color: var(--ro-primary-soft) !important;
  box-shadow: none !important; align-self: center !important; display: flex !important; align-items: center; justify-content: center;
}
.entity-list-item-image svg { display: block !important; fill: var(--ro-primary) !important; width: 20px !important; height: 20px !important; position: static !important; opacity: 1 !important; }

/* grid cards: app-style light header instead of cover artwork */
.grid-card { border-radius: var(--ro-radius) !important; box-shadow: var(--ro-shadow) !important; border: 0 !important; overflow: hidden; background: var(--ro-surface); transform: none !important; }
.grid-card:hover { box-shadow: var(--ro-shadow), var(--ro-focus) !important; }
.featured-image-container-wrap { background: var(--ro-primary-soft) !important; min-height: 0 !important; display: flex !important; align-items: center; }

.featured-image-container-wrap .svg-icon {
  display: block !important; position: static !important; width: 28px !important; height: 28px !important;
  fill: var(--ro-primary) !important; opacity: 1 !important;
}
.grid-card-content h2 { font-size: 18px !important; line-height: 26px !important; font-weight: 500 !important; }
.grid-card-content p { color: var(--ro-text-muted) !important; font-size: 13px; }
.grid-card-footer { color: var(--ro-text-muted) !important; font-size: 12px; }

/* book contents: ReferOn-style table rows */
.book-contents { background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: inset 0 0 0 1px var(--ro-divider); overflow: hidden; }
.book-contents > .entity-list-item, .book-contents > .chapter-expansion {
  border-radius: 0 !important; border-bottom: 1px solid var(--ro-divider); margin: 0 !important; padding: 12px 16px !important;
}
.book-contents > .entity-list-item.chapter.has-children { border-bottom: 0; padding-bottom: 2px !important; }
.book-contents > .chapter-expansion { padding-top: 0 !important; padding-left: 64px !important; }
.book-contents > :last-child { border-bottom: 0; }
.book-contents .entity-list-item > .icon { width: 36px !important; height: 36px !important; min-width: 36px; }
.book-contents .entity-list-item > .icon::after, .book-contents .chapter-expansion > .icon::after { display: none !important; }
.book-contents .entity-list-item > .icon svg {
  display: block !important; width: 36px !important; height: 36px !important; padding: 9px; box-sizing: border-box;
  background: var(--ro-primary-soft); border-radius: 9999px; fill: var(--ro-primary) !important;
}
.book-contents .chapter-expansion > .icon { display: none !important; }
.book-contents .entity-list-item-name { font-size: 15px; }
.book-contents .chapter-contents-toggle { font-size: 13px; color: var(--ro-text-muted) !important; }

/* ---------- Custom homepage (themes/referon/home/shelves) ---------- */
.rf-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.rf-page-head h1 { margin: 0 !important; }
.rf-search {
  width: 520px; max-width: 100%; height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; box-sizing: border-box; background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow);
}
.rf-search svg { width: 20px; height: 20px; fill: var(--ro-text-muted); flex-shrink: 0; }
.rf-search input { flex-grow: 1; border: 0 !important; outline: none; background: transparent !important; font-size: 14px; color: var(--ro-text); box-shadow: none !important; padding: 0 !important; }
.rf-search input::placeholder { color: var(--ro-text-muted); }
.rf-card { background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow); }
.rf-shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-bottom: 24px; }
.rf-shelf { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.rf-shelf-head { display: flex; align-items: center; gap: 12px; color: var(--ro-text); text-decoration: none; }
.rf-shelf-head:hover { color: var(--ro-text); text-decoration: none; }
.rf-badge {
  width: 40px; height: 40px; border-radius: 9999px; background: var(--ro-primary-soft); color: var(--ro-primary);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.rf-shelf-head > span:last-child { display: flex; flex-direction: column; }
.rf-shelf-title { font-size: 18px; font-weight: 500; }
.rf-muted { color: var(--ro-text-muted); font-size: 12px; }
.rf-shelf-books { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ro-divider); }
.rf-shelf-books li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ro-divider); font-size: 14px; }
.rf-shelf-books li:last-child { border-bottom: 0; }
.rf-shelf-books a { font-weight: 500; }
.rf-table-card { overflow: hidden; }
.rf-toolbar { height: 56px; display: flex; align-items: center; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--ro-divider); }
.rf-pill { height: 32px; display: inline-flex; align-items: center; padding: 6px 12px; box-sizing: border-box; border-radius: var(--ro-radius); font-size: 14px; font-weight: 500; color: var(--ro-text-secondary); }
.rf-pill.active { background: var(--ro-primary-soft); color: var(--ro-primary); box-shadow: var(--ro-shadow-sm); }
.rf-table { width: 100%; border-collapse: collapse; }
.rf-table th {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ro-text-table); text-align: left; padding: 13px 12px 13px 16px;
  border-bottom: 1px solid var(--ro-divider); background: transparent;
}
.rf-table td { font-size: 14px; line-height: 20px; color: var(--ro-text-table); padding: 0 12px 0 16px; height: 52px; border-bottom: 1px solid var(--ro-divider); }
.rf-table tr:last-child td { border-bottom: 0; }
.rf-strong-link { font-weight: 500; }

/* ---------- Footer, misc ---------- */
footer { background: transparent !important; color: var(--ro-text-muted); }

.notification { border-radius: var(--ro-radius) !important; }

/* ---------- Mobile / narrow screens ---------- */
@media screen and (max-width: 999px) {
  #header.referon-sidebar { gap: 0; padding: 10px 16px; border-bottom: 1px solid var(--ro-divider); }
  .referon-sidebar .rs-menu { display: none; padding: 12px 0 4px; }
  .referon-sidebar .rs-menu.show { display: flex; }
  .referon-sidebar .mobile-menu-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  

  .tri-layout-mobile-tabs {
    background: var(--ro-bg) !important; box-shadow: none !important; border-bottom: 1px solid var(--ro-divider);
    padding: 10px 16px; position: sticky; top: 0; z-index: 10;
  }
  .tri-layout-mobile-tabs .grid { gap: 8px !important; }
  .tri-layout-mobile-tab {
    height: 40px; padding: 0 12px !important; border: 0 !important; border-radius: var(--ro-radius);
    background: var(--ro-surface) !important; box-shadow: var(--ro-shadow);
    color: var(--ro-text-secondary) !important; font-size: 14px; font-weight: 500;
  }
  .tri-layout-mobile-tab.active, .tri-layout-mobile-tab[aria-selected="true"] {
    background: var(--ro-primary-soft) !important; color: var(--ro-primary) !important; box-shadow: var(--ro-shadow-sm);
  }
  .tri-layout-container { margin: 0 !important; padding: 16px !important; }
  .content-wrap.card { padding: 20px 16px !important; }
  h1, .list-heading, .content-wrap h1 { font-size: 24px !important; line-height: 32px !important; }
  .page-content h2 { font-size: 18px; line-height: 26px; }
  .rf-search { width: 100%; }
  .rf-table th:nth-child(3), .rf-table td:nth-child(3) { display: none; }
  .book-contents > .chapter-expansion { padding-left: 16px !important; }
}

/* ---------- Fixes after first review ---------- */
/* sidebar: fixed top + bottom, only the book tree scrolls */
@media screen and (min-width: 1000px) {
  
  
  .referon-sidebar .rs-book-tree { min-height: 0; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
  
  /* mobile-only links (e.g. "Search") stay hidden on desktop */
  .referon-sidebar .rs-links > a.hide-over-l { display: none !important; }
  .tri-layout-left, .tri-layout-right { height: auto !important; min-height: 0 !important; position: static !important; }
  /* left blocks (search, tags, shelves, activity) above details/actions */
  .tri-layout-sides-content .tri-layout-left { order: 1; }
  .tri-layout-sides-content .tri-layout-right { order: 2; }
}
.referon-sidebar .rs-account { width: 100%; align-self: stretch; }

/* book tree: only the current chapter is expanded, no "N pages" toggles */
.referon-sidebar .rs-book-tree .chapter-contents-toggle { display: none !important; }
.referon-sidebar .rs-book-tree .entity-list-item.no-hover:has(.inset-list:not([style*="display: block"])) { display: none !important; }
.referon-sidebar .rs-book-tree .entity-list-item .icon { display: flex !important; align-items: center; }
.referon-sidebar .rs-book-tree .entity-list-item .icon svg { display: block !important; }

/* headings inside imported article content are smaller than the page title */
.page-content h1:not(#bkmrk-page-title) { font-size: 22px !important; line-height: 30px !important; font-weight: 600 !important; margin-top: 28px; }
#bkmrk-page-title { margin-top: 0; }

/* hide technical migration tags from readers */
.tag-item:has(a[href*="helpjuice_id"]), .tag-item:has(a[href*="helpjuice_category"]) { display: none !important; }
.tag-box:not(:has(.tag-item:not([style*="none"]))) { display: none; }

/* tables on the homepage: centered rows, no vertical rules */
.rf-table th, .rf-table td { vertical-align: middle; border-left: 0 !important; border-right: 0 !important; }
.tri-layout-left-contents:empty, .tri-layout-right-contents:empty { display: none !important; }
.tri-layout-left-contents, .tri-layout-right-contents { min-height: 0 !important; }
.referon-sidebar .rs-book-tree { overflow-x: hidden !important; }
.referon-sidebar .rs-book-tree .entity-list-item-name { overflow-wrap: anywhere; }

@media screen and (max-width: 999px) {
  .referon-sidebar .rs-menu.show {
    position: static !important; width: 100% !important; max-width: none !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
    padding: 12px 0 8px !important; gap: 12px;
  }
  
  .referon-sidebar .rs-book-tree { max-height: 45vh; overflow-y: auto; overflow-x: hidden; }
  .referon-sidebar .rs-account .dropdown-menu { position: static !important; box-shadow: none !important; margin: 8px 0 0; }
  .referon-sidebar .rs-account .user-name { display: flex !important; }
}
@media screen and (max-width: 999px) {
  .referon-sidebar .rs-search, .referon-sidebar .rs-search .search-box { width: 100% !important; max-width: none !important; display: block !important; margin: 0 !important; }
  .referon-sidebar .rs-shelf-button { display: none !important; }
  .referon-sidebar .rs-shelf-switch .dropdown-menu {
    display: flex !important; flex-direction: column; gap: 4px; position: static !important;
    box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
  }
  .referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item {
    height: 40px; padding: 0 12px !important; border-radius: var(--ro-radius); background: var(--ro-surface) !important;
    box-shadow: var(--ro-shadow-active); font-size: 14px;
  }
  .referon-sidebar .rs-links { align-items: stretch !important; }
  .referon-sidebar .rs-links > a { justify-content: flex-start !important; width: 100% !important; }
  .referon-sidebar .rs-book-tree { padding-left: 0; margin: 0; }
}
.referon-sidebar .rs-menu { align-items: stretch !important; }
.referon-sidebar .rs-links, .referon-sidebar .rs-book-tree, .referon-sidebar .rs-shelf-switch { width: 100% !important; box-sizing: border-box; }

.tag-item[data-name="helpjuice_id"], .tag-item[data-name="helpjuice_category"] { display: none !important; }
/* side column: blocks never shrink, the column scrolls instead (fixes overlap with many blocks) */
.tri-layout-sides-content > .tri-layout-left, .tri-layout-sides-content > .tri-layout-right { flex-shrink: 0 !important; }
/* profile menu at the bottom of the sidebar always opens upwards
   (BookStack's dropdown script measures the wrong container here and sets top/max-height inline) */
@media screen and (min-width: 1000px) {
  .referon-sidebar .rs-account .dropdown-container { position: relative; }
  .referon-sidebar .rs-account .dropdown-menu { overflow-y: auto; margin: 0 !important; }
}
/* profile menu: own width, may extend beyond the sidebar edge */
@media screen and (min-width: 1000px) {
  
  .referon-sidebar .rs-account .dropdown-menu { overflow-x: hidden !important; white-space: nowrap; }
}

/* ---------- Covers (light app-style artwork) ---------- */
.rf-shelf-cover { display: block; margin: -20px -24px 0; background-position: center; background-color: var(--ro-primary-soft); border-radius: var(--ro-radius) var(--ro-radius) 0 0; }
.rf-shelf-cover-empty { display: flex; align-items: center; justify-content: center; }
.rf-shelf-cover-empty svg { width: 40px; height: 40px; fill: var(--ro-primary); opacity: .6; }
/* grid cards: show the cover, keep the light icon header only when there is none */
/* height follows the card width (covers are 1320x750), so narrow cards never crop the artwork */
.featured-image-container-wrap { height: auto !important; aspect-ratio: 1320 / 750; padding: 0 !important; position: relative; overflow: hidden; justify-content: center; }
.featured-image-container {
  display: block !important; position: absolute !important; inset: 0;
  background-size: cover !important; background-position: center !important; height: auto !important;
  min-height: 0 !important; /* core sets 140px: on narrow cards the picture grew taller than its frame and got cropped */
}
.featured-image-container:not([style*="background-image"]) { display: none !important; }
.featured-image-container[style*="background-image"] + .svg-icon { display: none !important; }
/* list view: small rounded cover thumbnail instead of the icon circle */
.entity-list-item-image.has-image {
  width: 104px !important; min-width: 104px !important; max-width: 104px !important; height: 59px !important;
  border-radius: var(--ro-radius) !important; background-size: cover !important; background-position: center !important;
}
.entity-list-item-image.has-image svg { display: none !important; }

/* ---------- Collapsible sidebar (like ReferOn) ---------- */
.referon-sidebar .rs-top { position: relative; }
.referon-sidebar .rs-collapse {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ro-radius); background: transparent; cursor: pointer; margin-left: auto;
}
.referon-sidebar .rs-collapse svg { fill: var(--ro-text-secondary); }
.referon-sidebar .rs-collapse:hover { background: var(--ro-hover); }

@media screen and (min-width: 1000px) {
  html.rs-collapsed { --ro-sidebar: 72px; }
  html.rs-collapsed #header.referon-sidebar { padding: 16px 12px; align-items: center; }
  html.rs-collapsed .referon-sidebar .rs-top { flex-direction: column; gap: 12px; }
  html.rs-collapsed .referon-sidebar .rs-logo span { display: none; }
  html.rs-collapsed .referon-sidebar .rs-collapse { margin: 0; }
  html.rs-collapsed .referon-sidebar .rs-collapse svg { transform: scaleX(-1); }
  html.rs-collapsed .referon-sidebar .rs-menu { align-items: center !important; width: 100%; }
  /* search: icon only (submits to the search page) */
  html.rs-collapsed .referon-sidebar .rs-search { width: 40px !important; }
  html.rs-collapsed .referon-sidebar .rs-search .search-box input { display: none !important; }
  html.rs-collapsed .referon-sidebar .rs-search .search-box button {
    position: static !important; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--ro-radius); background: var(--ro-surface); box-shadow: var(--ro-shadow-active);
  }
  html.rs-collapsed .referon-sidebar .rs-search .global-search-suggestions { display: none !important; }
  /* shelf switcher: icon only, menu opens to the right */
  html.rs-collapsed .referon-sidebar .rs-shelf-switch { width: 40px !important; }
  html.rs-collapsed .referon-sidebar .rs-shelf-button { width: 40px; height: 40px; padding: 0; justify-content: center; }
  html.rs-collapsed .referon-sidebar .rs-shelf-button .rs-shelf-name,
  html.rs-collapsed .referon-sidebar .rs-shelf-button svg:last-child { display: none; }
  html.rs-collapsed .referon-sidebar .rs-shelf-switch .dropdown-menu { right: auto !important; min-width: 280px !important; }
  /* links: icons with tooltips */
  html.rs-collapsed .referon-sidebar .rs-links { width: 40px !important; align-items: center; }
  html.rs-collapsed .referon-sidebar .rs-links > a {
    width: 40px !important; height: 40px; padding: 0 !important; justify-content: center; font-size: 0 !important; gap: 0;
  }
  html.rs-collapsed .referon-sidebar .rs-links > a svg { width: 20px; height: 20px; }
  html.rs-collapsed .referon-sidebar .rs-book-tree { display: none; }
  html.rs-collapsed .referon-sidebar .rs-spacer { display: block !important; flex-grow: 1; }
  /* account: avatar / icon only */
  html.rs-collapsed .referon-sidebar .rs-account { width: 48px !important; min-height: 48px; padding: 6px !important; justify-content: center; }
  html.rs-collapsed .referon-sidebar .rs-account > span,
  html.rs-collapsed .referon-sidebar .rs-account .user-name .name,
  html.rs-collapsed .referon-sidebar .rs-account .user-name > svg { display: none !important; }
  
}

/* ---------- Round 3 fixes ---------- */
/* home shelf cover keeps the artwork's own ratio (1320x750) so nothing is cropped */
.rf-shelf-cover { height: auto !important; aspect-ratio: 1320 / 750; background-size: cover; }

/* Refie (mascot) is small everywhere in articles */
.page-content img[alt^="Refie" i] {
  width: 96px !important; max-width: 96px !important; height: auto !important; max-height: none !important;
  cursor: default !important;
}
.page-content figure.image:has(> img[alt^="Refie" i]) {
  border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
  width: auto !important; display: inline-block;
}
.page-content figure.table:has(img[alt^="Refie" i]),
.page-content figure.table:has(img[alt^="Refie" i]) table {
  width: 100% !important; box-shadow: none !important; border: 0 !important; background: transparent !important; margin: 12px 0 !important;
}
.page-content figure.table:has(img[alt^="Refie" i]) colgroup { display: none; }
.page-content figure.table:has(img[alt^="Refie" i]) td {
  border: 0 !important; padding: 0 16px 0 0 !important; vertical-align: middle !important; background: transparent !important;
}
.page-content figure.table:has(img[alt^="Refie" i]) td:has(img[alt^="Refie" i]) { width: 112px !important; }
.page-content figure.table:has(img[alt^="Refie" i]) td .callout { margin: 0 !important; }

/* screenshots: never taller than the screen, click to open full size */
.page-content img:not([alt^="Refie" i]) {
  width: auto; max-width: 100%; max-height: 480px; height: auto; object-fit: contain; cursor: zoom-in;
}
.page-content figure.image { text-align: center; }
.rf-lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(23, 25, 35, .78);
  display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out;
}
.rf-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--ro-radius); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); background: #fff; }

/* collapsed sidebar: every item centred in the icon column */
@media screen and (min-width: 1000px) {
  html.rs-collapsed .referon-sidebar .rs-menu > * { margin-left: auto !important; margin-right: auto !important; align-self: center !important; }
  html.rs-collapsed .referon-sidebar .rs-search .search-box,
  html.rs-collapsed .referon-sidebar .rs-shelf-switch .dropdown-container,
  html.rs-collapsed .referon-sidebar .rs-shelf-switch { width: 40px !important; margin: 0 auto !important; display: block !important; }
  html.rs-collapsed .referon-sidebar .rs-search .search-box button { margin: 0 !important; left: auto !important; }
  html.rs-collapsed .referon-sidebar .rs-collapse { width: 40px; height: 40px; }
}

/* book tree as an accordion (no inner scroll box) */
.referon-sidebar .rs-book-tree { max-height: none !important; overflow: visible !important; }
@media screen and (min-width: 1000px) {
  #header.referon-sidebar { overflow-y: auto !important; }
  .referon-sidebar .rs-book-tree { flex: 0 0 auto !important; }
  
}
.referon-sidebar .rs-book-tree .entity-list-item.chapter { position: relative; padding-right: 36px !important; }
.referon-sidebar .rs-tree-toggle { position: absolute; right: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ro-radius); background: transparent; cursor: pointer; padding: 0; }
.referon-sidebar .rs-tree-toggle:hover { background: var(--ro-hover); }
.referon-sidebar .rs-tree-toggle svg { width: 18px; height: 18px; fill: var(--ro-text-muted); transition: transform .15s ease; }
.referon-sidebar .rs-tree-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.referon-sidebar .rs-book-tree .rs-tree-hidden { display: none !important; }
.referon-sidebar .rs-tree-more {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 6px 10px; border-radius: var(--ro-radius); font-size: 13px; font-weight: 500; color: var(--ro-primary);
}
.referon-sidebar .rs-tree-more:hover { background: var(--ro-primary-soft); }
.referon-sidebar .rs-tree-toggle { top: 5px !important; transform: none !important; }
/* sidebar blocks never shrink; if the tree is long the whole sidebar scrolls */
.referon-sidebar .rs-menu > *, .referon-sidebar .rs-top { flex-shrink: 0 !important; }
@media screen and (min-width: 1000px) {
  
}
/* BookStack pads header dropdowns by 16px — not wanted in the sidebar */
.referon-sidebar .dropdown-container { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
html.rs-collapsed .referon-sidebar .rs-shelf-switch { margin: 0 auto !important; }
/* sidebar dropdowns escape the sidebar's scroll box (otherwise they get clipped, esp. when collapsed) */
@media screen and (min-width: 1000px) {
  #header.referon-sidebar { overflow-x: hidden !important; }
  .referon-sidebar .rs-account .dropdown-menu {
    position: fixed !important;
    left: calc(var(--ro-sidebar) + 8px) !important; right: auto !important;
    top: auto !important; bottom: 16px !important;
    width: max-content !important; min-width: 240px !important; max-height: calc(100vh - 32px) !important;
  }
  .referon-sidebar .rs-shelf-switch .dropdown-menu {
    position: fixed !important;
    left: calc(var(--ro-sidebar) + 8px) !important; right: auto !important;
    top: 112px !important; bottom: auto !important;
    width: max-content !important; min-width: 280px !important;
    /* core JS caps the height from the button position (tiny when the page is scrolled): use the whole window */
    max-height: calc(100vh - 128px) !important; overflow-y: auto !important;
  }
}
@media screen and (min-width: 1000px) {
  html.rs-collapsed .referon-sidebar .rs-shelf-switch .dropdown-menu { left: calc(var(--ro-sidebar) + 8px) !important; }
}
@media screen and (min-width: 1000px) {
  html.rs-collapsed .referon-sidebar .rs-account .dropdown-container { width: 36px !important; margin: 0 auto !important; }
  html.rs-collapsed .referon-sidebar .rs-account .user-name { width: 36px !important; gap: 0 !important; justify-content: center; }
}
@media screen and (max-width: 999px) {
  body.rf-home .tri-layout-mobile-tabs { display: none !important; }
}
@media screen and (max-width: 600px) {
  .page-content img[alt^="Refie" i] { width: 56px !important; max-width: 56px !important; }
  .page-content figure.table:has(img[alt^="Refie" i]) td:has(img[alt^="Refie" i]) { width: 64px !important; }
  .page-content figure.table:has(img[alt^="Refie" i]) td { padding-right: 10px !important; }
  .page-content figure.table:has(img[alt^="Refie" i]) td .callout { font-size: 14px; padding: 10px 12px 10px 38px !important; }
  .page-content figure.table:has(img[alt^="Refie" i]) td .callout::before { left: 12px !important; top: 12px !important; }
}
.page-content figure.table:has(img[alt^="Refie" i]) { overflow: visible !important; }
.page-content figure.table:has(img[alt^="Refie" i]) table { table-layout: fixed; max-width: 100% !important; }
/* BookStack gives .user-name a -12px side margin; it shifts the avatar out of the account card */
.referon-sidebar .rs-account .user-name { margin: 0 !important; }

/* ---------- Homepage: FAQ + Release Notes cards ---------- */
.rf-section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.rf-list-card { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.rf-list-head { display: flex; align-items: center; gap: 12px; }
.rf-list-head h2 { margin: 0 !important; font-size: 18px !important; line-height: 26px !important; font-weight: 500 !important; }
.rf-list-icon { width: 36px; height: 36px; border-radius: 9999px; background: var(--ro-primary-soft); }
.rf-list-icon svg { width: 20px; height: 20px; fill: var(--ro-primary); }
.rf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ro-divider); }
.rf-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--ro-divider); font-size: 14px; }
.rf-list li:last-child { border-bottom: 0; }
.rf-list a { font-weight: 500; padding: 10px 0; }
.rf-tag { flex-shrink: 0; padding: 2px 8px; border-radius: var(--ro-radius); background: var(--ro-primary-soft); color: var(--ro-primary); font-size: 12px; font-weight: 500; }
.rf-list-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 4px; font-size: 14px; font-weight: 500; }

/* ---------- Dark mode ---------- */
:root.dark-mode {
  --ro-primary: #9DCCFA;            /* text & links on dark surfaces */
  --ro-primary-hover-text: #CEE5FC;
  --ro-primary-hover-bg: rgba(157, 204, 250, .16);
  --ro-primary-fill: #2E76CD;       /* filled buttons (white text) */
  --ro-text-faint: #718096;
  --ro-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5), 0 1px 2px 0 rgba(0, 0, 0, .4);
  --ro-shadow-active: 0 0 0 1px rgba(255, 255, 255, .08);
}
html.dark-mode .button:hover { background-color: #3A8EF7 !important; }
html.dark-mode .page-content .callout.info    { background: rgba(46, 144, 250, .14) !important; color: #B2DDFF !important; }
html.dark-mode .page-content .callout.success { background: rgba(18, 183, 106, .14) !important; color: #A6F4C5 !important; }
html.dark-mode .page-content .callout.warning { background: rgba(247, 144, 9, .14) !important;  color: #FEDF89 !important; }
html.dark-mode .page-content .callout.danger  { background: rgba(240, 68, 56, .14) !important;  color: #FECDCA !important; }
html.dark-mode .page-content figure.image, html.dark-mode .page-content pre { background: var(--ro-bg) !important; border-color: var(--ro-border) !important; }
html.dark-mode .page-content code { color: var(--ro-text); }
html.dark-mode .rf-lightbox img { background: var(--ro-surface); }
html.dark-mode .referon-sidebar .rs-links > a:hover,
html.dark-mode .referon-sidebar .rs-book-tree .entity-list-item:hover,
html.dark-mode .dropdown-menu .icon-item:hover { background: var(--ro-hover) !important; }
html.dark-mode .dropdown-menu { background: var(--ro-surface) !important; }
html.dark-mode .referon-sidebar .rs-search .search-box input,
html.dark-mode .referon-sidebar .rs-shelf-button,
html.dark-mode .rf-search { background: var(--ro-surface) !important; }
html.dark-mode a[href="#main-content"] { background: var(--ro-surface) !important; color: var(--ro-primary) !important; }
/* muted text slightly darker than ReferOn gray-500 so small captions pass 4.5:1 on white and soft blue */
:root:not(.dark-mode) { --ro-text-muted: #5F6B7F; }
/* light cover artwork is a bit softer on dark surfaces */
html.dark-mode .rf-shelf-cover, html.dark-mode .featured-image-container, html.dark-mode .entity-list-item-image.has-image { filter: brightness(.82) saturate(.95); }

/* icon lists: no grey circle behind icons (BookStack draws it with span::after) */
.icon-list-item > span:first-child::after,
.icon-list-item > span:first-child::before { display: none !important; }
.icon-list-item > span:first-child svg { fill: var(--ro-text-secondary) !important; }
.tri-layout-left-contents .icon-list-item:hover svg, .tri-layout-right-contents .icon-list-item:hover svg { fill: var(--ro-primary) !important; }
.tri-layout-right-contents hr { width: 100% !important; }
/* a tags block that only holds hidden migration tags is removed entirely */
.tri-layout-left-contents > *:has(.tag-item):not(:has(.tag-item:not([data-name^="helpjuice"]))),
.tri-layout-right-contents > *:has(.tag-item):not(:has(.tag-item:not([data-name^="helpjuice"]))) { display: none !important; }
/* sidebar: logo, search, shelves and links stay put; only the book tree scrolls (when it has to) */
@media screen and (min-width: 1000px) {
  #header.referon-sidebar { overflow: hidden !important; }
  .referon-sidebar .rs-menu { flex: 1 1 auto !important; min-height: 0 !important; }
  .referon-sidebar .rs-menu > * { flex-shrink: 0 !important; }
  .referon-sidebar .rs-menu > .rs-book-tree {
    flex: 1 1 auto !important; min-height: 80px !important;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain;
    margin-right: -8px; padding-right: 8px;
  }
  .referon-sidebar .rs-book-tree + .rs-spacer { display: none !important; }
}
/* tree pages: a bit more compact so long names wrap less */
.referon-sidebar .rs-book-tree .inset-list .entity-list-item { font-size: 13px; }

/* ---------- Mobile search & input zoom ---------- */
.referon-sidebar .rs-search-toggle {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ro-radius); background: transparent; cursor: pointer; margin-left: auto;
}
.referon-sidebar .rs-search-toggle svg { width: 22px; height: 22px; fill: var(--ro-text-secondary); }
.referon-sidebar .rs-search-toggle[aria-expanded="true"] { background: var(--ro-primary-soft); }
.referon-sidebar .rs-search-toggle[aria-expanded="true"] svg { fill: var(--ro-primary); }
@media screen and (max-width: 999px) {
  .referon-sidebar .rs-top .mobile-menu-toggle { margin-left: 0; }
  #header.referon-sidebar > .rs-search { display: none; width: 100%; padding: 10px 0 2px; }
  #header.referon-sidebar.rs-search-open > .rs-search { display: block; }
  .referon-sidebar .rs-search .search-box input { height: 44px !important; }
  .referon-sidebar .global-search-suggestions { min-width: 0 !important; max-width: none; }
  /* iOS Safari zooms into inputs smaller than 16px: keep every field at 16px on phones */
  input, select, textarea, .referon-sidebar .rs-search .search-box input, .rf-search input { font-size: 16px !important; }
}
@media screen and (min-width: 1000px) {
  .referon-sidebar .rs-search-toggle { display: none !important; }
}
@media screen and (max-width: 999px) {
  .referon-sidebar .global-search-suggestions { left: 0 !important; right: 0 !important; width: auto !important; margin: 4px 0 0 !important; }
  .referon-sidebar .rs-search .search-box button {
    width: 40px !important; height: 44px !important; left: 0 !important; top: 0 !important;
    display: flex !important; align-items: center; justify-content: center; padding: 0 !important;
  }
  .referon-sidebar .rs-search .search-box input { padding-left: 40px !important; }
}

/* ---------- Visibility badges (signed-in users only) ---------- */
.rf-vis {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  height: 22px; padding: 0 8px; border-radius: 9999px; white-space: nowrap;
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0;
}
.rf-vis svg { flex-shrink: 0; }
.rf-vis-public   { background: #ECFDF3; color: #027A48; } .rf-vis-public svg   { fill: #039855 !important; }
.rf-vis-internal { background: #FFFAEB; color: #B54708; } .rf-vis-internal svg { fill: #DC6803 !important; }
.rf-vis-admin    { background: #FEF3F2; color: #B42318; } .rf-vis-admin svg    { fill: #D92D20 !important; }
html.dark-mode .rf-vis-public   { background: rgba(18, 183, 106, .16); color: #A6F4C5; }
html.dark-mode .rf-vis-internal { background: rgba(247, 144, 9, .16);  color: #FEDF89; }
html.dark-mode .rf-vis-admin    { background: rgba(240, 68, 56, .16);  color: #FECDCA; }
/* list rows: compact pill next to the name */
.entity-list-item-name .rf-vis, .rf-shelf-books .rf-vis { margin-left: 6px; height: 20px; padding: 0 7px; font-size: 11px; }
.rf-shelf-books li > span:first-child { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; }
/* grid cards: pill on the cover, top-right */
.featured-image-container-wrap .rf-vis { position: absolute; z-index: 2; }
/* page header: pill before the breadcrumbs */
.rf-crumbs-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rf-crumbs-row .breadcrumbs { flex: 1 1 auto; }
/* sidebar tree: icon only, and only for restricted items, to keep the tree calm */
.referon-sidebar .rs-book-tree .rf-vis-public { display: none; }
.referon-sidebar .rs-book-tree .rf-vis { padding: 0 4px; height: 18px; margin-left: 4px; }
.referon-sidebar .rs-book-tree .rf-vis .rf-vis-label { display: none; }
.rf-vis-compact .rf-vis-label { display: inline; }
/* badges, refined: small icon in lists; on covers a frosted pill with a coloured dot */
.rf-vis svg { width: 12px !important; height: 12px !important; position: static !important; }
.featured-image-container-wrap .rf-vis {
  top: 10px; right: 10px; height: 22px; padding: 0 9px 0 8px; gap: 6px;
  background: rgba(255, 255, 255, .88) !important; color: #2D3748 !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12); font-size: 11px; font-weight: 500;
}
.featured-image-container-wrap .rf-vis svg { display: none !important; }
.featured-image-container-wrap .rf-vis::before {
  content: ""; width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0;
}
.featured-image-container-wrap .rf-vis-public::before   { background: #12B76A; }
.featured-image-container-wrap .rf-vis-internal::before { background: #F79009; }
.featured-image-container-wrap .rf-vis-admin::before    { background: #F04438; }
html.dark-mode .featured-image-container-wrap .rf-vis { background: rgba(28, 31, 39, .85) !important; color: #E2E8F0 !important; }

/* ---------- Search help: quick-insert chips + syntax ---------- */
.rf-search-help { margin: -8px 0 24px; display: flex; flex-direction: column; gap: 8px; }
.content-wrap .rf-search-help { margin: 8px 0 20px; }
.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chip {
  height: 30px; padding: 0 12px; border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--ro-surface); color: var(--ro-primary); font: inherit; font-size: 13px; font-weight: 500;
  box-shadow: var(--ro-shadow-active);
}
.content-wrap .rf-chip { background: var(--ro-primary-soft); box-shadow: none; }
.rf-chip:hover { background: var(--ro-primary-hover-bg); color: var(--ro-primary-hover-text); }
.rf-search-syntax summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ro-text-muted); width: max-content; }
.rf-search-syntax[open] summary { margin-bottom: 8px; }
.rf-search-syntax table { border-collapse: collapse; font-size: 13px; background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow); overflow: hidden; }
.rf-search-syntax td { padding: 7px 12px; border-bottom: 1px solid var(--ro-divider); color: var(--ro-text); vertical-align: top; }
.rf-search-syntax tr:last-child td { border-bottom: 0; }
.rf-search-syntax code { background: var(--ro-primary-soft); color: var(--ro-primary); border-radius: 4px; padding: 1px 6px; white-space: nowrap; font-size: 12px; }
.rf-search-syntax p { font-size: 13px; color: var(--ro-text-muted); margin: 8px 0 0; }
@media screen and (max-width: 600px) {
  .rf-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .rf-chip { flex-shrink: 0; height: 36px; }
  .rf-search-syntax td code { white-space: normal; word-break: break-all; }
}

/* ---------- Mobile: one search, sticky header, no Info/Content tabs ---------- */
@media screen and (max-width: 999px) {
  /* the header search opens only from the search icon */
  #header.referon-sidebar:not(.rs-search-open) > .rs-search { display: none !important; }
  /* header stays on top while scrolling; an open menu scrolls inside it */
  #header.referon-sidebar {
    position: sticky !important; top: 0; z-index: 30;
    background: var(--ro-bg) !important;
  }
  /* content first, details/actions below it: the Info/Content switch is not needed */
  .tri-layout-mobile-tabs { display: none !important; }
  .tri-layout-container { display: flex !important; flex-direction: column; gap: 16px; }
  .tri-layout-container .tri-layout-middle { display: block !important; order: 1; }
  .tri-layout-container .tri-layout-sides { display: block !important; order: 2; }
  .tri-layout-container .tri-layout-left, .tri-layout-container .tri-layout-right { display: block !important; }
  /* core hides the panel contents below 1000px until the Info tab is tapped; show them (actions, details) */
  .tri-layout-container .tri-layout-left > *:not(:empty), .tri-layout-container .tri-layout-right > *:not(:empty) { display: block !important; pointer-events: auto !important; }
  .tri-layout-container .tri-layout-sides, .tri-layout-container .tri-layout-sides-content { padding-left: 0 !important; padding-right: 0 !important; }
  body.rf-home .tri-layout-container .tri-layout-sides { display: none !important; } /* same as desktop */
  /* the activity feed is long and only noise below the content on a phone */
  .tri-layout-sides .tri-layout-left-contents > *:has(> .activity-list), .tri-layout-sides .tri-layout-right-contents > *:has(> .activity-list) { display: none !important; }
  .tri-layout-sides .tri-layout-left-contents, .tri-layout-sides .tri-layout-right-contents { padding: 0 !important; }
  /* the in-page table of contents is redundant at the bottom of a long article */
  .tri-layout-sides nav#page-navigation, .tri-layout-sides [id="page-navigation"] { display: none !important; }
}

/* Mobile menu: a panel that drops over the page instead of pushing it down */
@media screen and (max-width: 999px) {
  #header.referon-sidebar .rs-menu.show {
    position: absolute !important; top: 100%; left: 0; right: 0; width: auto !important;
    max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--ro-surface) !important; border-top: 1px solid var(--ro-divider) !important;
    box-shadow: 0 16px 32px rgba(17, 24, 39, .18) !important;
    padding: 12px 16px 16px !important; gap: 0 !important; z-index: 31;
  }
  body:has(#header .rs-menu.show) #content { opacity: .35; pointer-events: none; transition: opacity .15s; }
  /* shelf switch: a quiet list, not big cards */
  .referon-sidebar .rs-menu .rs-shelf-switch .dropdown-menu { gap: 2px !important; }
  .referon-sidebar .rs-menu .rs-shelf-switch .dropdown-menu .icon-item { background: transparent !important; box-shadow: none !important; font-size: 15px; }
  .referon-sidebar .rs-menu .rs-shelf-switch .dropdown-menu .icon-item:is(.active, [aria-current]),
  .referon-sidebar .rs-menu .rs-shelf-switch .dropdown-menu .icon-item:hover {
    background: var(--ro-nav-active, var(--ro-primary-soft)) !important; color: var(--ro-primary) !important;
  }
  /* separate the groups with thin lines */
  .referon-sidebar .rs-menu .rs-links { border-top: 1px solid var(--ro-divider); margin-top: 8px !important; padding-top: 8px !important; gap: 2px !important; }
  .referon-sidebar .rs-menu .rs-links > a { height: 44px !important; }
  .referon-sidebar .rs-menu .rs-spacer { display: none !important; }
  .referon-sidebar .rs-menu .rs-account { margin-top: 12px !important; }
}

/* Search chips under the sidebar search (one search for the whole site) */
.rs-search .rf-search-help-compact { display: none; margin: 8px 0 0; }
.rs-search.rs-search-active .rf-search-help-compact { display: flex; }
.rs-search .rf-search-help-compact .rf-chips { gap: 4px; }
.rs-search .rf-search-help-compact .rf-chip {
  height: 26px; padding: 0 10px; font-size: 12px; background: var(--ro-primary-soft); box-shadow: none;
}
@media screen and (min-width: 1000px) {
  html.rs-collapsed .rs-search .rf-search-help-compact { display: none !important; }
}
@media screen and (max-width: 999px) {
  .rs-search .rf-search-help-compact .rf-chips { flex-wrap: wrap; overflow: visible; }
  .rs-search .rf-search-help-compact .rf-chip { height: 32px; font-size: 13px; }
}

/* Live search suggestions open BELOW the sidebar field (core puts the card under the input, which our z-index hid) */
.referon-sidebar .rs-search .search-box .global-search-suggestions {
  top: calc(100% + 6px) !important; left: 0 !important; padding-top: 8px !important;
  margin: 0 !important; transform: none !important;
  border-radius: var(--ro-radius); box-shadow: 0 12px 32px rgba(17, 24, 39, .16) !important;
}
.referon-sidebar .rs-search .search-box.search-active input { position: relative; z-index: 1001; }
/* desktop: the sidebar clips overflow, so the suggestions card floats over the page instead */
@media screen and (min-width: 1000px) {
  .referon-sidebar .rs-search .search-box .global-search-suggestions {
    position: fixed !important; top: 112px !important; left: 16px !important;
    margin: 0 !important; transform: none !important; opacity: 1 !important;
    width: 440px !important; min-width: 0 !important; max-height: calc(100vh - 136px); overflow-y: auto; overflow-x: hidden;
  }
}
.referon-sidebar .global-search-suggestions .entity-list-item { padding: 10px 12px !important; margin: 0 !important; }
.referon-sidebar .global-search-suggestions .entity-list-item > .icon { flex-shrink: 0; }
.referon-sidebar .global-search-suggestions .entity-list-item .entity-item-snippet p,
.referon-sidebar .global-search-suggestions .entity-list-item .entity-list-item-children { display: none; }
/* keep "Book › Chapter" so equal titles from the admin and affiliate books can be told apart */
.referon-sidebar .global-search-suggestions .entity-list-item .entity-item-snippet {
  display: flex !important; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; line-height: 16px;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.referon-sidebar .global-search-suggestions .entity-item-snippet .text-book { font-weight: 600; flex-shrink: 0; }
.referon-sidebar .global-search-suggestions .entity-item-snippet .text-chapter { overflow: hidden; text-overflow: ellipsis; }
.referon-sidebar .global-search-suggestions .entity-item-snippet svg { width: 12px; height: 12px; }
.referon-sidebar .global-search-suggestions .entity-list-item .entity-list-item-name { min-width: 0; }
.referon-sidebar .global-search-suggestions .entity-list-item .entity-item-crumbs,
.referon-sidebar .global-search-suggestions .entity-list-item .breadcrumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.referon-sidebar .global-search-suggestions > div, .referon-sidebar .global-search-suggestions .px-m { padding-left: 4px !important; padding-right: 4px !important; }
.referon-sidebar .global-search-suggestions a.global-search-view-all, .referon-sidebar .global-search-suggestions [refs*="view-all"] { display: block; padding: 10px 12px !important; }
.referon-sidebar .global-search-suggestions .entity-list-item { max-width: 100%; box-sizing: border-box; }

/* Homepage intro: content of the page tagged kb_home (edited in BookStack) */
.rf-home-intro { padding: 28px 32px !important; margin: 0 0 24px !important; }
.rf-home-intro .page-content { max-width: none; padding: 0; }
.rf-home-intro .page-content > :first-child { margin-top: 0; }
.rf-home-intro .page-content h2 { font-size: 28px; line-height: 36px; margin: 0 0 8px; border: 0; }
.rf-home-intro .page-content h2 + p { font-size: 16px; margin: 0 0 20px; max-width: 720px; }
.rf-home-intro .page-content h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 10px; }
/* a bulleted list of links becomes a grid of tiles */
.rf-home-intro .page-content ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rf-home-intro .page-content ul li { margin: 0; padding: 0; }
.rf-home-intro .page-content ul li::before { display: none; }
.rf-home-intro .page-content ul li a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--ro-radius); font-weight: 500; text-decoration: none; }
.rf-home-intro .page-content ul li a::after { content: "→"; margin-left: auto; }

.rf-home-intro-edit { position: absolute; top: 16px; right: 16px; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--ro-radius); font-size: 13px; font-weight: 500; }
.rf-home-intro-edit svg { width: 16px; height: 16px; fill: currentColor; }
@media screen and (max-width: 600px) {
  .rf-home-intro { padding: 20px 16px !important; }
  .rf-home-intro .page-content h2 { font-size: 22px; line-height: 30px; padding-right: 0; }
  .rf-home-intro-edit span { display: none; }
  .rf-home-intro-edit { padding: 0 8px; }
  
}
.rf-home .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Search page: no frame around results, quiet results, ReferOn-style advanced search ---------- */
.rf-search-page .content-wrap .book-contents { box-shadow: none !important; background: transparent !important; padding: 0 !important; }
.rf-search-page .content-wrap .entity-list-item .entity-item-tags { display: none !important; }
.rf-search-page .content-wrap .entity-list-item { border-radius: var(--ro-radius); }
.rf-adv-search {
  background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow);
  padding: 20px; position: sticky; top: 24px;
}
.rf-adv-search h5 { font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ro-text); margin: 0 0 4px; }
.rf-adv-search h6 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ro-text-muted); margin: 18px 0 8px;
}
.rf-adv-search input[type="text"], .rf-adv-search input[type="date"] {
  width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--ro-divider) !important; border-radius: var(--ro-radius) !important;
  background: var(--ro-bg) !important; color: var(--ro-text); font-size: 14px; box-shadow: none !important;
}
.rf-adv-search input:focus { outline: 2px solid var(--ro-primary); outline-offset: -1px; }
.rf-adv-search .form-group { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rf-adv-search .form-group br { display: none; }
.rf-adv-search label.checkbox {
  display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important;
  height: 32px; padding: 0 12px; border-radius: 9999px; cursor: pointer; font-size: 13px; font-weight: 500;
  background: var(--ro-bg); color: var(--ro-text-secondary) !important; border: 1px solid var(--ro-divider);
}
.rf-adv-search label.checkbox:has(input:checked) { background: var(--ro-primary-soft); color: var(--ro-primary) !important; border-color: transparent; }
.rf-adv-search label.checkbox input { accent-color: var(--ro-primary); margin: 0; width: 14px; height: 14px; }
.rf-adv-search .text-button:not(.text-neg) {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  border: 1px dashed var(--ro-divider); border-radius: var(--ro-radius); color: var(--ro-primary) !important; font-size: 13px; font-weight: 500;
}
.rf-adv-search .text-button:not(.text-neg):hover { background: var(--ro-primary-soft); border-style: solid; border-color: transparent; }
.rf-adv-search .text-button svg { width: 16px; height: 16px; fill: currentColor; }
.rf-adv-search .form-table { width: 100%; margin: 0 0 8px !important; box-shadow: none !important; background: transparent !important; }
.rf-adv-search .form-table td { border: 0 !important; padding: 2px 0 !important; font-size: 13px; color: var(--ro-text-secondary); }
.rf-adv-search .form-table td[width="80"] { width: 40px; }
.rf-adv-search button.button, .rf-adv-search button[type="submit"] {
  width: 100%; height: 40px; margin: 20px 0 0 !important; border-radius: var(--ro-radius);
  background: var(--ro-primary-fill, var(--ro-primary)) !important; color: #fff !important; border: 0; font-weight: 500;
}
@media screen and (max-width: 999px) {
  .rf-adv-search { position: static; }
}

/* Homepage: topic tiles and video tutorials */
.rf-block-title { font-size: 13px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ro-text-muted); margin: 0 0 12px !important; }
.rf-topics, .rf-videos { margin: 0 0 28px; }
.rf-topic-grid { display: grid; gap: 12px; }
.rf-topic {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--ro-radius);
  background: var(--ro-surface); box-shadow: var(--ro-shadow); color: var(--ro-text) !important; text-decoration: none !important;
  transition: box-shadow .15s, transform .15s;
}
.rf-topic:hover { box-shadow: var(--ro-shadow-active, var(--ro-shadow)); transform: translateY(-1px); }
.rf-topic-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--ro-primary-soft);
}
.rf-topic-icon svg { width: 22px; height: 22px; fill: var(--ro-primary); margin: 0 !important; top: 0 !important; }
.rf-topic-text { display: flex; flex-direction: column; min-width: 0; }
.rf-topic-name { font-weight: 600; font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; }
.rf-topic .rf-muted { font-size: 12px; }
.rf-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.rf-video {
  display: flex; flex-direction: column; gap: 4px; padding: 0 0 14px; border-radius: var(--ro-radius); overflow: hidden;
  background: var(--ro-surface); box-shadow: var(--ro-shadow); color: var(--ro-text) !important; text-decoration: none !important;
}
.rf-video:hover { box-shadow: var(--ro-shadow-active, var(--ro-shadow)); }
.rf-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0F2A4D; margin-bottom: 8px; }
.rf-video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rf-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 42, 77, .25); }
.rf-video-play svg { width: 56px; height: 56px; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); margin: 0 !important; top: 0 !important; }
.rf-video:hover .rf-video-play { background: rgba(15, 42, 77, .1); }
.rf-video-name { padding: 0 16px; font-weight: 600; font-size: 15px; line-height: 20px; }
.rf-video .rf-muted { padding: 0 16px; font-size: 12px; }
@media screen and (max-width: 600px) {
  .rf-topic-grid { gap: 8px; }
  .rf-topic { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .rf-topic-name { white-space: normal; }
  .rf-video-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .rf-video { scroll-snap-align: start; }
}

/* Book page: chapters as cards with a coloured accent per section (chapters/parts/list-item) */
.content-wrap .book-contents { box-shadow: none !important; background: transparent !important; padding: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.book-contents > .entity-list-item, .book-contents .rf-chapter-card > .entity-list-item, .book-contents .chapter-expansion { border: 0 !important; }
.rf-chapter-card {
  --rf-accent: var(--ro-primary);
  position: relative; border-radius: var(--ro-radius); background: var(--ro-surface);
  box-shadow: inset 4px 0 0 var(--rf-accent), 0 0 0 1px var(--ro-divider); overflow: hidden;
}
.rf-chapter-card:hover { box-shadow: inset 4px 0 0 var(--rf-accent), 0 0 0 1px color-mix(in srgb, var(--rf-accent) 40%, transparent), var(--ro-shadow); }
.rf-chapter-card > .entity-list-item { padding: 14px 16px 6px 20px !important; margin: 0 !important; background: transparent !important; }
.rf-chapter-card > .entity-list-item:not(.has-children) { padding-bottom: 14px !important; }
.rf-chapter-card > .entity-list-item > .icon { background: color-mix(in srgb, var(--rf-accent) 12%, transparent) !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rf-chapter-card > .entity-list-item > .icon svg { fill: var(--rf-accent) !important; margin: 0 !important; top: 0 !important; }
.rf-chapter-card .entity-list-item-name { font-size: 16px; font-weight: 600; }
.rf-chapter-card .entity-item-snippet p:empty { display: none; }
.rf-chapter-card .chapter-expansion { padding: 0 16px 10px 20px !important; margin: 0 !important; background: transparent !important; }
.rf-chapter-card .chapter-expansion > .icon { visibility: hidden; width: 40px; flex-shrink: 0; }
.rf-chapter-card .chapter-contents-toggle { align-items: center; gap: 4px; height: 28px; padding: 0 10px !important; border-radius: 9999px; background: color-mix(in srgb, var(--rf-accent) 10%, transparent); color: var(--rf-accent) !important; font-size: 13px; font-weight: 500; }
.rf-chapter-card .chapter-contents-toggle svg { fill: currentColor; }
.rf-chapter-card .chapter-contents-list { margin-top: 6px; }
.rf-chapter-card .entity-list-item-children { border: 0 !important; padding: 0 !important; }
.rf-chapter-card .entity-list-item-children .entity-list-item { border: 0 !important; border-radius: var(--ro-radius); padding: 8px 10px !important; }
.rf-chapter-card .entity-list-item-children .entity-list-item:hover { background: color-mix(in srgb, var(--rf-accent) 6%, transparent) !important; }
.book-contents > .page.entity-list-item { border-radius: var(--ro-radius); background: var(--ro-surface); box-shadow: 0 0 0 1px var(--ro-divider); padding: 14px 16px !important; }
@media screen and (max-width: 600px) {
  .rf-chapter-card > .entity-list-item { padding: 12px 12px 4px 16px !important; }
  .rf-chapter-card .chapter-expansion { padding: 0 12px 10px 16px !important; }
  .rf-chapter-card .chapter-expansion > .icon { display: none; }
}

/* Advanced search toggle: plain heading on desktop, collapsible panel on top of results on phones */
.rf-adv-toggle { all: unset; display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; }
.rf-adv-title { font-size: 16px; font-weight: 600; color: var(--ro-text); }
.rf-adv-toggle svg { width: 20px; height: 20px; fill: var(--ro-text-muted); transition: transform .15s; }
@media screen and (min-width: 1000px) {
  .rf-adv-toggle { pointer-events: none; margin-bottom: 4px; }
  .rf-adv-toggle svg { display: none; }
}
@media screen and (max-width: 999px) {
  .rf-search-page .grid.right-focus { display: flex !important; flex-direction: column; gap: 16px !important; }
  .rf-search-page .grid.right-focus > div:first-child { order: -1; }
  .rf-adv-search { padding: 0 !important; }
  .rf-adv-toggle { cursor: pointer; padding: 14px 16px; min-height: 48px; }
  .rf-adv-search > form { display: none; padding: 0 16px 16px; }
  .rf-adv-search.rf-adv-open > form { display: block; }
  .rf-adv-search.rf-adv-open .rf-adv-toggle svg { transform: rotate(180deg); }
  .rf-search-page .container.mt-xl { margin-top: 16px !important; padding: 0 16px; }
}
.referon-sidebar .global-search-suggestions .entity-list-item > .icon { margin-left: 0 !important; left: 0 !important; }
/* Start-here tiles: equal height, 3 per row on desktop, same look as on phones */
.rf-home-intro .page-content ul { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.rf-home-intro .page-content ul li { display: flex; }
.rf-home-intro .page-content ul li a { flex: 1; min-height: 56px; box-sizing: border-box; line-height: 20px; }
@media screen and (max-width: 1200px) { .rf-home-intro .page-content ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 600px) { .rf-home-intro .page-content ul { grid-template-columns: 1fr; } }
.rf-topic-name { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Inside a book (desktop): the book tree gets the sidebar height, main links shrink to a row of icons */
@media screen and (min-width: 1000px) {
  html:not(.rs-collapsed) .referon-sidebar .rs-menu:has(.rs-book-tree) { gap: 12px; }
  html:not(.rs-collapsed) .referon-sidebar .rs-menu:has(.rs-book-tree) .rs-links {
    flex-direction: row !important; flex-wrap: nowrap; gap: 4px !important; align-items: center !important;
  }
  html:not(.rs-collapsed) .referon-sidebar .rs-menu:has(.rs-book-tree) .rs-links > a {
    flex: 1 1 0; width: auto !important; height: 40px !important; padding: 0 !important; justify-content: center !important;
    font-size: 0 !important; gap: 0 !important; border-radius: var(--ro-radius);
  }
  html:not(.rs-collapsed) .referon-sidebar .rs-menu:has(.rs-book-tree) .rs-links > a svg { margin: 0 !important; }
  html:not(.rs-collapsed) .referon-sidebar .rs-menu:has(.rs-book-tree) .rs-book-tree {
    flex: 1 1 auto !important; min-height: 0; max-height: none !important; padding-top: 12px;
  }
  .referon-sidebar .rs-book-tree h5 { font-size: 12px !important; text-transform: uppercase; letter-spacing: .04em; }
  .referon-sidebar .rs-book-tree > * > .entity-list-item, .referon-sidebar .rs-book-tree .book-tree > ul > li > .entity-list-item { padding-top: 7px !important; padding-bottom: 7px !important; }
}
/* tree: pages under a chapter without icons and with less indent, so titles don't wrap into 3 lines */
.referon-sidebar .rs-book-tree .inset-list .entity-list-item .icon { display: none !important; }
.referon-sidebar .rs-book-tree .inset-list { margin-left: 12px !important; padding-left: 8px !important; }
.referon-sidebar .rs-book-tree .inset-list .entity-list-item { padding: 6px 8px !important; line-height: 18px; }
.referon-sidebar .rs-book-tree .inset-list .entity-list-item .entity-list-item-name { font-size: 13px !important; }

/* Phones: account menu collapses; search opens as a full-screen sheet with filters */
.rf-adv-link { display: none; }
@media screen and (max-width: 999px) {
  .referon-sidebar .rs-account .dropdown-menu { display: none !important; }
  .referon-sidebar .rs-account.rf-open .dropdown-menu { display: block !important; }
  .referon-sidebar .rs-account .user-name svg { transition: transform .15s; }
  .referon-sidebar .rs-account.rf-open .user-name > svg:last-child { transform: rotate(180deg); }

  #header.referon-sidebar.rs-search-open > .rs-search {
    position: fixed !important; left: 0; right: 0; top: 65px; bottom: 0; z-index: 29;
    width: auto !important; max-width: none !important; box-sizing: border-box;
    background: var(--ro-bg); padding: 16px !important; overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid var(--ro-divider);
  }
  body:has(#header.rs-search-open) { overflow: hidden; }
  #header.rs-search-open .rs-search .rf-search-help-compact { display: flex !important; margin-top: 16px; gap: 16px; }
  #header.rs-search-open .rs-search .rf-search-help-compact .rf-chip { height: 36px; font-size: 14px; }
  #header.rs-search-open .rf-adv-link {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: var(--ro-radius);
    background: var(--ro-surface); box-shadow: var(--ro-shadow); color: var(--ro-primary) !important; font-weight: 500; text-decoration: none;
  }
  #header.rs-search-open .rf-adv-link svg { width: 18px; height: 18px; fill: currentColor; }
  #header.rs-search-open .global-search-suggestions { position: absolute !important; z-index: 2; }
}

/* Homepage blocks: collapsible (details/summary) with a chevron */
.rf-block { margin: 0 0 28px; }
.rf-block > summary.rf-block-title {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; width: max-content; user-select: none;
}
.rf-block > summary::-webkit-details-marker { display: none; }
.rf-block > summary::after {
  content: ""; width: 16px; height: 16px; background: currentColor; transition: transform .15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rf-block:not([open]) > summary::after { transform: rotate(-90deg); }
.rf-block > summary:hover { color: var(--ro-primary); }
.rf-block:not([open]) { margin-bottom: 16px; }
.rf-topics, .rf-videos { margin-bottom: 28px; }

/* Collapsed sidebar: search, shelf switch and links look and behave the same (plain 40px icon buttons) */
@media screen and (min-width: 1000px) {
  html.rs-collapsed .referon-sidebar .rs-search .search-box,
  html.rs-collapsed .referon-sidebar .rs-shelf-button {
    background: transparent !important; box-shadow: none !important; border: 0 !important;
  }
  html.rs-collapsed .referon-sidebar .rs-search .search-box button,
  html.rs-collapsed .referon-sidebar .rs-shelf-button,
  html.rs-collapsed .referon-sidebar .rs-links > a {
    width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: var(--ro-radius) !important;
    display: flex !important; align-items: center; justify-content: center; background: transparent !important; box-shadow: none !important;
    position: static !important; transform: none !important;
  }
  html.rs-collapsed .referon-sidebar .rs-search .search-box button svg,
  html.rs-collapsed .referon-sidebar .rs-shelf-button svg,
  html.rs-collapsed .referon-sidebar .rs-links > a svg {
    width: 22px !important; height: 22px !important; fill: var(--ro-text-secondary) !important; margin: 0 !important; top: 0 !important;
  }
  html.rs-collapsed .referon-sidebar .rs-search .search-box button:hover,
  html.rs-collapsed .referon-sidebar .rs-shelf-button:hover,
  html.rs-collapsed .referon-sidebar .rs-links > a:hover { background: var(--ro-hover) !important; }
  html.rs-collapsed .referon-sidebar .rs-links > a.active { background: var(--ro-nav-active, var(--ro-primary-soft)) !important; }
  html.rs-collapsed .referon-sidebar .rs-links > a.active svg { fill: var(--ro-primary) !important; }
}

/* Homepage intro as a ReferOn-blue hero (palette: #3A8EF7 / #2E76CD / #235EA5 / #174376) */
.rf-home-intro {
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.16) 0 60px, transparent 61px),
    radial-gradient(circle at 92% 18%, transparent 0 110px, rgba(255,255,255,.10) 111px 112px, transparent 113px),
    radial-gradient(circle at 92% 18%, transparent 0 170px, rgba(255,255,255,.08) 171px 172px, transparent 173px),
    linear-gradient(135deg, #2E76CD 0%, #235EA5 55%, #174376 100%) !important;
  box-shadow: 0 8px 24px rgba(23, 67, 118, .25) !important; border: 0 !important; overflow: hidden;
}
.rf-home-intro .page-content, .rf-home-intro .page-content p, .rf-home-intro .page-content h2 { color: #fff !important; }
.rf-home-intro .page-content h2 + p { color: rgba(255,255,255,.82) !important; }
.rf-home-intro .page-content h3 { color: rgba(255,255,255,.7) !important; }
.rf-home-intro .page-content ul li a {
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(4px);
}
.rf-home-intro .page-content ul li a:hover { background: #fff !important; color: #235EA5 !important; }
.rf-home-intro .page-content ul li a::after { opacity: .8; }
.rf-home-intro .page-content a:not(li a) { color: #fff !important; text-decoration: underline; }
.rf-home-intro-edit { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.rf-home-intro-edit:hover { background: #fff !important; color: #235EA5 !important; }

/* ---------- Smooth opening: menus, dropdowns, search sheet, collapsible blocks ---------- */
@keyframes rf-drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rf-sheet-in { from { opacity: 0; transform: translateY(-12px) scale(.985); } to { opacity: 1; transform: none; } }
.dropdown-menu { animation: rf-drop-in .18s cubic-bezier(.2, .8, .2, 1); transform-origin: top; }
.rf-block[open] > :not(summary) { animation: rf-drop-in .22s cubic-bezier(.2, .8, .2, 1); }
.rf-search-syntax[open] > :not(summary) { animation: rf-drop-in .2s ease-out; }
.referon-sidebar .global-search-suggestions { animation: rf-fade-in .15s ease-out; }
.rf-search-help-compact { animation: rf-drop-in .18s ease-out; }
.rs-book-tree .inset-list { animation: rf-drop-in .18s ease-out; }
@media screen and (max-width: 999px) {
  #header.referon-sidebar .rs-menu.show { animation: rf-sheet-in .24s cubic-bezier(.2, .8, .2, 1); transform-origin: top center; }
  #header.referon-sidebar.rs-search-open > .rs-search { animation: rf-sheet-in .24s cubic-bezier(.2, .8, .2, 1); }
  .rf-adv-search.rf-adv-open > form { animation: rf-drop-in .22s cubic-bezier(.2, .8, .2, 1); }
  body #content { transition: opacity .2s ease; }
  .rs-search-toggle, .mobile-menu-toggle { transition: background-color .15s, transform .1s; }
  .rs-search-toggle:active, .mobile-menu-toggle:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu, .rf-block[open] > *, .rf-search-help-compact, .rs-book-tree .inset-list,
  #header.referon-sidebar .rs-menu.show, #header.referon-sidebar.rs-search-open > .rs-search,
  .rf-adv-search.rf-adv-open > form, .referon-sidebar .global-search-suggestions { animation: none !important; }
}

/* FAQ / Release Notes card icons: centred in their circle (core svg-icon adds an offset) */
.rf-list-icon { display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
.rf-list-icon svg, .rf-list-icon .svg-icon { margin: 0 !important; top: 0 !important; bottom: 0 !important; position: static !important; display: block; }

/* Smooth sidebar collapse / expand (desktop): animatable width variable + content cross-fade */
@property --ro-sidebar { syntax: '<length>'; inherits: true; initial-value: 240px; }
@media screen and (min-width: 1000px) {
  html.rs-animating { transition: --ro-sidebar .3s cubic-bezier(.4, 0, .2, 1); }
  html.rs-animating #header.referon-sidebar > *,
  html.rs-animating #header.referon-sidebar .rs-menu > * { transition: opacity .13s ease; }
  html.rs-fading #header.referon-sidebar > *:not(.rs-top),
  html.rs-fading #header.referon-sidebar .rs-top > *:not(.rs-collapse) { opacity: 0; }
  html.rs-animating #header.referon-sidebar { overflow: hidden; }
  html.rs-animating .rs-collapse svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
}

/* Collapsed sidebar: icons the same size as in the full sidebar (18px); shelf switch shows the language code */
.rs-shelf-code { display: none; }
@media screen and (min-width: 1000px) {
  html.rs-collapsed .referon-sidebar .rs-search .search-box button svg,
  html.rs-collapsed .referon-sidebar .rs-shelf-button svg,
  html.rs-collapsed .referon-sidebar .rs-links > a svg,
  html.rs-collapsed .referon-sidebar .rs-collapse svg { width: 18px !important; height: 18px !important; }
  html.rs-collapsed .referon-sidebar .rs-shelf-button > svg { display: none !important; }
  html.rs-collapsed .referon-sidebar .rs-shelf-code {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 22px; border-radius: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ro-primary); background: var(--ro-primary-soft);
  }
  html:not(.rs-collapsed) .referon-sidebar .rs-menu:has(.rs-book-tree) .rs-links > a svg { width: 18px !important; height: 18px !important; }
}

/* Knowledge base edition switch: language-code badge + "Knowledge base / English" */
.referon-sidebar .rs-shelf-code {
  display: flex !important; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ro-primary); background: var(--ro-primary-soft);
}
.referon-sidebar .rs-shelf-button .rs-shelf-name { display: flex; flex-direction: column; line-height: 18px; text-align: left; font-weight: 500; }
.referon-sidebar .rs-shelf-button .rs-shelf-name small { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ro-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.referon-sidebar .rs-shelf-button { min-height: 48px; height: auto !important; }
.referon-sidebar .rs-shelf-switch .rs-shelf-menu-title {
  padding: 8px 12px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ro-text-muted);
}
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item { gap: 10px !important; align-items: center !important; }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item strong { font-weight: 500; font-size: 14px; color: var(--ro-text); }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item small { font-size: 12px; color: var(--ro-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item > svg { width: 18px; height: 18px; fill: var(--ro-primary); margin: 0 !important; }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item.active { background: var(--ro-nav-active, var(--ro-primary-soft)) !important; }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item.active .rs-shelf-code { background: var(--ro-primary-fill, var(--ro-primary)); color: #fff; }
@media screen and (max-width: 999px) {
  .referon-sidebar .rs-menu .rs-shelf-switch .dropdown-menu .icon-item { height: auto !important; min-height: 48px; padding: 6px 12px !important; }
}
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; grid-template-columns: none !important; padding: 8px 12px !important; }

/* The edition switch replaces the "Shelves" link; search lives in the field/icon above, so no "Search" link either */
.referon-sidebar .rs-links > a[data-shortcut="shelves_view"],
.referon-sidebar .rs-links > a[href$="/search"] { display: none !important; }
.referon-sidebar .rs-shelf-switch .dropdown-menu hr { margin: 6px 0; border-color: var(--ro-divider); }
.referon-sidebar .rs-shelf-switch .dropdown-menu .rs-shelf-all > svg { width: 18px; height: 18px; fill: var(--ro-text-secondary) !important; margin: 0 5px !important; }
html .referon-sidebar .rs-links > a[data-shortcut="shelves_view"],
html .referon-sidebar .rs-links > a[href$="/search"],
html.rs-collapsed .referon-sidebar .rs-links > a[data-shortcut="shelves_view"],
html.rs-collapsed .referon-sidebar .rs-links > a[href$="/search"] { display: none !important; }
html.rs-collapsed .referon-sidebar .rs-links > a[href$="/login"] { display: none !important; }

/* =====================================================================
   Settings, My Account, Profile, Users/Roles/Audit/Webhooks: ReferOn look
   (core markup: settings/layout, settings/parts/navbar, users/account/layout, form/toggle-switch)
   ===================================================================== */
/* top tabs: Settings, Maintenance, Audit, Users, Roles, Webhooks -> segmented group */
.active-link-list:not(.in-sidebar) { gap: 4px; padding: 16px 0 !important; }
.active-link-list:not(.in-sidebar) > a {
  display: inline-flex !important; align-items: center; gap: 8px; height: 36px; padding: 0 14px !important; margin: 0 !important;
  border-radius: var(--ro-radius); color: var(--ro-text-secondary) !important; font-size: 14px; font-weight: 500; background: transparent;
  transition: background-color .15s, color .15s;
}
.active-link-list:not(.in-sidebar) > a svg { width: 18px; height: 18px; fill: currentColor !important; margin: 0 !important; top: 0 !important; }
.active-link-list:not(.in-sidebar) > a:hover { background: var(--ro-hover); color: var(--ro-text) !important; }
.active-link-list:not(.in-sidebar) > a.active {
  background: var(--ro-primary-soft) !important; color: var(--ro-primary) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
/* left category lists (settings categories, my account sections) -> like the app sidebar nav */
.active-link-list.in-sidebar {
  display: flex !important; flex-direction: column; gap: 2px; padding: 8px !important; margin: 0 0 8px;
  background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: var(--ro-shadow);
}
.active-link-list.in-sidebar > a {
  display: flex !important; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px !important; margin: 0 !important;
  border-radius: var(--ro-radius); color: var(--ro-text-secondary) !important; font-size: 14px; font-weight: 500; line-height: 20px;
  transition: background-color .15s, color .15s;
}
.active-link-list.in-sidebar > a svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor !important; margin: 0 !important; top: 0 !important; }
.active-link-list.in-sidebar > a:hover { background: var(--ro-hover); color: var(--ro-text) !important; }
.active-link-list.in-sidebar > a.active { background: var(--ro-nav-active, var(--ro-primary-soft)) !important; color: var(--ro-primary) !important; }
.container.medium .grid.right-focus > div > h5,
.container.medium .grid.right-focus > div > .sticky-top-m > h5 {
  font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ro-text-muted); margin: 0 0 10px !important;
}
.container.medium .grid.right-focus > div > .py-xs { font-size: 13px; padding: 8px 4px !important; }

/* setting rows */
.setting-list > * { padding: 20px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--ro-divider); }
.setting-list > *:last-child { border-bottom: 0; }
.setting-list-label { display: block; font-size: 15px !important; font-weight: 600 !important; color: var(--ro-text) !important; margin-bottom: 4px; }
.setting-list p.small, .content-wrap form p.small { font-size: 13px !important; line-height: 20px; color: var(--ro-text-muted) !important; margin: 0; }

/* form fields (settings / account / users / roles / webhooks) */
.content-wrap form input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="url"], [type="search"], [type="date"]),
.content-wrap form select, .content-wrap form textarea, .content-wrap .input-base {
  min-height: 40px; padding: 8px 12px !important; box-sizing: border-box;
  border: 1px solid #E2E8F0 !important; border-radius: var(--ro-radius) !important; background: var(--ro-surface) !important;
  color: var(--ro-text) !important; font-size: 14px; box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
html.dark-mode .content-wrap form :is(input, select, textarea), html.dark-mode .content-wrap .input-base { border-color: var(--ro-divider) !important; }
.content-wrap form :is(input, select, textarea):focus, .content-wrap .input-base:focus {
  outline: none !important; border-color: var(--ro-primary) !important; box-shadow: 0 0 0 3px #B8DBFF !important;
}
html.dark-mode .content-wrap form :is(input, select, textarea):focus { box-shadow: 0 0 0 3px rgba(157, 204, 250, .35) !important; }

/* checkboxes (custom-checkbox) -> ReferOn checkbox; toggle-switch component -> ReferOn switch */
.toggle-switch { display: inline-flex !important; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ro-text); }
.toggle-switch .custom-checkbox {
  width: 20px !important; height: 20px !important; border-radius: 6px !important; border: 1px solid #CBD5E0 !important;
  background: var(--ro-surface) !important; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background-color .15s, border-color .15s;
}
.toggle-switch .custom-checkbox svg { width: 16px !important; height: 16px !important; fill: #fff !important; margin: 0 !important; top: 0 !important; }
.toggle-switch input[type="checkbox"]:checked + .custom-checkbox { background: var(--ro-primary-fill, var(--ro-primary)) !important; border-color: transparent !important; }
.toggle-switch .custom-checkbox:focus-visible { outline: none; box-shadow: 0 0 0 3px #B8DBFF; }
label[components~="toggle-switch"] .custom-checkbox {
  width: 34px !important; height: 20px !important; border-radius: 9999px !important; border: 0 !important;
  background: #CBD5E0 !important; position: relative; justify-content: flex-start;
}
label[components~="toggle-switch"] .custom-checkbox svg { display: none !important; }
label[components~="toggle-switch"] .custom-checkbox::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 9999px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
label[components~="toggle-switch"] input[type="checkbox"]:checked + .custom-checkbox { background: var(--ro-primary-fill, var(--ro-primary)) !important; }
label[components~="toggle-switch"] input[type="checkbox"]:checked + .custom-checkbox::after { transform: translateX(14px); }

/* lists of users / roles */
.item-list { border: 0 !important; }
.item-list-row { border: 0 !important; border-bottom: 1px solid #DBE0E6 !important; border-radius: 0; transition: background-color .15s; }
html.dark-mode .item-list-row { border-bottom-color: var(--ro-divider) !important; }
.item-list-row:hover { background: var(--ro-hover); }
.item-list-row a { font-weight: 500; }
.item-list-row .avatar { border-radius: 9999px; }

/* tables (audit log, permissions, ...) -> ReferOn table */
.content-wrap table.table { border-collapse: collapse; width: 100%; }
.content-wrap table.table th, .content-wrap table.table thead td {
  font-family: 'Oswald', sans-serif !important; font-size: 12px !important; line-height: 16px; font-weight: 500 !important;
  text-transform: uppercase; letter-spacing: .6px; color: #343944; padding: 13px 12px !important;
  border: 0 !important; border-bottom: 1px solid #DBE0E6 !important; background: transparent;
}
html.dark-mode .content-wrap table.table th { color: var(--ro-text); border-bottom-color: var(--ro-divider) !important; }
.content-wrap table.table td { padding: 12px !important; font-size: 14px; border: 0 !important; border-bottom: .8px solid #DBE0E6 !important; vertical-align: middle; }
html.dark-mode .content-wrap table.table td { border-bottom-color: var(--ro-divider) !important; }
.content-wrap table.table tbody tr:hover td { background: var(--ro-hover); }

/* profile page */
.avatar.square.huge { border-radius: 16px !important; }
#content-counts .icon-list-item { border-radius: var(--ro-radius); padding: 6px 8px; }
#content-counts .icon-list-item:hover { background: var(--ro-hover); }
#recent-user-activity h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ro-text-muted); }

@media screen and (max-width: 999px) {
  .active-link-list:not(.in-sidebar) { overflow-x: auto; flex-wrap: nowrap !important; justify-content: flex-start !important; padding: 12px 0 !important; }
  .active-link-list:not(.in-sidebar) > a { flex-shrink: 0; }
}

/* Settings area: every page with the top tabs gets the same width (core mixes small / medium / full containers) */
.container:has(> nav.active-link-list:not(.in-sidebar)) { max-width: 1100px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; }
.container:has(> nav.active-link-list:not(.in-sidebar)) > nav.active-link-list { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.container:has(> nav.active-link-list:not(.in-sidebar)) > nav.active-link-list::-webkit-scrollbar { display: none; }
.container:has(> nav.active-link-list:not(.in-sidebar)) > nav.active-link-list > a { flex-shrink: 0; }
/* "System version" heading: keep its space under the categories card */
.container.medium .grid.right-focus > div > h5.mt-xl { margin-top: 28px !important; }

/* ---------- User profile (theme users/profile) ---------- */
.rf-profile { max-width: 1100px !important; }
.rf-profile-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 24px !important; margin: 0 0 24px !important; border-radius: var(--ro-radius);
}
.rf-profile-avatar { width: 88px; height: 88px; border-radius: 16px; object-fit: cover; box-shadow: var(--ro-shadow); }
.rf-profile-who h1 { font-size: 26px; line-height: 32px; margin: 0 0 4px; font-weight: 600; }
.rf-profile-who p { margin: 0; font-size: 14px; }
.rf-profile-edit { display: inline-flex !important; align-items: center; gap: 6px; margin: 12px 0 0 !important; height: 32px; padding: 0 12px !important; font-size: 13px !important; }
.rf-profile-edit svg { width: 16px; height: 16px; }
.rf-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 10px; }
.rf-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--ro-radius);
  background: var(--ro-bg); color: var(--ro-text) !important; text-decoration: none !important; transition: background-color .15s, box-shadow .15s;
}
.rf-stat:hover { background: var(--ro-primary-soft); }
.rf-stat-icon svg { width: 18px; height: 18px; margin: 0 !important; top: 0 !important; }
.rf-stat-count { font-size: 22px; line-height: 28px; font-weight: 600; }
.rf-stat-label { font-size: 12px; color: var(--ro-text-muted); }
.rf-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.rf-profile-main { display: flex; flex-direction: column; gap: 16px; }
.rf-profile-section { margin: 0 !important; padding: 20px 24px !important; }
.rf-profile-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rf-profile-section-head h2 { font-size: 18px !important; line-height: 26px; font-weight: 600; margin: 0 !important; }
.rf-profile-section-head a { font-size: 13px; font-weight: 500; white-space: nowrap; }
.rf-profile-section .entity-list-item { border-radius: var(--ro-radius); }
.rf-profile-activity { padding: 20px !important; margin: 0 !important; position: sticky; top: 24px; }
.rf-profile-activity h5 { font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ro-text-muted); margin: 0 0 12px !important; }
.rf-profile-activity .activity-list-item { padding: 8px 0 !important; }
@media screen and (max-width: 999px) {
  .rf-profile-head { grid-template-columns: auto 1fr; }
  .rf-profile-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .rf-profile-grid { grid-template-columns: 1fr; }
  .rf-profile-activity { position: static; }
}
@media screen and (max-width: 600px) {
  .rf-profile-head { padding: 16px !important; gap: 16px; }
  .rf-profile-avatar { width: 64px; height: 64px; }
  .rf-profile-who h1 { font-size: 22px; }
  .rf-profile-stats { grid-template-columns: repeat(2, 1fr); }
  .rf-profile-section { padding: 16px !important; }
}
.rf-profile-section .entity-list-item { padding: 10px 8px !important; }
.rf-profile-section .entity-list-item-name { font-size: 15px !important; line-height: 22px; font-weight: 600; margin: 0 !important; }
.rf-profile-section .entity-item-snippet p { font-size: 13px; line-height: 18px; margin: 2px 0 0; }
.rf-profile-section .entity-list-item > .icon { width: 32px; height: 32px; }

/* Topic tile present in several books: a chooser (book + visibility + page count) */
.rf-topic-multi { position: relative; padding: 0 !important; display: block !important; }
.rf-topic-multi > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--ro-radius);
}
.rf-topic-multi > summary::-webkit-details-marker { display: none; }
.rf-topic-multi > summary > svg { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; fill: var(--ro-text-muted); transition: transform .15s; }
.rf-topic-multi[open] > summary > svg { transform: rotate(180deg); }
.rf-topic-multi[open] { z-index: 5; box-shadow: var(--ro-shadow-active, var(--ro-shadow)); }
.rf-topic-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; padding: 6px;
  background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: 0 12px 32px rgba(17, 24, 39, .16);
  animation: rf-drop-in .18s cubic-bezier(.2, .8, .2, 1); min-width: 240px;
}
.rf-topic-menu a {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--ro-radius);
  color: var(--ro-text) !important; text-decoration: none !important;
}
.rf-topic-menu a:hover { background: var(--ro-hover); }
.rf-topic-menu-book { font-weight: 600; font-size: 14px; }
.rf-topic-menu-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rf-topic-menu-meta .rf-vis { margin: 0 !important; }
.rf-topic-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.rf-topic-multi > summary .rf-topic-text { min-width: 0; }
@media screen and (max-width: 600px) {
  .rf-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rf-topic-multi > summary { position: relative; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .rf-topic-multi > summary > svg { position: absolute; top: 12px; right: 10px; margin: 0; }
  .rf-topic-multi[open] { grid-column: 1 / -1; }
  .rf-topic-multi[open] > summary { flex-direction: row; align-items: center; }
  .rf-topic-multi .rf-topic-menu { position: static; min-width: 0; box-shadow: none; padding: 0 6px 8px; animation: rf-drop-in .18s ease-out; }
  .rf-topic-menu a { padding: 10px; background: var(--ro-bg); margin-top: 6px; }
}
@media screen and (max-width: 600px) { .rf-topic-grid { grid-auto-flow: row dense; } }

/* ---------- Ask AI (homepage) ---------- */
.rf-ai { padding: 24px !important; margin: 0 0 28px !important; border-radius: var(--ro-radius); }
.rf-ai-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rf-ai-head h2 { font-size: 20px !important; line-height: 28px; font-weight: 600; margin: 0 !important; }
.rf-ai-head p { margin: 2px 0 0; font-size: 14px; color: var(--ro-text-muted); }
.rf-ai-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

.rf-ai-form input {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px; font-size: 15px; box-sizing: border-box;
  border: 1px solid #E2E8F0; border-radius: var(--ro-radius); background: var(--ro-bg); color: var(--ro-text);
}
html.dark-mode .rf-ai-form input { border-color: var(--ro-divider); }
.rf-ai-form input:focus { outline: none; border-color: var(--ro-primary); box-shadow: 0 0 0 3px #B8DBFF; }
.rf-ai-form .button { height: 48px; margin: 0 !important; padding: 0 22px !important; }
.rf-ai-form .button:disabled { opacity: .5; cursor: wait; }
.rf-ai-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rf-ai-examples .rf-chip { background: var(--ro-primary-soft); box-shadow: none; }
.rf-ai-result {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--ro-radius); background: var(--ro-bg);
  font-size: 15px; line-height: 24px; animation: rf-drop-in .2s ease-out;
}
.rf-ai-result p { margin: 0 0 8px; }
.rf-ai-result ol, .rf-ai-result ul { margin: 0 0 8px; padding-left: 22px; }
.rf-ai-result li { margin: 2px 0; }
.rf-ai-cite {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px;
  border-radius: 5px; font-size: 11px; font-weight: 700; vertical-align: 2px; text-decoration: none !important;
  background: var(--ro-primary-soft); color: var(--ro-primary) !important;
}
.rf-ai-sources { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ro-divider); }
.rf-ai-sources > span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ro-text-muted); }
.rf-ai-sources a { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 500; }
.rf-ai-sources a b {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 6px;
  font-size: 11px; background: var(--ro-primary-fill, var(--ro-primary)); color: #fff;
}
.rf-ai-sources small { color: var(--ro-text-muted); font-weight: 400; }
.rf-ai-note { margin: 8px 2px 0; font-size: 12px; color: var(--ro-text-muted); }
.rf-ai-error { color: #B42318; margin: 0; }
.rf-ai-thinking { display: flex; align-items: center; gap: 4px; color: var(--ro-text-muted); margin: 0; }
.rf-ai-thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--ro-primary); animation: rf-ai-dot 1s infinite ease-in-out; }
.rf-ai-thinking span:nth-child(2) { animation-delay: .15s; }
.rf-ai-thinking span:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes rf-ai-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media screen and (max-width: 600px) {
  .rf-ai { padding: 16px !important; }
  
  .rf-ai-form .button { width: 100%; }
  .rf-ai-examples { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .rf-ai-examples .rf-chip { flex-shrink: 0; }
}

/* Homepage: FAQ and Release Notes as separate blocks; no focus box on block titles after a click */
.rf-block > summary:focus { outline: none; }
.rf-block > summary:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 4px; border-radius: 4px; }
.rf-help .rf-list-card { margin: 0 !important; }
.rf-help .rf-list li { display: flex; align-items: center; gap: 10px; }
.rf-help .rf-list li > a { flex: 1; min-width: 0; }
.rf-list-icon.rf-list-icon-sm { width: 28px !important; height: 28px !important; flex-shrink: 0; }
.rf-list-icon.rf-list-icon-sm svg { width: 16px !important; height: 16px !important; }
.rf-help-release .rf-list-icon-sm { background: #ECFDF3; }
.rf-help-release .rf-list-icon-sm svg { fill: #079455 !important; }
@media screen and (min-width: 1000px) {
  /* side by side on wide screens, each with its own title */
  .rf-help { display: inline-block; vertical-align: top; width: calc(50% - 14px); }
  .rf-help + .rf-help { margin-left: 24px; }
}
/* Knowledge bases on phones: a horizontal strip like the videos */
@media screen and (max-width: 600px) {
  .rf-bases .rf-shelf-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  .rf-bases .rf-shelf { scroll-snap-align: start; }
}
@media screen and (max-width: 600px) {
  .rf-bases .rf-shelf-grid { scrollbar-width: none; scroll-padding-left: 0; }
  .rf-bases .rf-shelf-grid::-webkit-scrollbar { display: none; }
  .rf-bases .rf-shelf { margin: 0 !important; min-width: 0; }
  /* book rows inside the strip cards: name + badge on one line, count never wraps */
  .rf-bases .rf-shelf-books li { display: flex; align-items: center; gap: 8px; }
  .rf-bases .rf-shelf-books li > span:first-child { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
  .rf-bases .rf-shelf-books li > .rf-muted { white-space: nowrap; flex-shrink: 0; font-size: 13px; }
  .rf-bases .rf-shelf-books .rf-vis { font-size: 11px; }
}
@media screen and (max-width: 600px) { .rf-video-grid { scrollbar-width: none; } .rf-video-grid::-webkit-scrollbar { display: none; } }

/* Ask AI field: one rounded field with the send button inside (desktop and phone) */
.rf-ai-form { display: flex !important; flex-direction: row !important; align-items: center; gap: 0; border: 1px solid #E2E8F0; background: var(--ro-bg); transition: border-color .15s, box-shadow .15s; }
html.dark-mode .rf-ai-form { border-color: var(--ro-divider); }
.rf-ai-form:focus-within { border-color: var(--ro-primary); }
.rf-ai .rf-ai-form input {
  flex: 1 1 auto !important; width: auto !important; min-width: 0; height: 44px !important; padding: 0 14px !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  font-size: 16px !important; color: var(--ro-text);
}
.rf-ai .rf-ai-form input:focus { box-shadow: none !important; }
.rf-ai-send { flex-shrink: 0; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .1s, opacity .15s; }
.rf-ai-send svg { width: 20px; height: 20px; fill: #fff; }
.rf-ai-send:active { transform: scale(.94); }
.rf-ai-send:disabled { opacity: .5; cursor: wait; }
@media screen and (max-width: 600px) {
  .rf-ai-form { flex-direction: row !important; }
  .rf-ai-head { align-items: flex-start; }
  .rf-ai-head h2 { font-size: 18px !important; }
  .rf-ai-head p { font-size: 13px; }
}
.rf-ai-examples { scrollbar-width: none; } .rf-ai-examples::-webkit-scrollbar { display: none; }

/* ---------- Book contents bar above articles (referon/book-nav) ---------- */
.rf-booknav { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.rf-booknav-menu { position: static; flex: 0 1 auto; min-width: 0; }
.rf-booknav-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--ro-radius); background: var(--ro-surface); box-shadow: var(--ro-shadow); color: var(--ro-text); font-size: 14px; font-weight: 500; user-select: none; transition: box-shadow .15s; }
.rf-booknav-menu > summary::-webkit-details-marker { display: none; }
.rf-booknav-menu > summary:hover { box-shadow: var(--ro-shadow-active, var(--ro-shadow)); }
.rf-booknav-menu > summary svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--ro-primary); margin: 0 !important; top: 0 !important; }
.rf-booknav-menu > summary svg:last-child { fill: var(--ro-text-muted); transition: transform .15s; }
.rf-booknav-menu[open] > summary { background: var(--ro-primary-soft); }
.rf-booknav-menu[open] > summary svg:last-child { transform: rotate(180deg); }
.rf-booknav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rf-booknav-panel { position: absolute; left: 0; width: min(440px, 100%); overflow-y: auto; padding: 8px; background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: 0 16px 40px rgba(17, 24, 39, .18); animation: rf-drop-in .18s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; }
.rf-booknav-book { padding: 6px 8px 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rf-booknav-book a { color: var(--ro-text-muted); }
.rf-booknav-filter {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px; margin: 0 0 6px; font-size: 14px;
  border: 1px solid #E2E8F0; border-radius: var(--ro-radius); background: var(--ro-bg); color: var(--ro-text);
}
html.dark-mode .rf-booknav-filter { border-color: var(--ro-divider); }
.rf-booknav-filter:focus { outline: none; border-color: var(--ro-primary); box-shadow: 0 0 0 3px #B8DBFF; }
.rf-booknav-list, .rf-booknav-list ul { list-style: none; margin: 0; padding: 0; }
.rf-booknav-chapter > details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px;
  border-radius: var(--ro-radius); font-size: 14px; font-weight: 600; color: var(--ro-text);
}
.rf-booknav-chapter > details > summary::-webkit-details-marker { display: none; }
.rf-booknav-chapter > details > summary:hover { background: var(--ro-hover); }
.rf-booknav-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ro-primary-soft); }
.rf-booknav-icon svg { width: 16px; height: 16px; fill: var(--ro-primary); margin: 0 !important; top: 0 !important; }
.rf-booknav-name { flex: 1; min-width: 0; }
.rf-booknav-count { font-size: 12px; font-weight: 500; color: var(--ro-text-muted); background: var(--ro-bg); border-radius: 9999px; padding: 1px 8px; }
.rf-booknav-chapter ul { padding: 2px 0 6px 38px !important; }
.rf-booknav-list a {
  display: block; padding: 7px 10px; border-radius: var(--ro-radius); font-size: 14px; line-height: 20px;
  color: var(--ro-text-secondary) !important; text-decoration: none !important;
}
.rf-booknav-list a:hover { background: var(--ro-hover); color: var(--ro-text) !important; }
.rf-booknav-list a.is-current { background: var(--ro-primary-soft); color: var(--ro-primary) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--ro-primary); }
.rf-booknav-list a.rf-booknav-overview { font-size: 12px; color: var(--ro-text-muted) !important; padding-top: 4px; padding-bottom: 4px; }
.rf-booknav-page > a { padding-left: 8px; font-weight: 500; }
.rf-booknav-none { padding: 8px 10px; margin: 0; font-size: 13px; color: var(--ro-text-muted); }
.rf-booknav-pos { margin-left: auto; font-size: 13px; color: var(--ro-text-muted); white-space: nowrap; }
.rf-booknav-arrows { display: flex; gap: 6px; flex-shrink: 0; }
.rf-booknav-pos + .rf-booknav-arrows { margin-left: 0; }
.rf-booknav-menu + .rf-booknav-arrows { margin-left: auto; }
.rf-booknav-arrow {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--ro-radius);
  background: var(--ro-surface); box-shadow: var(--ro-shadow); transition: box-shadow .15s, background-color .15s;
}
.rf-booknav-arrow svg { width: 20px; height: 20px; fill: var(--ro-primary); margin: 0 !important; top: 0 !important; }
a.rf-booknav-arrow:hover { background: var(--ro-primary-soft); }
.rf-booknav-arrow.is-disabled { opacity: .35; box-shadow: none; }
@media screen and (max-width: 600px) {
  .rf-booknav-menu > summary { max-width: none; }
  .rf-booknav-menu { flex: 1 1 auto; }
  
  .rf-booknav-panel { width: 100%; max-height: 70vh; }
  .rf-booknav-pos { font-size: 12px; }
}
/* contents bar stays reachable while reading a long article */
.rf-booknav { position: sticky; }
@media screen and (max-width: 999px) {  }

/* contents bar polish: no focus box after a tap, solid background when stuck, full-width filter */
.rf-booknav-menu > summary:focus { outline: none; }
.rf-booknav-menu > summary:focus-visible { outline: 2px solid var(--ro-primary); outline-offset: 2px; }

.rf-booknav .rf-booknav-filter { width: 100% !important; max-width: none !important; display: block; }
@media screen and (max-width: 999px) {
  /* the contents bar replaces the breadcrumb trail on phones; keep the visibility badge */
  .rf-crumbs-row .breadcrumbs { display: none !important; }
  .rf-crumbs-row:not(:has(.rf-vis)) { display: none !important; }
  .rf-crumbs-row { margin-bottom: 4px !important; }
}
/* overflow:hidden breaks position:sticky of the contents bar; clip trims overflow the same way without that side effect */
.tri-layout-middle { overflow: clip !important; }
@media screen and (max-width: 999px) {
  /* core sets body to the viewport height: the sticky header then leaves after one screen of scrolling */
  html, body { height: auto !important; min-height: 100%; }
  /* the page editor is a full-height flex layout: keep the core 100% height there */
  html:has(body.flexbox), body.flexbox { height: 100% !important; }
}
/* contents bar: flush to the top edge (desktop) / to the header (phones), solid strip with a soft shadow */
.rf-booknav { top: 0 !important; padding: 12px 0 !important; margin-top: -12px !important; background: var(--ro-bg) !important; z-index: 18; }
.rf-booknav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(17, 24, 39, .06), transparent);
}
@media screen and (max-width: 999px) {
  .rf-booknav { top: 64px !important; padding: 8px 0 !important; margin-top: -8px !important; }
}
/* shadow under the contents bar only while it is stuck; at rest it sits flush above the article card */
.rf-booknav::after { opacity: 0; transition: opacity .15s; }
.rf-booknav.is-stuck::after { opacity: 1; }
.rf-booknav { margin-bottom: 4px !important; }
/* contents panel attached to its button: no gap, same left edge, height fits the screen */
.rf-booknav-panel { max-height: calc(100vh - 140px) !important; border-top: 1px solid var(--ro-divider); }
.rf-booknav-menu[open] > summary { box-shadow: var(--ro-shadow-active, var(--ro-shadow)); }
@media screen and (max-width: 999px) {
  .rf-booknav-panel { max-height: calc(100vh - 200px) !important; }
}
/* the panel is positioned in the bar (12px padding + 40px button): start it 4px under the button itself */
.rf-booknav-panel { margin-top: 0 !important; }
@media screen and (max-width: 999px) {  }
.rf-booknav-panel { top: 64px !important; }
@media screen and (max-width: 999px) { .rf-booknav-panel { top: 60px !important; } }

/* contents button shows "Chapter › Page"; the page name flashes softly after moving to another page */
.rf-booknav-menu > summary { max-width: min(680px, 100%); }
.rf-booknav-label { display: flex; align-items: baseline; min-width: 0; gap: 0; }
.rf-booknav-where { flex-shrink: 1; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ro-text-muted); font-weight: 400; }
.rf-booknav-current {
  flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ro-text);
  padding: 1px 6px; margin-left: 2px; border-radius: 5px; animation: rf-page-flash 1.4s ease-out;
}
@keyframes rf-page-flash {
  0% { background: #CEE5FC; color: var(--ro-primary); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .rf-booknav-current { animation: none; } }
@media screen and (max-width: 600px) {
  .rf-booknav-where { display: none; }
  .rf-booknav-current { margin-left: 0; }
}
/* system tags (used for search, homepage and the AI) are not shown in the page's tag list */
.tag-item:is([data-name="audience"], [data-name="lang"], [data-name="section"], [data-name="type"], [data-name="version"], [data-name="kb_section"], [data-name="kb_home"], [data-name="icon"], [data-name="color"], [data-name="hero_style"]) { display: none !important; }

/* ---------- "Books" accordion in the sidebar (books of the current edition) ---------- */
.referon-sidebar .rs-acc { width: 100%; }
.referon-sidebar .rs-acc-head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
  border-radius: var(--ro-radius); color: var(--ro-text-secondary); font-size: 14px; font-weight: 500; user-select: none;
}
.referon-sidebar .rs-acc-head::-webkit-details-marker { display: none; }
.referon-sidebar .rs-acc-head:hover { background: var(--ro-hover); color: var(--ro-text); }
.referon-sidebar .rs-acc-head svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--ro-text-secondary) !important; margin: 0 !important; top: 0 !important; }
.referon-sidebar .rs-acc-head svg:last-child { margin-left: auto !important; width: 16px; height: 16px; transition: transform .15s; }
.referon-sidebar .rs-acc[open] > .rs-acc-head svg:last-child { transform: rotate(180deg); }
.referon-sidebar .rs-acc-label { flex: 1; }
.referon-sidebar .rs-acc-items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 42px; animation: rf-drop-in .18s ease-out; }
.referon-sidebar .rs-acc-items a {
  display: block; padding: 7px 10px; border-radius: var(--ro-radius); font-size: 14px; line-height: 20px;
  color: var(--ro-text-secondary) !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.referon-sidebar .rs-acc-items a:hover { background: var(--ro-hover); color: var(--ro-text) !important; }
.referon-sidebar .rs-acc-items a.active { background: var(--ro-nav-active, var(--ro-primary-soft)); color: var(--ro-primary) !important; font-weight: 500; }
.referon-sidebar .rs-acc-items a.rs-acc-all { font-size: 12px; color: var(--ro-text-muted) !important; }
/* collapsed sidebar: the accordion is just the books icon, linking nowhere new (expanding the sidebar first) */
@media screen and (min-width: 1000px) {
  html.rs-collapsed .referon-sidebar .rs-acc-head { width: 40px; height: 40px; padding: 0; justify-content: center; margin: 0 auto; }
  html.rs-collapsed .referon-sidebar .rs-acc-head .rs-acc-label,
  html.rs-collapsed .referon-sidebar .rs-acc-head svg:last-child,
  html.rs-collapsed .referon-sidebar .rs-acc-items { display: none !important; }
}
@media screen and (max-width: 999px) {
  .referon-sidebar .rs-acc-head { height: 44px; }
  .referon-sidebar .rs-acc-items a { padding: 10px; }
}

/* Books accordion: book rows with chapters (one level); Settings accordion; settings menu hidden duplicate */
.referon-sidebar .rs-acc-items .rs-acc-row { display: flex; align-items: center; gap: 2px; }
.referon-sidebar .rs-acc-items .rs-acc-row > a { flex: 1; min-width: 0; }
.referon-sidebar .rs-acc-toggle {
  flex-shrink: 0; width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--ro-radius);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.referon-sidebar .rs-acc-toggle:hover { background: var(--ro-hover); }
.referon-sidebar .rs-acc-toggle svg { width: 16px; height: 16px; fill: var(--ro-text-muted) !important; margin: 0 !important; top: 0 !important; transition: transform .15s; }
.referon-sidebar .rs-acc-book.is-open .rs-acc-toggle svg { transform: rotate(180deg); }
.referon-sidebar .rs-acc-chapters { display: none; flex-direction: column; gap: 1px; margin: 2px 0 4px 10px; padding-left: 8px; border-left: 1px solid var(--ro-divider); }
.referon-sidebar .rs-acc-book.is-open .rs-acc-chapters { display: flex; animation: rf-drop-in .18s ease-out; }
.referon-sidebar .rs-acc-chapters a { font-size: 13px !important; padding: 6px 10px !important; }
/* the sidebar menu can be long now: let it scroll between the edition switch and the account card */
@media screen and (min-width: 1000px) {
  .referon-sidebar .rs-links { overflow-y: auto; min-height: 0; flex-shrink: 1; scrollbar-width: thin; }
}
/* settings and my-account pages: the categories column stays in place while the content scrolls */
@media screen and (min-width: 1000px) {
  .container.medium > .grid.right-focus > div:first-child { position: sticky; top: 16px; align-self: start; }
}
/* collapsed sidebar: no duplicate Books/Settings links (the accordions show those icons) */
/* Books accordion is off: the plain "Books" link is shown again */
@media screen and (min-width: 1000px) {
  html.rs-collapsed .referon-sidebar .rs-acc { width: 40px !important; margin: 0 auto; }
  html.rs-collapsed .referon-sidebar .rs-acc-head svg:first-child { width: 22px !important; height: 22px !important; }
  html.rs-collapsed .referon-sidebar .rs-acc-head.active { background: var(--ro-nav-active, var(--ro-primary-soft)); }
  html.rs-collapsed .referon-sidebar .rs-acc-head.active svg:first-child { fill: var(--ro-primary) !important; }
}
/* no dotted focus box after a mouse click on sidebar buttons */
.referon-sidebar button:focus:not(:focus-visible), .referon-sidebar summary:focus:not(:focus-visible) { outline: none !important; }
@media screen and (min-width: 1000px) {
  /* long menu: logo, search and edition switch never shrink; only the links list scrolls */
  #header.referon-sidebar > .rs-top, #header.referon-sidebar > .rs-search,
  .referon-sidebar .rs-menu > .rs-shelf-switch, .referon-sidebar .rs-menu > .rs-account { flex-shrink: 0 !important; }
  #header.referon-sidebar > .rs-menu { min-height: 0; flex: 1 1 auto; }
  
}
@media screen and (min-width: 1000px) {
  /* menu column: content from the top; the links list is the only part that shrinks and scrolls */
  #header.referon-sidebar > .rs-menu { justify-content: flex-start !important; overflow: hidden; }
  .referon-sidebar .rs-menu > .rs-links { flex: 0 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden; }
  .referon-sidebar .rs-menu > .rs-spacer { flex: 1 1 0 !important; min-height: 0; }
}

/* sidebar entity lists (Popular / New / Recently viewed): plain 18px icons like the Actions list, no grey circles */
.tri-layout-sides .entity-list-item > .icon,
.tri-layout-sides .entity-list-item-basic > .icon {
  width: 20px !important; height: 20px !important; min-width: 20px; background: transparent !important; border-radius: 0 !important;
  display: flex !important; align-items: center; justify-content: center; margin: 2px 0 0 !important; padding: 0 !important;
}
.tri-layout-sides .entity-list-item > .icon::after, .tri-layout-sides .entity-list-item > .icon::before { display: none !important; }
.tri-layout-sides .entity-list-item > .icon svg {
  width: 18px !important; height: 18px !important; fill: var(--ro-text-secondary) !important; margin: 0 !important; top: 0 !important; opacity: 1 !important;
}
.tri-layout-sides .entity-list-item { align-items: flex-start !important; gap: 10px !important; padding: 6px 8px !important; border-radius: var(--ro-radius); }
.tri-layout-sides .entity-list-item:hover { background: var(--ro-hover) !important; }
.tri-layout-sides .entity-list-item:hover > .icon svg { fill: var(--ro-primary) !important; }
.tri-layout-sides .entity-list-item .entity-list-item-name { font-size: 14px !important; font-weight: 500; line-height: 20px; }
/* sidebar cards: icons line up with the heading, 20px from the card edge (hover background still reaches 12px out) */
.tri-layout-sides-content .tri-layout-left-contents > *, .tri-layout-sides-content .tri-layout-right-contents > * { padding-left: 20px !important; padding-right: 20px !important; }
.tri-layout-sides .entity-list-item, .tri-layout-sides .icon-list-item { margin-left: -8px !important; margin-right: -8px !important; padding-left: 8px !important; padding-right: 8px !important; }
.tri-layout-sides .icon-list, .tri-layout-sides .entity-list { margin-left: 0 !important; margin-right: 0 !important; }
.tri-layout-sides .entity-list-item, .tri-layout-sides .icon-list-item { width: calc(100% + 16px) !important; box-sizing: border-box; }
/* Details and Actions look the same: 16px icons at the heading line, 12px to the text, compact 30px rows */
.tri-layout-sides .entity-meta-item svg, .tri-layout-sides .icon-list-item svg,
.tri-layout-sides .entity-list-item > .icon svg { width: 16px !important; height: 16px !important; }
.tri-layout-sides .entity-list-item > .icon { width: 16px !important; min-width: 16px; height: 20px !important; }
.tri-layout-sides .icon-list-item, .tri-layout-sides .entity-list-item { gap: 12px !important; min-height: 30px; padding-top: 5px !important; padding-bottom: 5px !important; font-size: 14px !important; }
.tri-layout-sides .icon-list-item > span:first-child { width: 16px !important; min-width: 16px; margin: 0 !important; }
.tri-layout-sides .entity-meta-item { gap: 12px !important; font-size: 13px; line-height: 18px; margin: 6px 0 !important; }
.tri-layout-sides .entity-meta-item svg { fill: var(--ro-text-secondary) !important; }
.tri-layout-sides .icon-list hr, .tri-layout-sides .actions hr { margin: 6px 0 !important; width: 100% !important; border-color: var(--ro-divider) !important; }
/* Telegram in-app browser: header scrolls away with the page (Telegram keeps its own bar on top) */
@media screen and (max-width: 999px) {
  html.in-telegram #header.referon-sidebar { position: relative !important; }
  html.in-telegram .rf-booknav { top: 0 !important; }
}

/* ---------- right column polish ---------- */
/* tag card that only holds hidden system tags: hide the whole (empty) card */
.tri-layout-sides-content .tri-layout-left-contents > *:has(.tag-item):not(:has(.tag-item:not([data-name="audience"]):not([data-name="lang"]):not([data-name="section"]):not([data-name="type"]):not([data-name="version"]):not([data-name="kb_section"]):not([data-name="kb_home"]):not([data-name="icon"]):not([data-name="color"]):not([data-name="hero_style"]):not([data-name^="helpjuice"]))),
.tri-layout-sides-content .tri-layout-right-contents > *:has(.tag-item):not(:has(.tag-item:not([data-name="audience"]):not([data-name="lang"]):not([data-name="section"]):not([data-name="type"]):not([data-name="version"]):not([data-name="kb_section"]):not([data-name="kb_home"]):not([data-name="icon"]):not([data-name="color"]):not([data-name="hero_style"]):not([data-name^="helpjuice"]))) { display: none !important; }
/* card shadows are not cut at the sides of the scrolling column */
@media screen and (min-width: 1000px) {
  .tri-layout-sides-content { padding-left: 8px !important; padding-right: 8px !important; margin-left: -8px; margin-right: -8px; padding-bottom: 12px; }
}
/* "Search this book / chapter": a clean ReferOn search field */
.tri-layout-sides form.search-box, .tri-layout-sides .search-box {
  display: flex; align-items: center; width: 100%; max-width: none; margin: 0; position: relative;
}
.tri-layout-sides .search-box input {
  width: 100% !important; height: 40px !important; padding: 0 12px 0 38px !important; font-size: 14px !important;
  border: 1px solid #E2E8F0 !important; border-radius: var(--ro-radius) !important; background: var(--ro-bg) !important;
  box-shadow: none !important; color: var(--ro-text);
}
html.dark-mode .tri-layout-sides .search-box input { border-color: var(--ro-divider) !important; }
.tri-layout-sides .search-box input:focus { outline: none !important; border-color: var(--ro-primary) !important; box-shadow: 0 0 0 3px #B8DBFF !important; }
.tri-layout-sides .search-box button {
  position: absolute !important; left: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; margin: 0 !important;
}
.tri-layout-sides .search-box button svg { width: 18px !important; height: 18px !important; fill: var(--ro-text-muted) !important; margin: 0 !important; top: 0 !important; }
/* list of pages in a chapter (and loose pages): one soft divider between rows instead of double lines */
.content-wrap .book-contents:not(:has(.rf-chapter-card)) { gap: 0 !important; }
.content-wrap .book-contents:not(:has(.rf-chapter-card)) > .entity-list-item {
  box-shadow: none !important; border: 0 !important; border-bottom: 1px solid var(--ro-divider) !important;
  border-radius: 0 !important; background: transparent !important; padding: 14px 12px !important; margin: 0 !important;
}
.content-wrap .book-contents:not(:has(.rf-chapter-card)) > .entity-list-item:last-child { border-bottom: 0 !important; }
.content-wrap .book-contents:not(:has(.rf-chapter-card)) > .entity-list-item:hover { background: var(--ro-hover) !important; border-radius: var(--ro-radius) !important; }
/* chapter cards: the "N pages" toggle is a compact pill, not a tinted band across the card; icon tile crisp */
.rf-chapter-card .chapter-expansion > .content { display: block !important; }
.rf-chapter-card .chapter-contents-toggle { width: max-content !important; max-width: 100%; display: inline-flex !important; }
.rf-chapter-card > .entity-list-item > .icon { border-radius: 10px !important; }
.rf-chapter-card > .entity-list-item > .icon::before, .rf-chapter-card > .entity-list-item > .icon::after { display: none !important; }
/* chapter cards: just the coloured icon, no background tiles behind it; no dotted focus box on "N pages" */
.rf-chapter-card > .entity-list-item > .icon,
.rf-chapter-card > .entity-list-item > .icon::before,
.rf-chapter-card > .entity-list-item > .icon::after { background: none !important; box-shadow: none !important; }
.rf-chapter-card > .entity-list-item > .icon { width: 28px !important; height: 28px !important; }
.rf-chapter-card > .entity-list-item > .icon svg { width: 24px !important; height: 24px !important; }
.rf-chapter-card .chapter-contents-toggle:focus { outline: none !important; }
.rf-chapter-card .chapter-contents-toggle:focus-visible { outline: 2px solid var(--rf-accent) !important; outline-offset: 2px; }
.content-wrap .rf-chapter-card > .entity-list-item > .icon > svg,
.content-wrap .rf-chapter-card > .entity-list-item > .icon > .svg-icon {
  background: none !important; border-radius: 0 !important; padding: 0 !important;
  width: 24px !important; height: 24px !important; min-width: 24px; fill: var(--rf-accent) !important;
}

/* "Back to top": one clean square button (no expanding label, no focus ring after a click) */
.back-to-top {
  width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important;
  background: var(--ro-primary-fill, #235EA5) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(23, 67, 118, .28) !important;
  display: flex !important; align-items: center; justify-content: center; overflow: hidden; outline: none !important;
  right: 24px !important; bottom: 24px !important; transition: background-color .15s, transform .15s, opacity .2s !important;
}
.back-to-top:hover { width: 44px !important; background: #174376 !important; transform: translateY(-2px); }
.back-to-top:focus { outline: none !important; box-shadow: 0 6px 16px rgba(23, 67, 118, .28) !important; }
.back-to-top:focus-visible { box-shadow: 0 0 0 3px #B8DBFF, 0 6px 16px rgba(23, 67, 118, .28) !important; }
.back-to-top .inner { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 !important; margin: 0 !important; }
.back-to-top .inner span { display: none !important; }
.back-to-top svg { width: 22px !important; height: 22px !important; fill: #fff !important; margin: 0 !important; top: 0 !important; }
.back-to-top::before, .back-to-top::after { display: none !important; }
html.dark-mode .back-to-top { background: #2E76CD !important; }
@media screen and (max-width: 600px) { .back-to-top { right: 16px !important; bottom: 16px !important; } }
/* BookStack's scroll-progress ring around the back-to-top button does not fit the square button: hidden */
.back-to-top-progress { display: none !important; }
.back-to-top-container { right: 24px !important; bottom: 24px !important; width: 44px !important; height: 44px !important; }
.back-to-top-container .back-to-top { position: static !important; right: auto !important; bottom: auto !important; }
@media screen and (max-width: 600px) { .back-to-top-container { right: 16px !important; bottom: 16px !important; } }
/* contents panel: chapter icons in the chapter's own colour */
.rf-booknav-icon[style*="--rf-accent"] { background: color-mix(in srgb, var(--rf-accent) 12%, transparent) !important; }
.rf-booknav-icon[style*="--rf-accent"] svg { fill: var(--rf-accent) !important; }

/* ---------- chapter look picker (create / edit chapter) ---------- */
.rf-look { padding: 16px 20px; border-radius: var(--ro-radius); background: var(--ro-bg); border: 1px solid var(--ro-divider); }
.rf-look > label { font-weight: 600; font-size: 15px; }
.rf-look-preview {
  --rf-accent: #235EA5; display: flex; align-items: center; gap: 12px; margin: 10px 0 16px; padding: 14px 16px; max-width: 420px;
  background: var(--ro-surface); border-radius: var(--ro-radius); box-shadow: inset 4px 0 0 var(--rf-accent), 0 0 0 1px var(--ro-divider);
}
.rf-look-preview-icon svg { width: 24px; height: 24px; fill: var(--rf-accent); display: block; }
.rf-look-preview-name { font-weight: 600; font-size: 15px; }
.rf-look-row { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0; }
.rf-look-label { width: 80px; flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--ro-text-secondary); padding-top: 8px; }
.rf-look-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-look-opt {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--ro-divider); background: var(--ro-surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color .15s, box-shadow .15s;
}
.rf-look-opt svg { width: 20px; height: 20px; fill: var(--ro-text-secondary); margin: 0 !important; }
.rf-look-opt:hover { border-color: var(--ro-primary); }
.rf-look-opt.is-on { border-color: var(--ro-primary); box-shadow: 0 0 0 2px #B8DBFF; background: var(--ro-primary-soft); }
.rf-look-opt.is-on svg { fill: var(--ro-primary); }
.rf-look-auto { width: auto; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--ro-text-secondary); }
.rf-look-swatch { background: var(--sw) !important; border-color: transparent; }
.rf-look-swatch.is-on { box-shadow: 0 0 0 2px var(--ro-surface), 0 0 0 4px var(--sw); }
.rf-look-section { max-width: 420px; height: 40px; border: 1px solid #E2E8F0; border-radius: var(--ro-radius); padding: 0 10px; background: var(--ro-surface); }
@media screen and (max-width: 600px) {
  .rf-look { padding: 12px; }
  .rf-look-row { flex-direction: column; gap: 6px; }
  .rf-look-label { width: auto; padding-top: 0; }
  .rf-look-section { max-width: 100%; width: 100%; }
}

/* ---------- homepage blue block: editor toolbar, colour presets, picture on the right ---------- */
.rf-home-intro { position: relative; }
.rf-home-intro-edit { display: none !important; }
.rf-hd { position: absolute; top: 14px; right: 14px; z-index: 5; display: flex; gap: 6px; }
.rf-hd-btn {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff !important; font-size: 13px; font-weight: 500; text-decoration: none !important;
  backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25); user-select: none;
}
.rf-hd-btn::-webkit-details-marker { display: none; }
.rf-hd-btn:hover, .rf-hd-design[open] > .rf-hd-btn { background: #fff; color: #235EA5 !important; }
.rf-hd-btn svg { width: 16px; height: 16px; fill: currentColor; margin: 0 !important; top: 0 !important; }
.rf-hd-btn:focus:not(:focus-visible) { outline: none; }
.rf-hd-design { position: relative; }
.rf-hd-panel {
  position: absolute; right: 0; top: calc(100% + 6px); width: 280px; padding: 14px; border-radius: 10px;
  background: var(--ro-surface); color: var(--ro-text); box-shadow: 0 16px 40px rgba(17,24,39,.22); animation: rf-drop-in .18s ease-out;
}
.rf-hd-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ro-text-muted); margin: 0 0 8px; }
.rf-hd-title + .rf-hd-hint { margin-top: 0; }
.rf-hd-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rf-hd-swatch { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); cursor: pointer; padding: 0; }
.rf-hd-swatch.is-on { box-shadow: 0 0 0 2px var(--ro-surface), 0 0 0 4px var(--ro-primary); }
.rf-hd-hint { font-size: 13px; line-height: 18px; color: var(--ro-text-secondary); margin: 0 0 8px; }
/* colour presets */
.rf-home-intro.rf-hero-indigo { background: radial-gradient(circle at 92% 18%, rgba(255,255,255,.16) 0 60px, transparent 61px), linear-gradient(135deg, #5B5BD6, #3730A3 55%, #2E2A8F) !important; }
.rf-home-intro.rf-hero-teal { background: radial-gradient(circle at 92% 18%, rgba(255,255,255,.16) 0 60px, transparent 61px), linear-gradient(135deg, #0E9AA7, #0B7285 55%, #0B5563) !important; }
.rf-home-intro.rf-hero-purple { background: radial-gradient(circle at 92% 18%, rgba(255,255,255,.16) 0 60px, transparent 61px), linear-gradient(135deg, #8B5CF6, #6D28D9 55%, #4C1D95) !important; }
.rf-home-intro.rf-hero-sunset { background: radial-gradient(circle at 92% 18%, rgba(255,255,255,.18) 0 60px, transparent 61px), linear-gradient(135deg, #F59E0B, #EA580C 50%, #DB2777) !important; }
.rf-home-intro.rf-hero-dark { background: radial-gradient(circle at 92% 18%, rgba(255,255,255,.08) 0 60px, transparent 61px), linear-gradient(135deg, #334155, #1E293B 55%, #0F172A) !important; }
.rf-home-intro.rf-hero-light { background: linear-gradient(135deg, #FFFFFF, #F5FAFE 55%, #EBF5FE) !important; box-shadow: var(--ro-shadow) !important; }
.rf-home-intro.rf-hero-light .page-content, .rf-home-intro.rf-hero-light .page-content h2, .rf-home-intro.rf-hero-light .page-content p { color: var(--ro-text) !important; }
.rf-home-intro.rf-hero-light .page-content h2 + p, .rf-home-intro.rf-hero-light .page-content h3 { color: var(--ro-text-muted) !important; }
.rf-home-intro.rf-hero-light .page-content ul li a { background: var(--ro-primary-soft) !important; color: var(--ro-primary) !important; box-shadow: none; }
.rf-home-intro.rf-hero-light .rf-hd-btn { background: var(--ro-primary-soft); color: var(--ro-primary) !important; border-color: transparent; }
/* picture on the right */
.rf-home-intro.has-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 30%); gap: 24px; align-items: center; }
.rf-home-intro-art img { display: block; }
@media screen and (max-width: 900px) {
  .rf-home-intro.has-art { grid-template-columns: 1fr; }
  .rf-home-intro-art { order: -1; }
  .rf-home-intro-art img { margin: 0 auto; }
}
@media screen and (max-width: 600px) {
  .rf-hd-btn span { display: none; }
  .rf-hd-btn { padding: 0 9px; }
  .rf-hd-panel { width: min(280px, calc(100vw - 48px)); }
}
/* homepage picture: a deliberate "card" (rounded, light frame, soft glow) so images with their own dark background look intended */
.rf-home-intro-art { display: flex; justify-content: center; }
.rf-home-intro-art img {
  width: auto !important; max-width: 100%; max-height: 220px !important; aspect-ratio: 1 / 1; object-fit: cover !important;
  border-radius: 20px !important; filter: none !important;
  border: 3px solid rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 40px rgba(8, 20, 45, .35), 0 0 60px rgba(120, 180, 255, .25);
  transform: rotate(-2deg); transition: transform .3s ease;
}
.rf-home-intro:hover .rf-home-intro-art img { transform: rotate(0deg) scale(1.02); }
.rf-home-intro.rf-hero-light .rf-home-intro-art img { border-color: #fff; box-shadow: 0 18px 40px rgba(23, 67, 118, .25); }
@media screen and (max-width: 900px) { .rf-home-intro-art img { max-height: 150px !important; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rf-home-intro-art img { transform: none !important; transition: none; } }

/* ---------- content blocks inserted by the editor "ReferOn" menu (shared by site and editor) ---------- */
.page-content ol.rf-steps, ol.rf-steps { list-style: none; counter-reset: rf-step; padding: 0 !important; margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
ol.rf-steps > li {
  counter-increment: rf-step; position: relative; padding: 14px 16px 14px 60px; border-radius: 10px;
  background: #F5FAFE; border: 1px solid #DBE9F8; margin: 0 !important;
}
ol.rf-steps > li::before {
  content: counter(rf-step); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: #235EA5; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
ol.rf-steps > li p { margin: 4px 0; }
ol.rf-steps > li img { margin-top: 8px; border-radius: 8px; }
.rf-ui {
  display: inline-block; padding: 1px 8px; border-radius: 6px; background: #235EA5; color: #fff !important;
  font-size: .9em; font-weight: 500; line-height: 1.5; white-space: nowrap; box-shadow: 0 1px 2px rgba(23, 67, 118, .3);
}
figure.rf-shot { display: table; margin: 16px 0; border-radius: 10px; overflow: hidden; border: 1px solid #DBE0E6; box-shadow: 0 8px 24px rgba(17, 24, 39, .08); background: #fff; }
figure.rf-shot::before { content: "\25CF \25CF \25CF"; display: block; padding: 6px 12px; font-size: 9px; letter-spacing: 3px; color: #CBD5E0; background: #F3F6FA; border-bottom: 1px solid #DBE0E6; }
figure.rf-shot img { display: block; margin: 0 !important; border-radius: 0 !important; }
figure.rf-shot figcaption { padding: 8px 12px; font-size: 13px; color: #5F6B7F; background: #fff; border-top: 1px solid #EDF1F5; }
.callout.rf-callout-new { background: #F3EEFF !important; color: #5B21B6 !important; }
iframe.rf-video-embed { width: 100%; max-width: 760px; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 24, 39, .12); }

/* ---------- article extras: meta line, feedback, related, "didn't find", glossary terms, heading links ---------- */
.rf-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--ro-text-muted); margin: 0 0 8px; }
.rf-page-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.rf-page-meta svg { width: 14px; height: 14px; fill: currentColor; margin: 0 !important; top: 0 !important; }
.rf-page-meta-ai { margin-left: auto; font-weight: 500; font-size: 13px; padding: 4px 10px; border-radius: 9999px; background: var(--ro-primary-soft); text-decoration: none !important; }
.rf-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0; padding: 14px 18px; border-radius: var(--ro-radius); background: var(--ro-surface); box-shadow: var(--ro-shadow); }
.rf-feedback-q { font-weight: 600; font-size: 14px; margin-right: 6px; }
.rf-feedback-btn { height: 34px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--ro-divider); background: var(--ro-bg); cursor: pointer; font-size: 14px; color: var(--ro-text); }
.rf-feedback-btn:hover { border-color: var(--ro-primary); background: var(--ro-primary-soft); }
.rf-feedback-thanks { color: #079455; font-size: 14px; font-weight: 500; }
.rf-related { margin: 20px 0; }
.rf-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.rf-related-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--ro-radius); background: var(--ro-surface); box-shadow: var(--ro-shadow); text-decoration: none !important; color: var(--ro-text) !important; transition: box-shadow .15s, transform .15s; }
.rf-related-item:hover { transform: translateY(-1px); box-shadow: var(--ro-shadow-active, var(--ro-shadow)); }
.rf-related-name { font-weight: 600; font-size: 14px; color: var(--ro-primary); }
.rf-related-item .rf-muted { font-size: 12px; }
.rf-notfound { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 28px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, #EBF5FE, #F5FAFE); border: 1px solid #DBE9F8; }
html.dark-mode .rf-notfound { background: var(--ro-surface); border-color: var(--ro-divider); }
.rf-notfound-text { display: flex; flex-direction: column; gap: 2px; }
.rf-notfound-text strong { font-size: 16px; }
.rf-notfound-text span { font-size: 14px; color: var(--ro-text-muted); }
.rf-notfound-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-notfound-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; background: var(--ro-surface); box-shadow: var(--ro-shadow); font-weight: 500; font-size: 14px; text-decoration: none !important; }
.rf-notfound-ai { background: #235EA5; color: #fff !important; }
.rf-term { border-bottom: 1px dashed var(--ro-primary); cursor: help; position: relative; }
.rf-term-tip {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: 300px;
  padding: 10px 12px; border-radius: 8px; background: #0F2A4D; color: #fff; font-size: 13px; line-height: 18px; font-weight: 400;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25); white-space: normal;
}
.rf-term-tip b { display: block; margin-bottom: 2px; }
.rf-term-tip a { display: inline-block; margin-top: 6px; color: #9DCCFA !important; font-size: 12px; }
.rf-term:hover .rf-term-tip, .rf-term:focus .rf-term-tip, .rf-term:focus-within .rf-term-tip { display: block; animation: rf-fade-in .12s ease-out; }
.page-content h2, .page-content h3 { position: relative; }
.rf-heading-link {
  margin-left: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  color: var(--ro-text-muted); font-size: 15px; font-weight: 600; opacity: 0; transition: opacity .15s; vertical-align: middle;
}
.page-content h2:hover .rf-heading-link, .page-content h3:hover .rf-heading-link, .rf-heading-link:focus { opacity: 1; }
.rf-heading-link:hover { background: var(--ro-primary-soft); color: var(--ro-primary); }
@media (hover: none) { .rf-heading-link { opacity: .5; } }
/* homepage "What's new" strip */
.rf-whatsnew {
  display: flex; align-items: center; gap: 12px; margin: -12px 0 24px; padding: 12px 18px; border-radius: 12px;
  background: var(--ro-surface); box-shadow: var(--ro-shadow); text-decoration: none !important; color: var(--ro-text) !important;
}
.rf-whatsnew:hover { box-shadow: var(--ro-shadow-active, var(--ro-shadow)); }
.rf-whatsnew-badge { flex-shrink: 0; padding: 3px 10px; border-radius: 9999px; background: #ECFDF3; color: #067647; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rf-whatsnew-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-whatsnew .rf-muted { font-size: 13px; white-space: nowrap; }
.rf-whatsnew-arrow { margin-left: auto; color: var(--ro-primary); }
@media screen and (max-width: 600px) {
  .rf-whatsnew { flex-wrap: wrap; gap: 4px 10px; margin-top: -8px; }
  .rf-whatsnew-arrow { display: none; }
  .rf-page-meta-ai { margin-left: 0; }
}

/* ---------- Ask AI in the ReferOn app style (flat primary, radius 6, soft icon tile) ---------- */
.rf-ai-icon { background: #EBF5FE !important; border-radius: 8px !important; }
.rf-ai-icon svg { fill: #235EA5 !important; width: 22px !important; height: 22px !important; margin: 0 !important; top: 0 !important; }
html.dark-mode .rf-ai-icon { background: rgba(157, 204, 250, .15) !important; }
html.dark-mode .rf-ai-icon svg { fill: #9DCCFA !important; }
.rf-ai-form { border-radius: 6px !important; padding: 4px !important; }
.rf-ai-form:focus-within { box-shadow: 0 0 0 3px #B8DBFF !important; }
.rf-ai-send { background: #235EA5 !important; border-radius: 6px !important; width: 40px !important; height: 40px !important; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rf-ai-send:hover { background: #174376 !important; }
.rf-ai-send:focus:not(:focus-visible) { outline: none; }
/* "Ask AI about this article": ReferOn secondary button (white, blue text, shadow); pressed = soft blue pill */
button.rf-page-meta-ai {
  display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 12px !important; border-radius: 6px !important;
  background: var(--ro-surface) !important; color: #235EA5 !important; font-size: 13px !important; font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06) !important; border: 0 !important; outline: none !important;
}
button.rf-page-meta-ai svg { width: 16px; height: 16px; fill: currentColor; margin: 0 !important; top: 0 !important; }
button.rf-page-meta-ai:hover { background: #CEE5FC !important; color: #174376 !important; }
button.rf-page-meta-ai[aria-expanded="true"] { background: #EBF5FE !important; color: #235EA5 !important; box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; }
button.rf-page-meta-ai:focus-visible { box-shadow: 0 0 0 3px #B8DBFF !important; }
html.dark-mode button.rf-page-meta-ai { color: #9DCCFA !important; }
.rf-notfound-ai { gap: 6px; border-radius: 6px !important; }
.rf-notfound-ai svg { width: 16px; height: 16px; fill: #fff; margin: 0 !important; top: 0 !important; }
.rf-notfound-btn { border-radius: 6px !important; }

/* ---------- tables in articles on phones: scroll sideways instead of squeezing words letter by letter ---------- */
@media screen and (max-width: 700px) {
  .page-content figure.table:not(:has(img[alt^="Refie" i])), .page-content > table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .page-content figure.table:not(:has(img[alt^="Refie" i])) table, .page-content > table { min-width: 560px; }
  .page-content table td, .page-content table th {
    hyphens: manual !important; -webkit-hyphens: manual !important; word-break: normal !important; overflow-wrap: normal !important;
    min-width: 96px; font-size: 14px; line-height: 20px; padding: 8px 10px !important;
  }
}
/* glossary tooltip: placed by script in a fixed layer, so table cells / scroll areas do not cut it */
.rf-term-tip.is-fixed { position: fixed !important; left: 0; top: 0; }
.rf-term-tip > span { display: block; } .rf-term-tip > a { display: block !important; }
/* edition switch: the chosen edition keeps its check mark; the blue highlight only when you are inside it */
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item.active:not(.is-here) { background: transparent !important; }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item.active:not(.is-here):hover { background: var(--ro-hover) !important; }
.referon-sidebar .rs-shelf-switch .dropdown-menu .icon-item.active:not(.is-here) .rs-shelf-code { background: var(--ro-primary-soft); color: var(--ro-primary); }

/* Phones: permissions form - core right-aligns "Owner" (250px) and "Override permissions for role" + select,
   which overflows the card on the left; stack them full width instead */
@media screen and (max-width: 999px) {
  form[action$="/permissions"] .flex-container-row.justify-flex-end { justify-content: flex-start !important; }
  form[action$="/permissions"] .flex-container-row.justify-flex-end > .form-group { width: 100%; }
  form[action$="/permissions"] .flex-container-row.justify-flex-end > .flex-container-row { flex-wrap: wrap; width: 100%; gap: 6px 12px !important; }
  form[action$="/permissions"] .flex-container-row.justify-flex-end select,
  form[action$="/permissions"] .dropdown-search { width: 100% !important; max-width: none !important; }
  /* import form: core min-width-l (wider than a phone) */
  main .flex-container-row:has(> .min-width-l) { flex-wrap: wrap !important; justify-content: flex-start !important; }
  main .min-width-l { min-width: 0 !important; width: 100%; max-width: 100%; flex: 1 1 100% !important; }
  main .min-width-l { justify-content: flex-start !important; }
  main .min-width-l > * { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  main input.custom-simple-file-input { width: 100% !important; max-width: 100%; }
}

/* Entity selector (Move / Copy / link picker): one white list in the ReferOn style instead of grey core boxes */
.entity-selector { border: 1px solid var(--ro-border) !important; border-radius: var(--ro-radius) !important; background: var(--ro-surface) !important; overflow: hidden; }
.content-wrap form .entity-selector input[type="text"], .entity-selector input[type="text"] {
  height: 44px; border: 0 !important; border-bottom: 1px solid var(--ro-divider) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 16px !important; font-size: 14px; background: var(--ro-surface) !important; width: 100%;
}
.content-wrap form .entity-selector input[type="text"]:focus, .entity-selector input[type="text"]:focus { box-shadow: inset 0 0 0 2px #B8DBFF !important; outline: none; }
.entity-selector .entity-list { background: var(--ro-surface) !important; }
.entity-selector .entity-list-item {
  border-radius: 0 !important; border-bottom: 1px solid var(--ro-divider) !important; background: var(--ro-surface) !important;
  margin: 0 !important; box-shadow: none !important;
}
.entity-selector .entity-list-item:last-child { border-bottom: 0 !important; }
.entity-selector .entity-list-item:hover { background: var(--ro-hover) !important; }
.entity-selector .entity-list-item.selected { background: var(--ro-primary-soft) !important; box-shadow: inset 3px 0 0 var(--ro-primary) !important; }
.entity-selector .entity-list-item.selected .entity-list-item-name { color: var(--ro-primary) !important; }
.entity-selector .entity-list-item:focus { outline: none; box-shadow: inset 0 0 0 2px #B8DBFF !important; }
.entity-selector .entity-list-item .entity-list-item-name { font-weight: 500; }
.entity-selector .entity-item-snippet p { color: var(--ro-text-muted); font-size: 13px; }
.entity-selector .entity-list > hr { display: none !important; }

/* Site bot findings (2026-10-01): contrast and phone tap targets */
/* "N pages" pill: the light chapter accents (teal, green, sky) were below 4.5:1 on white - darken the text only */
.rf-chapter-card .chapter-contents-toggle { color: color-mix(in srgb, var(--rf-accent) 70%, #000) !important; }
/* core warning text #cf4d03 is 4.45:1 - use the darker warning orange */
.text-warn { color: #B54708 !important; }
@media screen and (max-width: 999px) {
  /* collapsible homepage block titles: 44px tall tap area without changing the look */
  .rf-block > summary.rf-block-title { min-height: 44px; }
  /* search page: the magnifier button was 20x17 */
  .content-wrap form.search-box button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media screen and (max-width: 600px) {
  /* page editor toolbar: "Set Changelog" was cut off on phones - keep its pencil icon only */
  .page-edit-toolbar .justify-flex-end .icon-list-item > span:not(:first-child) { display: none !important; }
}

/* ---------- Settings -> Partners (partners.php) ---------- */
.rf-partners-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.rf-partners-bar form { display: flex; gap: 8px; align-items: center; margin: 0; }
.rf-partners-search input { width: 260px; max-width: 100%; }
.rf-partners-new input[type=text] { width: 240px; max-width: 100%; }
.rf-partners-list { display: flex; flex-direction: column; border-top: 1px solid var(--ro-border, #E2E8F0); }
.rf-partners-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--ro-border, #E2E8F0); color: inherit !important; text-decoration: none !important; }
.rf-partners-row:hover { background: var(--ro-primary-soft); }
.rf-partners-name { font-weight: 500; }
.rf-partners-count { color: var(--ro-text-muted); font-size: 13px; white-space: nowrap; }
.rf-partners-table { width: 100%; font-size: 14px; }
.rf-partners-table td, .rf-partners-table th { padding: 8px 6px; vertical-align: middle; word-break: break-word; }
.rf-partners-table tr.rf-partners-error td, .rf-partners-table tr.rf-partners-skipped td { color: #B42318; }
.rf-partners-table tr.rf-partners-link td, .rf-partners-table tr.rf-partners-linked td { color: var(--ro-text-muted); }
.rf-partners-add { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; }
.rf-partners-cred { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rf-partners-cred code { user-select: all; }
.rf-partners-sample { font-family: var(--font-code, monospace); font-size: 13px; line-height: 1.6; white-space: pre; padding: 12px 16px;
  border-radius: 8px; background: var(--ro-primary-soft); overflow-x: auto; }
.rf-partners-upload { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-start; }
.rf-partners-upload input[type=file] { max-width: 100%; }
@media (max-width: 700px) {
  .rf-partners-add { grid-template-columns: 1fr; }
  .rf-partners-bar form, .rf-partners-search input, .rf-partners-new input[type=text] { width: 100%; }
  .rf-partners-table thead { display: none; }
  .rf-partners-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--ro-border, #E2E8F0); }
  .rf-partners-table td { display: block; padding: 2px 0; border: 0; }
}

/* focus ring: none after a mouse click (core draws a dotted outline on :focus), a clean ReferOn ring for keyboard users */
:where(a, button, summary, [tabindex], .button, .entity-list-item, .icon-list-item, .card-footer-link):focus:not(:focus-visible) { outline: none !important; }
:where(a, button, summary, .button, .entity-list-item, .icon-list-item, .card-footer-link):focus-visible {
  outline: 2px solid var(--ro-primary) !important; outline-offset: 2px; border-radius: 6px;
}