/* ===========================================================================
 * region-live.css — region picker modal styles for the snapshot-derived live
 * pages (home_live.html / best_live.html), which ship their own CSS bundle and
 * do NOT load site.css. Rules are copied 1:1 from site.css's REGION PICKER
 * MODAL section with the tokens.css custom properties resolved to concrete
 * values, so the existing region_modal.html + region.js work unchanged here.
 * Scoped to .region-modal* / .region-item* (plus the .hidden helper region.js
 * toggles) so it can't affect the surrounding scraped chrome.
 * ========================================================================= */
.hidden { display: none !important; }

.region-modal {
  position: fixed;
  inset: 0;
  z-index: 99999; /* above the scraped sticky chrome on the live pages */
  background: rgba(34, 34, 34, .98);
  padding: 24px 32px 40px;
  overflow-y: auto;
}
.region-modal__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}
.region-modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(720px, 80vw);
  padding: 12px 16px;
  background: #fff;
  border-radius: 4px;
  color: #333;
}
.region-modal__search input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 14px;
  background: transparent;
  color: #222;
}
.region-modal__clear,
.region-modal__close {
  color: #a8a8a8;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  background: none;
  border: 0;
}
.region-modal__clear { color: #999; }
.region-modal__close { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); }
.region-modal__close:hover,
.region-modal__clear:hover { color: #fff; }

.region-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 24px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.region-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none; /* live page has no site.css reset → kill the default underline */
  transition: background-color .12s, color .12s;
}
.region-item a:hover,
.region-item a:focus-visible {
  color: #fff;
  background: #2b2b2b;
  text-decoration: none;
}
.region-item a.is-active { color: #fff; background: #de2600; }
.region-item a.is-active:hover { background: #c42200; }
.region-item__flag { font-size: 16px; line-height: 1; }
.region-item__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region-modal__empty { text-align: center; color: #8c8c8c; margin-top: 32px; }

/* =========================================================================
   Light-theme readability fixes.
   The snapshot pages reuse our custom dark-skin components, which hardcode
   light (#fff/#ddd) text. When the visitor switches to the light theme
   (html.light → white page background), white-on-transparent text becomes
   invisible. Flip those specific bits to dark. Dark-background pills
   (pager / filter buttons / date-links) keep their own colors — they read
   fine on white — and channels' name overlay (.title-in-thumb, white text on
   a dark gradient) is deliberately left alone.
   Loaded by every *_live page, so this is the single place that fixes them all.
   ========================================================================= */
html.light .cat-head h2,
html.light .ch-head h2 { color: #1a1a1a; }
html.light .cat-head .cat-count,
html.light .ch-count { color: #707070; }

/* directory-card names that sit on the (now white) page bg, NOT on a thumb
   gradient (channels uses .title-in-thumb → excluded). */
html.light .thumb-block-profile:not(.title-in-thumb) .profile-name a { color: #1a1a1a; }

/* tag index links ("All tags" grid) */
html.light .tags-list a,
html.light .tags-list a b { color: #1a1a1a; }

/* 统计文字("Top N pornstars…" / "N profiles"):对齐源站——纯文字、无背景。
   源站 .btn.btn-text 白字(亮色不可读),这里只翻成深字;背景保持透明(源站 background:0 0)。 */
html.light .btn-text { color: #1a1a1a !important; background: transparent !important; }

/* =========================================================================
   Profile/pornstar index cards (/pornstars, /profiles): collapse the empty
   vertical band the scraped desktop skin reserves under the name. That skin
   keeps room for an "about-me" bio + subscribe strip we don't render —
   .with-about-me .thumb-under{padding-bottom:55px}, .thumb-block-profile
   .thumb-under{min-height:38px} and .profileslist .thumb-block{padding-bottom:10px}
   — so without that content it's just dead space below the avatar/name/count.
   Selectors mirror the scraped ones (region-live.css loads last, so equal
   specificity wins). Channels are excluded: their .title-in-thumb cards overlay
   the name on the thumb and a more specific min-height:inherit rule still wins. */
#page .mozaique.profileslist.with-about-me .thumb-block .thumb-under,
.x-overlay .mozaique.profileslist.with-about-me .thumb-block .thumb-under { padding-bottom: 0; }
body .mozaique .thumb-block.thumb-block-profile .thumb-under { min-height: 0; }
.mozaique.profileslist .thumb-block { padding-bottom: 0; }
/* the card box itself carries the base .thumb-block{padding:10px 2px} top/bottom
   gutter; drop the vertical part on profile cards (keep the 2px sides). Channels
   (.title-in-thumb) keep theirs. */
.mozaique .thumb-block.thumb-block-profile:not(.title-in-thumb) { padding-top: 0; padding-bottom: 0; }

/* =========================================================================
   Mobile: the filter-bar headline (e.g. "Pornstars, models, and cam girls
   being watched in United States") is rendered as a .btn pill, which inherits
   white-space:nowrap from the scraped skin. The long localized string then
   can't wrap and forces a min-content width (~437px) wider than a phone
   viewport, blowing up the layout viewport and shrinking the whole page.
   It's a static label (not an interactive dropdown like .btn-profiles-date-links),
   so letting it wrap on narrow screens is safe and keeps the page at true
   device width. Scoped to the headline label via .btn-text. The scraped skin
   pins nowrap with an #id selector (#page .ordered-label-list .btn), so we must
   match that specificity and force it. */
@media (max-width: 767px) {
  #page .ordered-label-list .btn-text { white-space: normal !important; }
}

/* =========================================================================
   Mobile: the /profiles (profileslist) grid. The scraped desktop skin pins
   .mozaique.profileslist .thumb-block to { width:auto!important; float:none }
   — that's the desktop "list with about-me bio" layout, one full-width row per
   profile. Our cards carry no about-me text (just avatar + name + count), so on
   a phone that rule leaves a single column of oversized cards, whereas the
   official mobile site shows a 2-column grid. Restore the 2-up grid on narrow
   screens. Must out-specify + !important the scraped !important rule. */
@media (max-width: 767px) {
  #page .mozaique.profileslist {
    display: grid;
    /* minmax(0,1fr), not 1fr (= minmax(auto,1fr)): the auto floor lets a card's
       content min-width grow its column, so the two tracks come out unequal and
       the square thumbs render at different sizes. 0 floor forces equal tracks. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 6px;
  }
  /* hand the cards back to the grid: the scraped !important width/float (and the
     base float:left;width:25%) would otherwise fight the tracks and wrap. */
  #page .mozaique.profileslist .thumb-block {
    width: auto !important;
    float: none !important;
    display: block;
    margin: 0;
  }
}

/* ---- /my-feed 两段式:上=订阅用户头像栏,下=其视频 ------------------------ */
.sub-entities-block { margin: 6px 0 2px; }
.sub-entities-title,
.sub-videos-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; margin: 18px 0 10px;
}
.sub-entities-title .icon-f,
.sub-videos-title .icon-f { opacity: .65; }
.sub-entities-empty { padding: 10px 2px 16px; opacity: .6; font-size: 13px; }
/* 头像栏卡片复用 .thumb-block-profile;加点呼吸位即可 */
.sub-entities-grid { margin-bottom: 8px; }