.mud-list-item.mud-selected,
.mud-list-item.mud-selected:hover,
.lib-sort-list .mud-menu-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}
.danger-btn.mud-button-root.mud-button-filled {
    background-color: var(--mud-palette-error) !important;
    border-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error-text, #fff) !important;
}

.danger-btn.mud-button-root.mud-button-filled:hover {
    background-color: color-mix(in srgb, var(--mud-palette-error) 85%, black) !important;
    border-color: color-mix(in srgb, var(--mud-palette-error) 85%, black) !important;
}
.bottom-splitter-collapsed.mud-split-panel>.divider {
    display: none !important;
}

.bottom-splitter-collapsed.mud-split-panel>.child-panel:last-child {
    display: none !important;
}

.bottom-splitter-collapsed.mud-split-panel>.child-panel:first-child {
    flex: 1 1 auto !important;
    max-height: unset !important;
}
.chapter-item-paper {
    border: 1px solid var(--mud-palette-divider);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 50%, var(--mud-palette-background)) !important;
    border-left: 3px solid var(--mud-palette-divider) !important;
    transition: border-color 0.15s ease;
    min-height: 72px;
}

.chapter-item-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 1.25em;
}

.media-flush {
    --media-frame-border: none;
    --media-frame-radius: 0;
}
.mud-picker-inline-paper {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    box-shadow: var(--mud-elevation-2) !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-picker-inline-paper .mud-picker-content {
    padding: 8px !important;
}

.mud-picker-calendar-header .mud-icon-button,
.mud-picker-calendar-header-switch .mud-icon-button,
.mud-picker-nav-button .mud-icon-button,
.mud-picker-calendar-header-transition + .mud-icon-button {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 50%;
}

.mud-picker-calendar-header .mud-icon-button:hover,
.mud-picker-calendar-header-switch .mud-icon-button:hover,
.mud-picker-nav-button .mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}

.mud-picker-calendar-day.mud-current {
    color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.row-icon {
    font-size: 13px;
}

/* Admin users, authors & stories tables */
.admin-table-wrapper {
    position: relative;
    overflow-x: auto;
}

/* Skeleton rows render in the table body (LoadingContentBody); suppress MudTable's own
   progress-line row so only the column-title header + skeleton rows show while loading. */
.admin-table-wrapper .mud-table-loading-row {
    display: none;
}

/* Busy state for a reload that keeps what is on screen. MudTable renders LoadingContentBody only for an
   empty table, so a skeleton cannot paint over existing rows; dimming costs one style change and no
   layout, where a per-cell skeleton cost ~200 paint layers per switch. The transition must sit on a class
   the element always carries - declared on the busy class itself it would be removed along with it, and
   the dim would snap back instead of easing. */
.epos-dimmable,
.admin-table-wrapper tbody {
    transition: opacity 0.18s ease-out;
}

.epos-dimmable.epos-refreshing,
.admin-table-wrapper.is-refreshing tbody {
    opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
    .epos-dimmable,
    .admin-table-wrapper tbody {
        transition: none;
    }
}

.admin-sort-header__icon {
    font-size: 14px !important;
    color: var(--mud-palette-text-secondary) !important;
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.admin-sort-header:hover .admin-sort-header__icon {
    opacity: 0.65;
}

/* The active arrow spins into place on each sort click. The header @key's the icon
   on the sort state so it re-mounts and the keyframe replays every time. */
.admin-sort-header--active .admin-sort-header__icon {
    opacity: 1;
    color: var(--mud-palette-text-primary) !important;
    animation: admin-sort-spin 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-sort-header--active .admin-sort-header__icon--desc {
    transform: rotate(180deg);
    animation: admin-sort-spin-desc 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes admin-sort-spin {
    from {
        transform: rotate(-120deg) scale(0.4);
        opacity: 0.2;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes admin-sort-spin-desc {
    from {
        transform: rotate(60deg) scale(0.4);
        opacity: 0.2;
    }
    to {
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sort-header--active .admin-sort-header__icon,
    .admin-sort-header--active .admin-sort-header__icon--desc {
        animation: none;
    }
}

.admin-clickable-table tbody tr {
    cursor: pointer;
}

.redemption-row--selected {
    background-color: var(--mud-palette-primary-hover);
}

.admin-table__col--w110 {
    width: 110px;
}

.admin-table__col--w120 {
    width: 120px;
}

.admin-table__col--w140 {
    width: 140px;
}

.admin-table__col--w150 {
    width: 150px;
}

.users-table__th--sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.users-table__th--min {
    width: 1%;
}

.users-table__td--top {
    vertical-align: middle;
}

.users-table__td--actions {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
    width: 1%;
    padding-left: 0 !important;
}

/* Numeric column: right-aligned so the value sits next to the row actions instead of
   floating at the left edge of a wide cell. */
.users-table__col--credits {
    text-align: right;
}

@media (min-width: 961px) {
    .users-table .mud-table-root {
        min-width: 1060px;
    }

    .users-table__col--user {
        width: 22%;
    }

    .users-table__col--email {
        width: 24%;
    }

    td.users-table__col--user,
    td.users-table__col--email {
        max-width: 0;
    }

    .users-table__col--created {
        width: 120px;
        white-space: nowrap;
    }

    .users-table__col--last-login {
        width: 120px;
        white-space: nowrap;
    }

    .users-table__col--credits {
        width: 100px;
        white-space: nowrap;
    }

    .users-table__user-cell {
        min-width: 0;
    }

    .users-table__truncate {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

}

.admin-table__th--min {
    width: 1%;
    white-space: nowrap;
}

.admin-table__td--chevron {
    text-align: right;
    width: 1%;
}

.admin-sort-header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-table__td--actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.admin-table__tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 2px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-table__tag--genre {
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.admin-table__author-cell {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

.admin-table__author-cell:hover {
    color: var(--mud-palette-secondary);
}

.admin-table__author-name {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.8125rem;
    color: inherit;
}

.admin-table__author-name-primary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-table__author-nick {
    font-size: 0.72rem;
    color: var(--mud-palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.authors-table__profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.authors-table__profile {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    max-width: 240px;
    padding: 2px 9px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.authors-table__profile-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.authors-table__profile-nick {
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.admin-rating .mud-icon-root {
    font-size: 16px;
}

.min-width-0 {
    min-width: 0;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.admin-toolbar__search {
    flex: 1 1 240px;
    max-width: 360px;
}

.admin-toolbar__genre {
    flex: 0 1 200px;
    max-width: 220px;
}

.admin-users-tabs > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-users-tabs .admin-toolbar__search {
    max-width: 760px;
}

.admin-users-tabs .tab-bar-group {
    margin-left: auto;
}

.admin-reports-tabs .tab-bar-group {
    margin-left: auto;
}

.admin-toolbar__count {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.admin-authors-toolbar__count {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 8px;
    background: var(--mud-palette-divider);
}

.admin-authors-toolbar__count-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.admin-authors-toolbar__count-skel {
    width: 62px;
    height: 13px;
}

.admin-pagination {
    display: flex;
    justify-content: center;
    padding: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.nav-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 16px 14px 6px;
}

.pkgm-toolbar {
    overflow: hidden;
}

/* shared expand animation (matches chapter review) */
.pkgm-chevron {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    transition: transform 0.25s ease, opacity 0.15s ease;
}

.pkgm-chevron--open {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* label chips (match chapter review row labels) */
.pkgm-label {
    flex: none;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.6;
}

.pkgm-label--chapter {
    background-color: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    color: var(--mud-palette-text-secondary);
}

.pkgm-label--story {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

/* chapter-review story grouping */
.review-group__band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.review-group__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-group__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.review-group__title {
    min-width: 0;
    font-weight: 700;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-group__meta-line {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

/* the last chapter row's trailing divider would double up with the card border */
.review-group__rows > .mud-divider:last-child,
.chapter-review-list > .mud-divider:last-child {
    display: none;
}

/* story band (always open, non-interactive section header) */
.pkgm-story__band {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}

/* rebuild-in-progress indicator */
.pkgm-building {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-warning);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.pkgm-pill.pkgm-building {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
}

.pkgm-building__spinner {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: var(--mud-palette-warning);
    animation: pkgm-spin 0.9s linear infinite;
}

@keyframes pkgm-spin {
    to {
        transform: rotate(360deg);
    }
}

.pkgm-story__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pkgm-chapter__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pkgm-story__info {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pkgm-story__title {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pkgm-story__summary {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
}

.pkgm-story__pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.pkgm-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.pkgm-pill--live {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
}

.pkgm-pill--rc {
    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    color: var(--mud-palette-info);
}

.pkgm-pill--attention {
    background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    color: var(--mud-palette-warning);
}

.pkgm-pill--blocked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    color: var(--mud-palette-error);
}

/* connected "build from snapshot" control */
.pkgm-build {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
}

.pkgm-build__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pkgm-build__btn + .pkgm-build__btn {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.pkgm-build__btn:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.pkgm-build__icon {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

.pkgm-pill__icon {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

/* chapters */
.pkgm-chapters {
    border-top: 1px solid var(--mud-palette-divider);
}

.pkgm-chapter {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pkgm-chapter:last-child {
    border-bottom: none;
}

.pkgm-chapter__band {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 20px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pkgm-chapter__band:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 2%, transparent);
}

/* snapshot-only chapter: no package to expand */
.pkgm-chapter__band--static {
    cursor: default;
}

.pkgm-chapter__band--static:hover {
    background-color: transparent;
}

.pkgm-chevron--hidden {
    visibility: hidden;
}

.pkgm-chip--muted {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
}

.pkgm-chapter__info {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pkgm-chapter__title {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pkgm-chapter__snapshot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.pkgm-chapter__snapshot-icon {
    font-size: 13px !important;
    width: 13px !important;
    height: 13px !important;
}

.pkgm-chapter__chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* chips */
.pkgm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.pkgm-chip__icon {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

.pkgm-chip--live {
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    color: var(--mud-palette-success);
}

.pkgm-chip--rc {
    background: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    color: var(--mud-palette-info);
}

.pkgm-chip--archived {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
    color: var(--mud-palette-text-secondary);
}

.pkgm-chip--superseded {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning);
}

/* version rows */
.pkgm-versions {
    padding: 4px 18px 8px 54px;
}

.pkgm-version {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 4px;
    border-top: 1px solid var(--mud-palette-divider);
}

.pkgm-version:first-child {
    border-top: none;
}

.pkgm-version__content {
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pkgm-version__schema {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pkgm-version__schema--old {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.pkgm-version__meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pkgm-version__actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex: none;
}

.skel {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent);
    border-radius: 6px;
    flex: none;
}

.skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent),
        transparent);
    animation: app-shimmer var(--tp-shimmer-dur) ease-in-out infinite;
}

.skel--onDark {
    background-color: rgba(255, 255, 255, 0.09);
}

.skel--onDark::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
}

.skel--text {
    border-radius: 4px;
}

.skel--pill {
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .skel::after {
        animation: none;
    }
}

/* Add-role affordance on the admin user detail header. */
.role-add-trigger.mud-icon-button {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
}

.role-add-trigger.mud-icon-button:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.role-add-trigger.mud-icon-button .mud-icon-root {
    font-size: 15px;
}

.role-menu.mud-list {
    width: 268px;
    padding: 6px;
}

/* MudList draws a rule between items; the design groups them by spacing instead. */
.role-menu.mud-list .mud-list-item,
.role-menu.mud-list .mud-menu-item {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.role-menu__title {
    padding: 6px 8px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.role-menu__item.mud-menu-item {
    border-radius: 8px;
    padding: 8px;
    min-height: 0;
}

.role-menu__item.mud-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.role-menu__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.role-menu__lead.mud-icon-root {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--mud-palette-text-secondary);
}

.role-menu__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.role-menu__label {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

.role-menu__note {
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.role-menu__shield.mud-icon-root {
    flex-shrink: 0;
    font-size: 15px;
    opacity: 0.5;
    color: var(--mud-palette-text-secondary);
}

.role-menu__divider {
    margin: 6px 4px 0;
}

.role-menu__hint {
    padding: 8px;
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* Package and review bands put a flex:none pill/chip/button group next to the title column. On a
   phone that group squeezes the title to nothing and then overflows the card, so below Sm the band
   wraps and the group takes a line of its own. These rules sit at the end of the file because the
   base flex:none declarations come later in the cascade and a media query adds no specificity. */
@media (max-width: 599.98px) {
    .pkgm-story__band,
    .pkgm-chapter__band,
    .review-group__band {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .pkgm-story__info,
    .pkgm-chapter__info,
    .review-group__info {
        flex: 1 1 140px;
    }

    .pkgm-story__pills,
    .pkgm-chapter__chips {
        flex: 1 1 100%;
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: flex-start;
    }

    .pkgm-versions {
        padding: 4px 12px 8px 16px;
    }

    .pkgm-version {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pkgm-version__meta {
        margin-left: 0;
        flex: 1 1 60%;
    }
}