/* Loaded after styles.css. Attribution stays within each image's own wrapper. */
body .image-credit,
body .card .image-credit,
body .rank-cover .image-credit,
body .feature-with-credit > .image-credit,
body .select-item > .image-credit,
body .story-art .image-credit,
body .volume-card .image-credit,
body .detail-cover > .image-credit {
  box-sizing:border-box; width:100%; max-width:100%; margin-left:0; margin-right:0;
  text-align:center; white-space:normal; overflow-wrap:anywhere;
  height:auto; min-height:0; overflow:visible; line-height:1.6;
}
/* Enough room for ordinary multi-line detail credits without clipping long ones. */
body .detail-cover > .image-credit { min-height:3.2em; }
body .gallery-thumbs .image-credit { display:none; }
/* Feature illustrations occupy the right portion of their banner. */
body .feature-with-credit > .image-credit {width:31%; margin-left:auto; margin-right:0;}
body .detail-cover > .cover {position:relative; overflow:hidden;}
.gallery-zoom {display:block; width:100%; height:100%; padding:0; border:0; border-radius:inherit; background:transparent; cursor:zoom-in; color:inherit;}
/* An asynchronous image failure appends this visual fallback beside the opener. */
body .detail-cover > .cover > .image-fallback {pointer-events:none;}
.gallery-zoom:focus-visible {outline:3px solid var(--pink,#e52e88); outline-offset:-4px;}
.gallery-arrow {position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:grid; place-items:center; width:38px; height:44px; padding:0; border:1px solid #d6e1ec; border-radius:9px; color:#253d59; background:#fffffff0; box-shadow:0 2px 9px #12264226; font-size:30px; line-height:1; cursor:pointer;}
.gallery-prev {left:5px;}.gallery-next {right:5px;}
@media(hover:hover) and (pointer:fine){.gallery-arrow:hover {background:#fff0f7;}}.gallery-arrow:focus-visible {outline:3px solid #e52e88; outline-offset:1px;}
dialog.gallery-lightbox {box-sizing:border-box; width:min(940px,calc(100vw - 24px)); max-width:940px; max-height:calc(100dvh - 24px); padding:12px; border-radius:14px; overflow:auto; color:#233951; background:#fff;}
.gallery-lightbox::backdrop {background:#122032db;}
.lightbox-toolbar {display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:9px;}
.lightbox-toolbar > span {min-width:0; overflow-wrap:anywhere;}
.lightbox-toolbar > button {flex-shrink:0; min-height:42px; padding:8px 13px; border:1px solid #d7e2ec; border-radius:8px; background:#f3f7fb; color:#243c58; font:inherit; cursor:pointer;}
.lightbox-stage {position:relative; display:flex; justify-content:center; align-items:center; height:min(68dvh,760px); min-height:100px; background:#f5f7fa; border-radius:9px;}
.lightbox-stage > img {display:block; width:100%; height:100%; object-fit:contain;}
.lightbox-stage > img[hidden],.lightbox-stage > p[hidden] {display:none!important;}
.lightbox-stage > p {max-width:70%; font-size:13px; text-align:center; line-height:1.8;}
.gallery-lightbox [data-lightbox-credit] {max-width:100%; margin-top:8px;}
body .gallery-lightbox .image-credit {font-size:12px; margin-bottom:0;}
.tag-picker {min-width:0; margin:18px 0 16px; padding:0; border:0;}
.tag-picker legend {padding:0; font-size:15px; font-weight:800; color:#293f5c;}
.tag-picker-note {margin:5px 0 12px; color:#65738b; font-size:12px; line-height:1.7;}
.tag-search-label {display:flex; flex-direction:column; gap:5px; max-width:none; font-size:12px; font-weight:700;}
.tag-search-label input {width:100%; box-sizing:border-box; min-height:43px; border:1px solid #dce5ef; border-radius:9px; padding:10px 12px; background:#f8fbff; color:#243950; font:inherit; font-weight:400;}
.selected-tags {display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:12px 0; min-height:44px; font-size:12px; color:#61738b;}
.selected-tags button {min-height:34px; max-width:100%; padding:6px 10px; border:1px solid #f1b4d2; border-radius:7px; color:#a92064; background:#fff0f7; white-space:normal; overflow-wrap:anywhere; font:inherit; cursor:pointer;}
.selected-tags .tag-clear {border-color:#dce4ee; color:#53667e; background:#fff;}
.tag-categories {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; align-items:start;}
.tag-category {min-width:0; padding:12px; border:1px solid #e4ebf3; border-radius:10px; background:#fbfdff;}
.tag-category h3 {margin:0 0 9px; font-size:12px; font-weight:800; color:#4a607c;}
.tag-category-header {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; margin-bottom:9px;}
.tag-category-header h3 {margin:0;}
.tag-category-header [data-tag-expand] {min-height:36px; font-size:11px; padding:5px 9px;}
.tag-options {display:flex; flex-wrap:wrap; gap:7px;}
.filter-tag {display:inline-flex; align-items:center; gap:5px; max-width:100%; min-height:44px; padding:7px 9px; border:1px solid #d9e4ee; border-radius:8px; color:#405670; background:#fff; font:inherit; font-size:12px; line-height:1.6; text-align:left; cursor:pointer;}
.filter-tag > span:not(.tag-check) {min-width:0; white-space:normal; overflow-wrap:anywhere;}
.tag-check {flex-shrink:0; font-weight:800; color:#8192a6;}
.filter-tag small {color:#8492a4; flex-shrink:0; font-size:10px;}
.filter-tag.is-selected {border-color:#ea75ac; background:#fff0f7; color:#aa1c61; box-shadow:inset 0 0 0 1px #f5b9d5;}
.filter-tag.is-selected .tag-check {color:#ca2476;}
.filter-tag:focus-visible,.selected-tags button:focus-visible,[data-tag-expand]:focus-visible {outline:3px solid #197fbd; outline-offset:2px;}
.tag-picker-footer {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px; margin-top:12px; color:#6e7d91; font-size:11px;}
[data-tag-expand] {min-height:38px; border:1px solid #d5e3ee; border-radius:8px; padding:7px 14px; color:#267fa9; background:#f1faff; font:inherit; font-weight:700; cursor:pointer;}
.tag-no-match {grid-column:1/-1; padding:18px; background:#f6f9fc; border-radius:9px; font-size:12px;}
@media(max-width:639px) {
  body .feature-with-credit > .image-credit {width:27%;}
  .tag-categories {grid-template-columns:minmax(0,1fr); gap:10px;}
  .tag-category {padding:10px;}.tag-picker-note {font-size:11px;}
  .filter-tag {font-size:12px; min-height:44px;}
  .tag-category-header [data-tag-expand] {min-height:44px;}
  .gallery-arrow {width:34px; height:42px;}
  dialog.gallery-lightbox {width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:10px;}
  .lightbox-stage {height:64dvh;}.lightbox-toolbar {font-size:11px; gap:8px;}
  body .gallery-lightbox .image-credit {font-size:11px;}
}

/* Detail-only refinement: reserve real space for main-image arrows outside the cover. */
body .detail-cover.gallery-has-arrows {
  --gallery-control-size:44px; --gallery-control-gap:6px;
  display:grid; grid-template-columns:var(--gallery-control-size) minmax(0,1fr) var(--gallery-control-size);
  column-gap:var(--gallery-control-gap); align-items:start;
}
body .detail-cover.gallery-has-arrows > .cover {grid-column:2; grid-row:1; width:100%; margin:0;}
body .detail-cover.gallery-has-arrows > .gallery-arrow {
  position:static; transform:none; top:auto; left:auto; right:auto;
  grid-row:1; align-self:center; justify-self:center; width:44px; height:44px; margin:0;
}
body .detail-cover.gallery-has-arrows > .gallery-prev {grid-column:1;}
body .detail-cover.gallery-has-arrows > .gallery-next {grid-column:3;}
body .detail-cover.gallery-has-arrows > .image-credit {grid-column:2; grid-row:2; width:100%;}
body .detail-cover.gallery-has-arrows > .gallery-thumbs {grid-column:1/-1; grid-row:3; justify-content:center;}
@media(min-width:1024px) {
  .page-detail .details-hero.has-gallery-arrows {grid-template-columns:320px minmax(0,1fr) 240px;}
}
@media(min-width:640px) and (max-width:1023px) {
  .page-detail .details-hero.has-gallery-arrows {grid-template-columns:280px minmax(0,1fr);}
}
@media(max-width:639px) {
  body .page-detail .detail-cover.gallery-has-arrows {width:100%; max-width:345px; margin-inline:auto;}
}
/* Work identification stays visible in cross-work character rankings. */
.page-detail #detail-content .char-card > .char-work {display:none;}

/* Measure collapsed category rows; hidden tags leave both layout and focus order. */
.tag-category-row{display:flex;align-items:flex-start;column-gap:7px;min-width:0;width:100%;}
.tag-category-row > .tag-options{min-width:0;flex:1;}
.tag-category-row > [data-tag-expand]{flex:0 0 auto;max-width:100%;min-height:44px;padding:7px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;}
[data-tag-expanded="false"][data-tag-searching="false"] .tag-options{flex-wrap:nowrap;max-width:var(--tag-row-available,100%);}
[data-tag-expanded="false"][data-tag-searching="false"] .filter-tag{flex:0 0 auto;max-width:var(--tag-row-available,100%);}
[data-tag-expanded="false"][data-tag-searching="false"] .filter-tag > span:not(.tag-check){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tag-options[hidden],.tag-options > [hidden],.tag-category-row > [hidden]{display:none!important;}
.tag-category-row > .tag-options:has(> [data-filter-tag]:not([hidden])){min-width:0;}

/* Swipe only the main frame. Do not disable vertical scrolling or native pinch zoom. */
.gallery-swipe-frame{touch-action:pan-y pinch-zoom}
.gallery-arrow{-webkit-tap-highlight-color:transparent}
@media(hover:none),(pointer:coarse){.gallery-arrow,.gallery-arrow:hover,.gallery-arrow:active,.gallery-arrow:focus{background:#fffffff0;color:#253d59}}