/* 站点运营配置 (inc/site-ops.php): header 登录 / 下载APP, logo mark, search page bits, and the skin mapping for
 * sk-fleet-agent's ops UI (float / play ad / free-episode / comments).
 * One markup for all layouts; looks follow each header (classic .xh-nav / showcase .sc-header / apptab .ap-nav). */

.xh-acts { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.xh-acts-login { font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--xh-muted); }
.xh-acts-login:hover { color: var(--xh-text); }
.xh-acts-dl {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 999px;
  background: var(--xh-amber); color: var(--xh-on-accent, #fff); font-weight: 600;
}
.xh-acts-dl { height: 30px; padding: 0 12px; font-size: 13px; }
.xh-acts-dl:hover { background: var(--xh-amber-2, var(--xh-amber)); color: var(--xh-on-accent, #fff); }
.xh-acts-dl svg { width: 16px; height: 16px; flex-shrink: 0; }
.xh-logo-ico { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; margin-right: 8px; object-fit: cover; }

/* —— classic 8 layouts —— */
@media (max-width: 600px) {
  /* row 1: brand · actions, row 2: nav links (scroll), row 3: search */
  .xh-nav:has(.xh-acts) .xh-acts { order: 1; margin-left: auto; gap: 12px; }
  .xh-nav:has(.xh-acts) .xh-nav-links { order: 2; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .xh-nav:has(.xh-acts) .xh-nav-links::-webkit-scrollbar { display: none; }
}

/* —— showcase —— */
.sc-header .xh-acts { gap: 12px; }
.sc-header .xh-acts-login { font-size: 13px; font-weight: 400; color: var(--sc-nav); }
.sc-header .xh-acts-login:hover { color: var(--sc-fg); }
.sc-header .xh-acts-dl { height: 28px; padding: 0 10px; font-size: 12px; background: var(--sc-cta); color: #fff; }
@media (max-width: 767px) {
  /* row 1 keeps logo · search; row 2 = tab nav (scrolls) · actions */
  .sc-header-row:has(.xh-acts)::after { content: ""; order: 2; flex-basis: 100%; }
  .sc-header-row:has(.xh-acts) .sc-nav { flex: 1 1 0; min-width: 0; margin-right: 0; padding-right: 8px; }
  .sc-header .xh-acts { order: 4; height: 46px; }
}
@media (min-width: 768px) {
  .sc-header .xh-acts { gap: 20px; margin-left: -12px; }
  .sc-header .xh-acts-login { font-size: 14px; }
  .sc-header .xh-acts-dl { height: 36px; padding: 0 16px; font-size: 14px; font-weight: 500; }
}

/* —— apptab —— */
.ap-brand { display: inline-flex; align-items: center; }
.ap-nav-r .xh-acts { gap: 8px; }
.ap-nav-r .xh-acts-login { font-size: 14px; color: var(--ap-f4); }
.ap-nav-r .xh-acts-login:hover { color: var(--ap-f2); }
.ap-nav-r .xh-acts-dl { height: 32px; color: var(--ap-on-acc); }
@media (min-width: 768px) {
  .ap-nav-r .xh-acts { gap: 12px; }
  .ap-nav-r .xh-acts-dl { height: 36px; padding: 0 16px; font-size: 14px; }
}
@media (max-width: 767px) {
  /* open search box needs the whole bar */
  html.ap-js .ap-search.is-open ~ .xh-acts,
  html.ap-js .ap-nav-in:has(.ap-search.is-open) .xh-logo-ico { display: none; }
}

/* —— sk-fleet-agent ops UI (float / overlays / comments) in skin colours; the plugin only reads --sk-ops-* with fallbacks. —— */
body {
  --sk-ops-bg: var(--xh-elev);
  --sk-ops-fg: var(--xh-text);
  --sk-ops-muted: var(--xh-muted);
  --sk-ops-accent: var(--xh-amber);
  --sk-ops-accent-fg: #fff;
  --sk-ops-border: var(--xh-line);
  --sk-ops-radius: 12px;
}
/* the float always followed --xh-on-accent (tangerine: dark text); overlays / comments stay white-on-accent */
.sk-dl-float { --sk-ops-accent-fg: var(--xh-on-accent, #fff); }
/* skin hover shade instead of the plugin's brightness() (higher specificity: load order vs plugin sheets varies) */
body .sk-op-btn:hover { background: var(--xh-amber-2, var(--xh-amber)); filter: none; }
body .sk-dl-float:hover { background: var(--xh-amber-2, var(--xh-amber)); filter: none; }
/* showcase column spaces its children with flex gap */
.sc-detail-col .sk-cmts { margin: 0; }
@media (max-width: 767px) {
  body.layout-apptab .sk-dl-float { bottom: calc(64px + 12px + env(safe-area-inset-bottom)); } /* clear the bottom tab bar */
}

/* —— search page (classic) —— */
.xh-search-head { margin-bottom: 14px; }
.xh-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0; font-size: 13px; }
.xh-pager .page-numbers {
  min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--xh-radius, 4px); background: var(--xh-elev); color: var(--xh-muted);
}
.xh-pager .page-numbers.current { background: var(--xh-amber); color: var(--xh-on-accent, #fff); }
.xh-pager a.page-numbers:hover { color: var(--xh-text); }