.image-export-page {
    display: grid;
    gap: 16px;
}

.image-export-page > .panel,
.image-export-sources > .panel {
    margin-bottom: 0;
}

.image-export-intro.panel {
    padding: 16px 20px;
}

.image-export-intro .section-head {
    margin: 0;
}

.image-export-intro h1 {
    font-size: 1.65rem;
}

.image-export-intro .helper-text {
    margin: 6px 0 0;
    font-size: .85rem;
    line-height: 1.5;
}

.image-export-toolbar {
    display: flex;
    align-items: center;
    gap: 10px 20px;
    padding: 8px 16px;
    border-block: 1px solid var(--line);
}

.image-export-toolbar .field {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
    min-width: 0;
}

.image-export-toolbar .field > span {
    font-size: .8rem;
    white-space: nowrap;
}

.image-export-toolbar .input {
    width: 170px;
}

.image-export-toolbar .helper-text {
    flex: 1;
    margin: 0;
    font-size: .8rem;
    line-height: 1.5;
}

.image-export-sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.image-export-source {
    min-width: 0;
    container: export-source / inline-size;
}

.image-export-source > .section-head {
    align-items: center;
    flex-direction: row;
    gap: 12px;
}

.image-export-source > .section-head h2 {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.image-export-selection-jump {
    display: grid;
    flex: none;
    gap: 1px;
    min-width: 112px;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--accent-strong);
    background: var(--accent-soft);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.image-export-selection-jump strong {
    font-size: .83rem;
}

.image-export-selection-jump span {
    font-size: .66rem;
}

.image-export-source__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.image-export-source__form .field {
    min-width: 0;
}

.image-export-page .input {
    min-width: 0;
    max-width: 100%;
}

.image-export-label-filter {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(37, 79, 71, .04);
}

.image-export-label-filter .helper-text {
    margin: 8px 0 0;
    font-size: .8rem;
}

.image-export-label-filter .button {
    margin-top: 8px;
}

.image-export-page [hidden] {
    display: none !important;
}

.image-export-source__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.image-export-source__status {
    min-height: 1.5em;
    margin: 14px 0 8px;
}

.image-export-source__status.is-error,
.image-export-label-filter .is-error,
.image-export-selection__status.is-error {
    color: #a52f25;
    font-weight: 700;
}

.image-export-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    align-content: start;
    gap: 12px;
    max-height: 620px;
    padding: 2px 6px 2px 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.image-export-results > .empty-state {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .86rem;
}

.image-export-result-card {
    display: grid;
    grid-template-rows: auto 1fr 42px;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .48);
}

.image-export-result-card.is-selected {
    border-color: rgba(37, 79, 71, .42);
    background: rgba(37, 79, 71, .08);
}

.image-export-result-card__media {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
}

.image-export-result-card__thumb {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--muted);
    background: var(--paper-strong);
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
}

.image-export-result-card__thumb[data-media-shape="portrait"] {
    width: 75%;
    aspect-ratio: 3 / 4;
}

.image-export-result-card__thumb[data-media-shape="landscape"] {
    aspect-ratio: 16 / 10;
}

.image-export-result-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: inherit;
    object-fit: contain;
}

.image-export-result-card__body {
    min-width: 0;
}

.image-export-result-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-weight: 700;
    font-size: .86rem;
    height: 4.35em;
    line-height: 1.45;
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.image-export-result-card__category {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .75rem;
}

.image-export-result-card__select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-inline: 6px;
    font-size: .85rem;
}

.image-export-result-card__select[aria-pressed="true"] {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.image-export-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.image-export-pager span {
    min-width: 5.5em;
    color: var(--muted);
    font-size: .86rem;
    text-align: center;
}

.image-export-selected-list {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 18px 0;
    list-style: none;
}

.image-export-selected-item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .46);
}

.image-export-selected-item__rank {
    color: var(--accent);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.image-export-selected-item__copy {
    min-width: 0;
}

.image-export-selected-item__name {
    display: block;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-export-selected-item__category {
    color: var(--muted);
    font-size: .75rem;
}

.image-export-selected-item__actions {
    display: flex;
    gap: 6px;
}

.image-export-order-button,
.image-export-remove-button {
    min-width: 42px;
    min-height: 38px;
    padding: 0 11px;
}

.image-export-remove-button {
    color: #8d2c23;
}

.image-export-selection__count {
    flex: none;
    color: var(--accent-strong);
    font-size: 1.05rem;
}

.image-export-selection {
    scroll-margin-top: 20px;
}

.image-export-create-row {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
}

.image-export-layout {
    min-width: 0;
    margin: 20px 0;
    padding: 0;
    border: 0;
}

.image-export-layout legend {
    padding: 0;
    font-weight: 700;
}

.image-export-layout > .helper-text {
    margin: 6px 0 12px;
    font-size: .82rem;
}

.image-export-layout-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 10px;
}

.image-export-layout-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--paper-strong);
    cursor: pointer;
}

.image-export-layout-choice.is-selected {
    border-color: var(--secondary);
    box-shadow: inset 0 0 0 1px var(--secondary);
    background: rgba(37, 79, 71, .05);
}

.image-export-layout-choice:focus-within {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

.image-export-layout-choice input {
    margin: 2px 0 0;
    accent-color: var(--secondary);
}

.image-export-layout-choice__label {
    align-self: center;
    font-size: .77rem;
    font-weight: 700;
    line-height: 1.4;
}

.image-export-layout-choice__detail {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .72rem;
    text-align: center;
}

.image-export-layout-choice__preview {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    height: 80px;
}

.image-export-layout-diagram {
    --preview-columns: 1;
    --preview-rows: 1;
    --preview-ratio: 1;
    --preview-cell-height: min(calc(16px / var(--preview-ratio)), calc(76px / var(--preview-rows)));
    --preview-cell-width: calc(var(--preview-cell-height) * var(--preview-ratio));
    display: grid;
    grid-template-columns: repeat(var(--preview-columns), var(--preview-cell-width));
    grid-auto-rows: var(--preview-cell-height);
    border: 1px solid var(--line);
    background: #fff;
}

.image-export-layout-diagram[data-cell-shape="portrait"] { --preview-ratio: .6666667; }
.image-export-layout-diagram[data-columns="2"] { --preview-columns: 2; }
.image-export-layout-diagram[data-columns="3"] { --preview-columns: 3; }
.image-export-layout-diagram[data-columns="4"] { --preview-columns: 4; }
.image-export-layout-diagram[data-columns="5"] { --preview-columns: 5; }
.image-export-layout-diagram[data-rows="2"] { --preview-rows: 2; }
.image-export-layout-diagram[data-rows="3"] { --preview-rows: 3; }
.image-export-layout-diagram[data-rows="4"] { --preview-rows: 4; }
.image-export-layout-diagram[data-rows="5"] { --preview-rows: 5; }
.image-export-layout-diagram[data-rows="6"] { --preview-rows: 6; }
.image-export-layout-diagram[data-rows="7"] { --preview-rows: 7; }
.image-export-layout-diagram[data-rows="8"] { --preview-rows: 8; }
.image-export-layout-diagram[data-rows="9"] { --preview-rows: 9; }
.image-export-layout-diagram[data-rows="10"] { --preview-rows: 10; }

.image-export-layout-cell {
    margin: 1px;
    border: 1px solid rgba(37, 79, 71, .5);
    background: rgba(37, 79, 71, .17);
}

.image-export-layout-cell.is-empty {
    border: 1px dashed var(--line);
    background: #fff;
}

.image-export-layout-choice.is-disabled {
    opacity: .6;
    cursor: default;
}

.image-export-create {
    min-width: 150px;
}

.image-export-selection__status {
    min-height: 1.5em;
    margin: 12px 0 0;
}

.image-export-output[hidden] {
    display: none;
}

.image-export-output {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.image-export-output__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.image-export-output__actions .helper-text {
    margin: 0;
}

.image-export-output img {
    display: block;
    width: min(100%, 720px);
    height: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.image-export-page.is-locked .image-export-results,
.image-export-page.is-locked .image-export-selected-list {
    opacity: .65;
}

@media (min-width: 821px) {
    @container export-source (min-width: 480px) {
        .image-export-results {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
}

@media (max-width: 820px) {
    .image-export-sources {
        grid-template-columns: 1fr;
    }

    .image-export-source {
        scroll-margin-top: 72px;
    }

    .image-export-results {
        max-height: min(54vh, 520px);
    }
}

@media (max-width: 560px) {
    .image-export-page {
        gap: 16px;
    }

    .image-export-sources {
        gap: 16px;
    }

    .image-export-intro h1 {
        font-size: 1.4rem;
    }

    .image-export-intro .helper-text {
        font-size: .84rem;
        line-height: 1.55;
    }

    .image-export-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding-inline: 4px;
    }

    .image-export-toolbar .field {
        flex-basis: auto;
    }

    .image-export-toolbar .input {
        flex: 1;
        width: auto;
    }

    .image-export-toolbar .helper-text {
        font-size: .75rem;
    }

    .image-export-source.panel {
        padding: 16px 12px;
    }

    .image-export-source > .section-head {
        align-items: center;
        flex-direction: row;
    }

    .image-export-source > .section-head h2 {
        font-size: 1.2rem;
    }

    .image-export-selection-jump {
        min-width: 104px;
        min-height: 42px;
        padding: 5px 9px;
    }

    .image-export-source__form {
        grid-template-columns: 1fr;
    }

    .image-export-source__actions {
        grid-column: auto;
    }

    .image-export-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-right: 2px;
    }

    .image-export-result-card {
        padding: 8px;
        gap: 8px;
    }

    .image-export-result-card__title {
        font-size: .8rem;
    }

    .image-export-layout-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .image-export-selected-item {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .image-export-selected-item__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .image-export-order-button,
    .image-export-remove-button {
        min-width: 48px;
    }

    .image-export-create-row > * {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .image-export-page .button {
        transition: none;
    }
}