/* Content spacing for the drama theme. Reader, payment and member layouts keep
   their own geometry; these rules only normalize novel / manga components. */
.dr-theme {
  --dr-page-inset: 16px;
  --dr-section-gap: 24px;
  --dr-content-gap: 16px;
  --dr-grid-gap: 12px;
  --dr-grid-row-gap: 20px;
}
@media (max-width: 360px) {
  .dr-theme { --dr-page-inset: 12px; }
}

/* Standalone collections need a page gutter. The floating back control is not
   a section; reserve its own top strip instead of using sibling margins. */
.dr-theme:is([data-dr-route="art/index"], [data-dr-route="art/type"], [data-dr-route="art/show"], [data-dr-route="art/search"], [data-dr-route="manga/index"], [data-dr-route="manga/type"], [data-dr-route="manga/show"]) .dr-main {
  padding-inline: var(--dr-page-inset);
  padding-block-start: var(--dr-page-inset);
}
.dr-theme:is([data-dr-route="art/index"], [data-dr-route="art/type"], [data-dr-route="art/show"], [data-dr-route="art/search"], [data-dr-route="manga/index"], [data-dr-route="manga/type"], [data-dr-route="manga/show"]) .dr-main:has(> .dr-floating-back) {
  padding-block-start: calc(48px + var(--dr-page-inset) + env(safe-area-inset-top));
}
.dr-theme .dr-catalog-hub { padding-inline: var(--dr-page-inset); }

/* Count only visible content blocks. Ads, floating controls and hidden panels
   must not create a leading section gap or break the space between sections. */
.dr-theme:is([data-dr-route^="art/"], [data-dr-route^="manga/"]) .dr-main > :is(.nv-dock, .nv-sec, .mc-sec, .bili-sec),
.dr-theme .dr-catalog-panel:is([data-kind="art"], [data-kind="manga"]) > :is(.nv-dock, .nv-sec, .mc-sec, .bili-sec) {
  margin-block: 0;
}
.dr-theme:is([data-dr-route^="art/"], [data-dr-route^="manga/"]) .dr-main > :is(.nv-dock, .nv-sec, .mc-sec, .bili-sec):not([hidden]) ~ :is(.nv-dock, .nv-sec, .mc-sec, .bili-sec):not([hidden]),
.dr-theme .dr-catalog-panel:is([data-kind="art"], [data-kind="manga"]) > :is(.nv-dock, .nv-sec, .mc-sec, .bili-sec):not([hidden]) ~ :is(.nv-dock, .nv-sec, .mc-sec, .bili-sec):not([hidden]) {
  margin-block-start: var(--dr-section-gap);
}
.dr-theme [data-component="novel_home_rank"].nv-sec,
.dr-theme:is([data-dr-route^="art/"], [data-dr-route^="manga/"]) .bili-sec--card {
  padding: var(--dr-content-gap);
}
.dr-theme .nv-dock { gap: var(--dr-grid-gap); }
.dr-theme .nv-dock__text { min-width: 0; overflow-wrap: anywhere; }

/* Component headings, rather than all h2 elements, own the content rhythm. */
.dr-theme :is([data-component="novel_home_rank"], [data-component="manga_home_row"], [data-component="manga_home_rank_tags"], [data-component="manga_home_spotlight"]) > :is(.nv-sec__head, .mc-sec__head) {
  margin-block: 0 var(--dr-content-gap);
  padding-inline: 0;
  min-width: 0;
}
.dr-theme:is([data-dr-route^="art/"], [data-dr-route^="manga/"]) .bili-sec > .bili-sec__head,
.dr-theme .dr-catalog-panel:is([data-kind="art"], [data-kind="manga"]) .bili-sec > .bili-sec__head {
  margin: 0 0 var(--dr-content-gap) !important;
  padding: 0;
  column-gap: var(--dr-grid-gap);
  min-width: 0;
}
.dr-theme :is(.nv-sec__intro, .nv-sec__titles, .mc-sec__intro, .bili-sec__head-main) { min-width: 0; }
.dr-theme :is(.nv-sec__title, .mc-sec__title, .pb-art-list .pb-art-card__title, .pb-manga-list .pb-manga-card__title) { overflow-wrap: anywhere; }
.dr-theme:is([data-dr-route^="art/"], [data-dr-route^="manga/"]) .bili-sec__title,
.dr-theme .dr-catalog-panel:is([data-kind="art"], [data-kind="manga"]) .bili-sec__title {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dr-theme :is(.nv-sec__more, .mc-sec__more),
.dr-theme:is([data-dr-route^="art/"], [data-dr-route^="manga/"]) .bili-sec__head > .more {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Manga carousel and ranking headings share the same left edge as covers. */
.dr-theme [data-component="manga_home_row"] .mc-row__viewport {
  padding: 0 0 4px;
  scroll-padding-inline: 0;
}
.dr-theme [data-component="manga_home_row"] .mc-row__track { gap: var(--dr-grid-gap); }
.dr-theme [data-component="manga_home_rank_tags"] .mc-rank-panels { padding-inline: 0; }
.dr-theme [data-component="manga_home_rank_tags"] .mc-sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dr-content-gap) var(--dr-grid-gap);
}
.dr-theme [data-component="manga_home_rank_tags"] .mc-sec__actions { display: contents; }
.dr-theme [data-component="manga_home_rank_tags"] .mc-sec__more { grid-area: 1 / 2; }
.dr-theme [data-component="manga_home_rank_tags"] .mc-rank-tabs {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

/* Existing list styles contain responsive !important gaps. Match that priority
   only here, preserving their existing column counts and cover proportions. */
.dr-theme :is(.pb-art-list, .pb-manga-list),
.dr-theme [data-component="manga_home_rank_tags"] .mc-rank-grid,
.dr-theme :is(.pb-media-related--art, .pb-media-related--manga) .pb-media-related__grid {
  column-gap: var(--dr-grid-gap) !important;
  row-gap: var(--dr-grid-row-gap) !important;
}

/* Keep detail heroes full width; inset their chapter / introduction panels and
   related collections consistently without altering reading or purchase UI. */
.dr-theme :is([data-component="art_detail"], [data-component="art_detail_novel"], [data-component="manga_detail"]) {
  margin-block-end: 0;
}
.dr-theme :is([data-component="art_detail"], [data-component="art_detail_novel"], [data-component="manga_detail"]) > .media-panel--cinema,
.dr-theme :is(.pb-media-related--art, .pb-media-related--manga).media-panel--cinema {
  margin: var(--dr-section-gap) var(--dr-page-inset) 0;
  padding: var(--dr-content-gap);
  width: calc(100% - 2 * var(--dr-page-inset));
}
.dr-theme :is([data-component="art_detail"], [data-component="art_detail_novel"], [data-component="manga_detail"], .pb-media-related--art, .pb-media-related--manga) .media-panel__title {
  margin: 0 0 var(--dr-content-gap);
  padding: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dr-theme :is([data-component="art_detail"], [data-component="art_detail_novel"], [data-component="manga_detail"]) .media-hero__title-row {
  min-width: 0;
  gap: var(--dr-grid-gap);
}
.dr-theme :is([data-component="art_detail"], [data-component="art_detail_novel"], [data-component="manga_detail"]) .media-hero__title {
  min-width: 0;
  overflow-wrap: anywhere;
}