/*
 * Community contribution entries: buttons on every public page and one preview dialog per page.
 * Only --zb-* tokens are used, because the game page root has none of the --tagsmod-* discovery tokens.
 * Every selector starts at .zbui so it outranks the genre pages' icon size and focus rules.
 * Dashed borders mean "this can be filled in"; amber marks the "coming soon" state.
 */

/* ---- Triggers ---- */
.zbui .tagsmod-contrib-trigger { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; max-width: 100%; margin: 0; padding: 0 14px; border: 1px solid transparent; border-radius: var(--zb-radius-pill); background: transparent; color: var(--zb-text-soft); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--zb-duration-fast) var(--zb-ease), border-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease), transform var(--zb-duration-fast) var(--zb-ease), box-shadow var(--zb-duration-fast) var(--zb-ease); }
.zbui .tagsmod-contrib-trigger .tagsmod-ico { width: 16px; height: 16px; flex: none; }
.zbui .tagsmod-contrib-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zbui .tagsmod-contrib-trigger:active { transform: translateY(1px); }
.zbui :is(.tagsmod-contrib-trigger, .tagsmod-contrib-row, .tagsmod-contrib-tile, .tagsmod-contrib-pill, .tagsmod-contrib-iconbtn, .tagsmod-contrib-primary):focus-visible { outline: 2px solid var(--zb-primary); outline-offset: 2px; box-shadow: none; }
.zbui .tagsmod-contrib-trigger--soft { border-color: var(--zb-primary-soft-border); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); font-weight: 600; }
.zbui .tagsmod-contrib-trigger--soft:hover { border-color: var(--zb-primary-soft-border-strong); color: var(--zb-primary-soft-text); }
.zbui .tagsmod-contrib-trigger--ghost, .zbui .tagsmod-contrib-trigger--icon { border-color: var(--zb-border); background: var(--zb-surface); }
.zbui .tagsmod-contrib-trigger--ghost:hover, .zbui .tagsmod-contrib-trigger--icon:hover { border-color: var(--zb-primary-soft-border-strong); color: var(--zb-text); }
.zbui .tagsmod-contrib-trigger--icon { width: 36px; padding: 0; }
.zbui .tagsmod-contrib-trigger--link { min-height: 28px; padding: 0 8px; border-radius: var(--zb-radius-sm); color: var(--zb-text-muted); font-size: 12.5px; }
.zbui .tagsmod-contrib-trigger--link .tagsmod-ico { width: 14px; height: 14px; }
.zbui .tagsmod-contrib-trigger--link:hover { background: var(--zb-primary-soft); color: var(--zb-link); }
.zbui .tagsmod-contrib-trigger--chip { min-height: 30px; padding: 0 12px 0 9px; border: 1px dashed var(--zb-field-border); background: transparent; color: var(--zb-text-soft); font-size: 12.5px; }
.zbui .tagsmod-contrib-trigger--chip .tagsmod-ico { width: 14px; height: 14px; color: var(--zb-text-muted); }
.zbui .tagsmod-contrib-trigger--chip:hover { border-style: solid; border-color: var(--zb-primary-soft-border-strong); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.zbui .tagsmod-contrib-trigger--chip:hover .tagsmod-ico { color: inherit; }
.zbui .tagsmod-contrib-trigger--type { min-height: 30px; padding: 0 11px 0 9px; border-color: var(--zb-border); background: var(--zb-surface); color: var(--zb-text-soft); font-size: 12.5px; }
.zbui .tagsmod-contrib-trigger--type .tagsmod-ico { width: 14px; height: 14px; color: var(--zb-success-soft-text); }
.zbui .tagsmod-contrib-trigger--type:hover { border-color: var(--zb-success-soft-border); background: var(--zb-success-soft); color: var(--zb-text); }
[data-bs-theme="dark"] .zbui .tagsmod-contrib-trigger--type .tagsmod-ico { color: #63d9b4; }
[data-bs-theme="dark"] .zbui .tagsmod-contrib-trigger--type:hover { border-color: rgb(12 188 135 / 40%); background: rgb(12 188 135 / 14%); }
.zbui .tagsmod-contrib-trigger--xs { min-height: 26px; padding: 0 8px; font-size: 12px; }
.zbui .tagsmod-contrib-trigger--xs .tagsmod-ico { width: 13px; height: 13px; }
.zbui .tagsmod-contrib-trigger--lg { min-height: 44px; padding: 0 18px; border-radius: var(--zb-radius-md); font-size: 14px; }
@media (pointer: coarse) {
    .zbui :is(.tagsmod-contrib-trigger--soft, .tagsmod-contrib-trigger--ghost) { min-height: 40px; }
    .zbui .tagsmod-contrib-trigger--icon { width: 40px; min-height: 40px; }
    .zbui :is(.tagsmod-contrib-trigger--chip, .tagsmod-contrib-trigger--type) { min-height: 34px; }
}

/* ---- Placement on existing pages ---- */
.zbui .tagsmod-contrib-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.zbui .tagsmod-hero .tagsmod-contrib-bar { margin-top: 16px; }
/* Card heads that gained an action may wrap at 320px instead of overflowing. */
.zbui .tagsmod-contrib-head { flex-wrap: wrap; row-gap: 8px; }
.zbui .tagsmod-contrib-head-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.zbui .tagsmod-contrib-head > .tagsmod-contrib-trigger { margin-left: auto; }
.zbui .tagsmod-taxonomy-badges > .tagsmod-contrib-trigger { align-self: center; }
.zbui .tagsmod-tags-list ~ .tagsmod-contrib-trigger { margin-top: 12px; }
.zbui .tagsmod-tags-toggle ~ .tagsmod-contrib-trigger { margin-left: 6px; }
.zbui :is(.tagsmod-preview-empty, .tagsmod-cover-empty) .tagsmod-contrib-trigger { margin-top: 6px; }
.zbui .tagsmod-contrib-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--zb-border); }
.zbui .tagsmod-contrib-foot .tagsmod-contrib-trigger--link { margin-left: -8px; }
.zbui .tagsmod-contrib-foot .tagsmod-contrib-trigger--link + .tagsmod-contrib-trigger--link { margin-left: 0; }
/* The trailing tile in the screenshot strip matches the thumbnails it follows. */
.zbui .tagsmod-gallery-add { display: flex; flex: 0 0 clamp(86px, 13vw, 132px); aspect-ratio: 16 / 9; }
.zbui .tagsmod-contrib-trigger--tile { width: 100%; height: 100%; min-height: 0; padding: 0; border: 1.5px dashed var(--zb-field-border); border-radius: var(--zb-radius-sm); background: var(--zb-surface-sunken); color: var(--zb-text-muted); }
.zbui .tagsmod-contrib-trigger--tile .tagsmod-ico { width: 20px; height: 20px; }
.zbui .tagsmod-contrib-trigger--tile:hover { border-color: var(--zb-primary-soft-border-strong); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.zbui .tagsmod-feature-resource:has(> .tagsmod-contrib-trigger) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; }
.zbui .tagsmod-feature-resource > .tagsmod-contrib-trigger { color: var(--zb-link); }
.zbui .tagsmod-contrib-resources { margin-top: var(--zb-space-sm); padding-top: var(--zb-space-sm); border-top: 1px dashed var(--zb-border); }
.zbui .tagsmod-contrib-resources-title { margin: 0 0 8px; color: var(--zb-text-muted); font-size: 12.5px; line-height: 1.5; }
.zbui .tagsmod-contrib-resource-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zbui .tagsmod-section-actions > .tagsmod-contrib-trigger { flex: none; }
/* Section-head actions match the discovery "more" link beside them. */
.zbui .tagsmod-section-actions > .tagsmod-contrib-trigger--link { min-height: 36px; padding: 0 12px; border-radius: var(--zb-radius-pill); font-size: 13px; }
.zbui .tagsmod-section-actions > .tagsmod-contrib-trigger--link .tagsmod-ico { width: 15px; height: 15px; }
.zbui .tagsmod-genre-empty > .tagsmod-contrib-trigger { margin-top: 10px; }
.zbui .tagsmod-contrib-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 6px 0 0; color: var(--zb-text-muted); font-size: 13px; }
.zbui .tagsmod-contrib-hint .tagsmod-contrib-trigger--link { color: var(--zb-link); }

/* ---- "Help improve" card: one compact row, chips only for real gaps ---- */
.zbui .tagsmod-contrib-panel { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; margin: var(--zb-space-xl) 0 0; padding: 14px 16px; border: 1px dashed var(--zb-field-border); border-radius: var(--zb-radius-xl); background: var(--zb-surface); color: var(--zb-text); }
.zbui.tagsmod-genre .tagsmod-contrib-panel, .zbui .tagsmod-genre-body > .tagsmod-contrib-panel { margin-top: 48px; }
.zbui .tagsmod-contrib-panel-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--zb-radius-lg); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.zbui .tagsmod-contrib-panel-icon .tagsmod-ico { width: 20px; height: 20px; }
.zbui .tagsmod-contrib-panel-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.zbui .tagsmod-contrib-panel-title { margin: 0; color: var(--zb-text); font-size: 15px; font-weight: 650; line-height: 1.4; }
.zbui .tagsmod-contrib-panel-lede { margin: 0; color: var(--zb-text-muted); font-size: 13px; line-height: 1.5; }
.zbui .tagsmod-contrib-missing { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zbui .tagsmod-contrib-panel-actions { display: flex; gap: 8px; }

/* ---- Discovery page invitation ---- */
.zbui .tagsmod-contrib-band { box-sizing: border-box; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: 20px 32px; margin: var(--tagsmod-section-gap, 56px) 0 0; padding: 24px 28px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-2xl); background: radial-gradient(90% 140% at 0% 0%, var(--zb-primary-soft), transparent 62%), var(--zb-surface); }
.zbui .tagsmod-contrib-band-copy h2 { margin: 10px 0 4px; color: var(--zb-text); font-size: 20px; font-weight: 700; line-height: 1.35; }
.zbui .tagsmod-contrib-band-copy p { margin: 0 0 6px; color: var(--zb-text-soft); font-size: 13.5px; line-height: 1.6; }
.zbui .tagsmod-contrib-band-copy .tagsmod-contrib-trigger--link { margin-left: -8px; color: var(--zb-link); }
.zbui .tagsmod-contrib-band-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.zbui .tagsmod-contrib-trigger--card { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; height: 100%; min-height: 64px; padding: 12px 14px; border-color: var(--zb-border); border-radius: 14px; background: var(--zb-surface); color: var(--zb-text); text-align: left; white-space: normal; }
.zbui .tagsmod-contrib-trigger--card:hover { border-color: var(--zb-primary-soft-border-strong); box-shadow: var(--zb-shadow-card-hover); transform: translateY(-1px); }
.zbui .tagsmod-contrib-card-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--zb-radius-md); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.zbui .tagsmod-contrib-card-icon .tagsmod-ico { width: 18px; height: 18px; }
.zbui .tagsmod-contrib-card-text { display: grid; gap: 2px; min-width: 0; }
.zbui .tagsmod-contrib-card-label { font-size: 14px; font-weight: 600; line-height: 1.35; }
.zbui .tagsmod-contrib-card-note { color: var(--zb-text-muted); font-size: 12px; line-height: 1.45; }

/* ---- "Coming soon" badge ---- */
.zbui .tagsmod-contrib-badge { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 22px; padding: 0 9px; border-radius: var(--zb-radius-pill); background: var(--zb-warning-soft); color: var(--zb-warning-soft-text); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.zbui .tagsmod-contrib-badge .tagsmod-ico { width: 12px; height: 12px; }
[data-bs-theme="dark"] .zbui .tagsmod-contrib-badge { background: rgb(250 219 130 / 14%); color: #fadb82; }

/* ---- Dialog: a centered card, a bottom sheet on phones ---- */
.zbui .tagsmod-contrib-dialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-width: none; max-height: min(640px, calc(100dvh - 48px)); margin: auto; padding: 0; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-2xl); background: var(--zb-surface); color: var(--zb-text); box-shadow: var(--zb-shadow-overlay); overflow: hidden; font-size: 14px; line-height: 1.5; text-align: left; }
.zbui .tagsmod-contrib-dialog[open] { display: flex; flex-direction: column; animation: tagsmod-contrib-pop 220ms var(--zb-ease-out); }
.zbui .tagsmod-contrib-dialog *, .zbui .tagsmod-contrib-dialog *::before, .zbui .tagsmod-contrib-dialog *::after { box-sizing: border-box; }
.zbui .tagsmod-contrib-dialog [hidden] { display: none !important; }
/* No backdrop-filter: Chromium painted a doubled, shifted copy of the page behind a blurred backdrop. */
.zbui .tagsmod-contrib-dialog::backdrop { background: rgb(15 23 42 / 46%); animation: tagsmod-contrib-fade 220ms ease; }
[data-bs-theme="dark"] .zbui .tagsmod-contrib-dialog::backdrop { background: rgb(0 0 0 / 60%); }
.zbui .tagsmod-contrib-dialog.is-closing { animation: tagsmod-contrib-pop-out 160ms var(--zb-ease-in) forwards; }
.zbui .tagsmod-contrib-dialog.is-closing::backdrop { animation: tagsmod-contrib-fade 160ms ease reverse forwards; }
.zbui .tagsmod-contrib-dialog.is-dragging { animation: none; transition: none; }
/* :where keeps this reset below the component spacing that follows. */
.zbui .tagsmod-contrib-dialog :where(h2, h3, p, ul) { margin: 0; font-family: inherit; }
.zbui .tagsmod-contrib-dialog h2 { color: var(--zb-text); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.zbui .tagsmod-contrib-dialog h2[tabindex="-1"]:focus { outline: none; }
.zbui .tagsmod-contrib-dialog .tagsmod-ico { width: 16px; height: 16px; flex: none; }
.zbui .tagsmod-contrib-grabber { display: none; flex: none; place-items: center; height: 20px; touch-action: none; cursor: grab; }
.zbui .tagsmod-contrib-grabber span { width: 40px; height: 4px; border-radius: 2px; background: var(--zb-chip-border); }
.zbui .tagsmod-contrib-view { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.zbui .tagsmod-contrib-view.is-entering { animation: tagsmod-contrib-view 200ms var(--zb-ease-out); }
.zbui .tagsmod-contrib-iconbtn { display: grid; flex: none; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--zb-muted); color: var(--zb-text-soft); cursor: pointer; transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.zbui .tagsmod-contrib-iconbtn:hover { color: var(--zb-text); }
.zbui .tagsmod-contrib-iconbtn .tagsmod-ico { width: 18px; height: 18px; }

/* Hub view */
.zbui .tagsmod-contrib-dialog-head { display: flex; flex: none; align-items: center; gap: 12px; padding: 18px 18px 10px 20px; touch-action: none; }
.zbui .tagsmod-contrib-mark { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: var(--zb-radius-lg); background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.zbui .tagsmod-contrib-mark .tagsmod-ico { width: 20px; height: 20px; }
.zbui .tagsmod-contrib-dialog-heading { flex: 1; min-width: 0; }
.zbui .tagsmod-contrib-subject { margin-top: 2px; overflow: hidden; color: var(--zb-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.zbui .tagsmod-contrib-dialog-body { flex: 1 1 auto; min-height: 0; padding: 0 12px 18px; overflow-y: auto; overscroll-behavior: contain; }
.zbui .tagsmod-contrib-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 8px; color: var(--zb-text-soft); font-size: 13px; line-height: 1.6; }
.zbui .tagsmod-contrib-group { margin-top: 16px; padding: 0 8px 4px; color: var(--zb-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.zbui .tagsmod-contrib-rows { display: grid; gap: 2px; padding: 0; list-style: none; }
.zbui .tagsmod-contrib-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; column-gap: 12px; width: 100%; margin: 0; padding: 8px; border: 0; border-radius: var(--zb-radius-lg); background: transparent; color: var(--zb-text); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--zb-duration-fast) var(--zb-ease); }
.zbui .tagsmod-contrib-row:hover { background: var(--zb-muted); }
.zbui .tagsmod-contrib-row-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--zb-radius-lg); }
.zbui .tagsmod-contrib-row-icon .tagsmod-ico { width: 18px; height: 18px; }
.zbui .tagsmod-contrib-row-text { display: grid; gap: 1px; min-width: 0; }
.zbui .tagsmod-contrib-row-label { color: var(--zb-text); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.zbui .tagsmod-contrib-row-desc { overflow: hidden; color: var(--zb-text-muted); font-size: 12.5px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.zbui .tagsmod-contrib-dialog .tagsmod-contrib-row-arrow { width: 16px; height: 16px; color: var(--zb-text-subtle); transition: transform var(--zb-duration-fast) var(--zb-ease); }
.zbui .tagsmod-contrib-row:hover .tagsmod-contrib-row-arrow { transform: translateX(2px); }
.zbui [data-tone="edit"]:is(.tagsmod-contrib-row-icon, .tagsmod-contrib-preview-icon) { background: var(--zb-primary-soft); color: var(--zb-primary-soft-text); }
.zbui [data-tone="report"]:is(.tagsmod-contrib-row-icon, .tagsmod-contrib-preview-icon) { background: var(--zb-warning-soft); color: var(--zb-warning-soft-text); }
.zbui [data-tone="community"]:is(.tagsmod-contrib-row-icon, .tagsmod-contrib-preview-icon) { background: var(--zb-muted); color: var(--zb-text-soft); }
[data-bs-theme="dark"] .zbui [data-tone="report"]:is(.tagsmod-contrib-row-icon, .tagsmod-contrib-preview-icon) { background: rgb(250 219 130 / 14%); color: #fadb82; }
.zbui [data-tone="share"]:is(.tagsmod-contrib-row-icon, .tagsmod-contrib-preview-icon) { background: var(--zb-success-soft); color: var(--zb-success-soft-text); }
[data-bs-theme="dark"] .zbui [data-tone="share"]:is(.tagsmod-contrib-row-icon, .tagsmod-contrib-preview-icon) { background: rgb(12 188 135 / 16%); color: #63d9b4; }
.zbui .tagsmod-contrib-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; padding: 0 8px; list-style: none; }
.zbui .tagsmod-contrib-tile { display: grid; justify-items: center; align-content: center; gap: 6px; width: 100%; min-height: 76px; margin: 0; padding: 10px 6px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-lg); background: var(--zb-surface); color: var(--zb-text-soft); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer; transition: border-color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.zbui .tagsmod-contrib-tile:hover { border-color: var(--zb-success-soft-border); background: var(--zb-muted); color: var(--zb-text); }
[data-bs-theme="dark"] .zbui .tagsmod-contrib-tile:hover { border-color: rgb(12 188 135 / 40%); }
.zbui .tagsmod-contrib-tile .tagsmod-contrib-row-icon { width: 34px; height: 34px; border-radius: var(--zb-radius-md); }
.zbui .tagsmod-contrib-dialog .tagsmod-contrib-tile .tagsmod-ico { width: 17px; height: 17px; }
.zbui .tagsmod-contrib-footnote { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; padding: 0 8px; color: var(--zb-text-muted); font-size: 12px; line-height: 1.6; }
.zbui .tagsmod-contrib-footnote .tagsmod-ico { width: 14px; height: 14px; margin-top: 2px; }
.zbui .tagsmod-contrib-footer { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 8px 0; padding-top: 14px; border-top: 1px solid var(--zb-border); }
.zbui .tagsmod-contrib-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 12px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-pill); background: var(--zb-surface); color: var(--zb-text-soft); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease); }
.zbui .tagsmod-contrib-pill:hover { border-color: var(--zb-primary-soft-border-strong); color: var(--zb-text); }
.zbui .tagsmod-contrib-dialog .tagsmod-contrib-pill .tagsmod-ico { width: 14px; height: 14px; }

/* Preview view */
.zbui .tagsmod-contrib-preview-bar { display: flex; flex: none; align-items: center; gap: 8px; padding: 14px 14px 0; touch-action: none; }
.zbui .tagsmod-contrib-preview-bar > [data-tagsmod-contrib-close] { margin-left: auto; }
.zbui .tagsmod-contrib-preview-body { flex: 1 1 auto; min-height: 0; padding: 2px 24px 4px; overflow-y: auto; overscroll-behavior: contain; }
.zbui .tagsmod-contrib-preview-head { display: flex; align-items: center; gap: 14px; }
.zbui .tagsmod-contrib-preview-icon { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: var(--zb-radius-xl); }
.zbui .tagsmod-contrib-dialog .tagsmod-contrib-preview-icon .tagsmod-ico { width: 26px; height: 26px; }
.zbui .tagsmod-contrib-preview-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.zbui .tagsmod-contrib-dialog .tagsmod-contrib-preview-heading h2 { font-size: 20px; overflow-wrap: anywhere; }
.zbui .tagsmod-contrib-preview-desc { margin-top: 16px; color: var(--zb-text-soft); font-size: 14.5px; line-height: 1.75; }
.zbui .tagsmod-contrib-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: var(--zb-radius-lg); background: var(--zb-surface-sunken); color: var(--zb-text-muted); font-size: 13px; line-height: 1.6; }
.zbui .tagsmod-contrib-dialog .tagsmod-contrib-note .tagsmod-ico { width: 15px; height: 15px; margin-top: 3px; }
.zbui .tagsmod-contrib-preview-foot { display: flex; flex: none; justify-content: flex-end; padding: 18px 24px 22px; }
.zbui .tagsmod-contrib-primary { min-width: 120px; min-height: 44px; margin: 0; padding: 0 22px; border: 0; border-radius: var(--zb-radius-lg); background: var(--zb-primary); color: var(--zb-on-primary); font: inherit; font-size: 15px; font-weight: 600; box-shadow: var(--zb-shadow-action); cursor: pointer; transition: background-color var(--zb-duration-fast) var(--zb-ease); }
.zbui .tagsmod-contrib-primary:hover { background: var(--zb-primary-hover); color: var(--zb-on-primary); }

html:has(.tagsmod-contrib-dialog[open]) { overflow: hidden; }

@keyframes tagsmod-contrib-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes tagsmod-contrib-pop-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes tagsmod-contrib-fade { from { opacity: 0; } }
@keyframes tagsmod-contrib-view { from { opacity: 0; transform: translateX(10px); } }
@keyframes tagsmod-contrib-sheet-in { from { transform: translateY(100%); } }
@keyframes tagsmod-contrib-sheet-out { to { transform: translateY(100%); } }

@media (max-width: 1023.98px) {
    .zbui .tagsmod-contrib-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .zbui .tagsmod-hero .tagsmod-contrib-bar, .zbui .tagsmod-contrib-bar { margin-top: 16px; }
    /* Card-head actions shrink to their icon; the button keeps its name through aria-label. */
    .zbui .tagsmod-contrib-head .tagsmod-contrib-trigger--link { width: 32px; min-height: 32px; padding: 0; }
    .zbui .tagsmod-contrib-head .tagsmod-contrib-trigger--link > span { display: none; }
    .zbui .tagsmod-gallery-add { flex-basis: 92px; }
    .zbui .tagsmod-section-actions > .tagsmod-contrib-trigger { grid-column: 2; grid-row: 1; align-self: end; }
    .zbui .tagsmod-section-actions > .tagsmod-contrib-trigger--link { min-height: 44px; padding-inline: 10px; font-size: 12.5px; }
    .zbui .tagsmod-contrib-panel { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px; }
    .zbui .tagsmod-contrib-panel-icon { width: 36px; height: 36px; }
    .zbui .tagsmod-contrib-panel-main { min-height: 36px; }
    .zbui.tagsmod-genre .tagsmod-contrib-panel, .zbui .tagsmod-genre-body > .tagsmod-contrib-panel { margin-top: 32px; }
    .zbui .tagsmod-contrib-panel-lede { display: none; }
    .zbui .tagsmod-contrib-panel--plain .tagsmod-contrib-panel-title { font-size: 14px; }
    .zbui .tagsmod-contrib-panel-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zbui .tagsmod-contrib-band { gap: 16px; padding: 18px 16px; border-radius: var(--zb-radius-xl); }
    .zbui .tagsmod-contrib-band-copy h2 { font-size: 18px; }
    .zbui .tagsmod-contrib-band-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .zbui .tagsmod-contrib-trigger--card { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; min-height: 56px; padding: 10px 12px; }
    .zbui .tagsmod-contrib-card-icon { width: 32px; height: 32px; }
    .zbui .tagsmod-contrib-card-note { display: none; }
    /* Bottom sheet above the theme's phone tab bar (the top layer sits over any z-index). */
    .zbui .tagsmod-contrib-dialog { width: 100%; max-height: min(85dvh, calc(100% - 40px)); margin: 0; inset: auto 0 0; border-width: 1px 0 0; border-radius: var(--zb-radius-2xl) var(--zb-radius-2xl) 0 0; box-shadow: var(--zb-shadow-overlay-up); }
    .zbui .tagsmod-contrib-dialog[open] { position: fixed; animation: tagsmod-contrib-sheet-in 320ms cubic-bezier(.2, .8, .2, 1); }
    .zbui .tagsmod-contrib-dialog.is-closing { animation: tagsmod-contrib-sheet-out 220ms var(--zb-ease-in) forwards; }
    .zbui .tagsmod-contrib-grabber { display: grid; }
    .zbui .tagsmod-contrib-dialog-head { padding-top: 4px; }
    .zbui .tagsmod-contrib-preview-bar { padding-top: 2px; }
    .zbui .tagsmod-contrib-dialog-body { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
    .zbui .tagsmod-contrib-preview-body { padding-inline: 20px; }
    .zbui .tagsmod-contrib-preview-foot { padding: 16px 20px max(16px, env(safe-area-inset-bottom)); }
    .zbui .tagsmod-contrib-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .zbui .tagsmod-contrib-dialog, .zbui .tagsmod-contrib-dialog[open], .zbui .tagsmod-contrib-dialog.is-closing, .zbui .tagsmod-contrib-dialog::backdrop, .zbui .tagsmod-contrib-view.is-entering { animation: none !important; }
    .zbui :is(.tagsmod-contrib-trigger, .tagsmod-contrib-row, .tagsmod-contrib-tile, .tagsmod-contrib-pill, .tagsmod-contrib-iconbtn, .tagsmod-contrib-primary, .tagsmod-contrib-row-arrow) { transition: none; }
    .zbui .tagsmod-contrib-trigger:active, .zbui .tagsmod-contrib-trigger--card:hover { transform: none; }
}
@media (forced-colors: active) {
    .zbui :is(.tagsmod-contrib-trigger, .tagsmod-contrib-row, .tagsmod-contrib-tile, .tagsmod-contrib-pill, .tagsmod-contrib-iconbtn, .tagsmod-contrib-primary) { border: 1px solid ButtonText; }
    .zbui :is(.tagsmod-contrib-dialog, .tagsmod-contrib-badge, .tagsmod-contrib-panel, .tagsmod-contrib-band) { border: 1px solid CanvasText; }
    .zbui :is(.tagsmod-contrib-trigger, .tagsmod-contrib-row, .tagsmod-contrib-tile, .tagsmod-contrib-pill, .tagsmod-contrib-iconbtn, .tagsmod-contrib-primary):focus-visible { outline-color: Highlight; }
}
@media print {
    .tagsmod-contrib-bar, .tagsmod-contrib-panel, .tagsmod-contrib-band, .tagsmod-contrib-trigger, .tagsmod-contrib-foot, .tagsmod-contrib-hint, .tagsmod-contrib-resources, .tagsmod-gallery-add, .tagsmod-contrib-dialog { display: none !important; }
}