.gallery-section {
    box-sizing: border-box;
    min-width: 0;
    padding-bottom: 0;
    color: var(--main-font-color);
}

.gallery-empty {
    margin: 0;
    font-size: var(--type-size-content-description);
    line-height: var(--type-leading-reading);
}

.gallery-messages {
    margin: 0 0 var(--type-space-content);
    padding: 0;
    list-style: none;
}

.gallery-message {
    margin: 0;
    padding: var(--type-space-compact);
    border: 1px solid var(--theme-border-soft);
    color: var(--main-font-color);
    font-size: var(--code-display-font-size);
    line-height: var(--main-font-spacing);
}

.gallery-message.is-error {
    border-color: var(--theme-error-text);
    color: var(--theme-error-text);
}

.gallery-upload-progress-dialog {
    box-sizing: border-box;
    width: min(360px, calc(100vw - (var(--type-space-page) * 2)));
    margin: auto;
    padding: var(--type-space-content);
    border: 1px solid var(--theme-border-soft);
    border-radius: 8px;
    background: var(--theme-control-bg);
    color: var(--theme-text-strong);
    font: inherit;
}

.gallery-upload-progress-dialog::backdrop {
    background: var(--theme-overlay-strong);
}

.gallery-upload-progress-dialog[open] {
    display: grid;
    gap: var(--type-space-compact);
}

.gallery-upload-progress-dialog p {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: var(--type-size-small);
    line-height: var(--type-leading-reading);
}

.gallery-upload-progress-dialog progress {
    width: 100%;
    height: 12px;
    accent-color: var(--theme-primary-action);
}

.gallery-upload-progress-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.gallery-upload-progress-actions button,
.gallery-upload-progress-actions a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 5px;
    border: 1px solid var(--theme-text-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--theme-text-strong);
    font: inherit;
    font-size: var(--type-size-small);
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.gallery-upload-progress-actions :is(button, a)[hidden] {
    display: none !important;
}

.gallery-upload-progress-actions a {
    border-color: var(--theme-primary-action);
    background: var(--theme-primary-action);
    color: var(--theme-primary-action-text);
}

.gallery-upload-progress-actions a:hover {
    border-color: var(--theme-primary-action-hover);
    background: var(--theme-primary-action-hover);
}

.gallery-upload-progress-actions button:hover {
    background: var(--theme-control-hover);
}

.gallery-upload-progress-actions a:active {
    border-color: var(--theme-primary-action-hover);
    background: var(--theme-primary-action-hover);
}

.gallery-upload-progress-actions button:active {
    background: var(--theme-control-hover);
}

.gallery-upload-progress-actions button:focus-visible,
.gallery-upload-progress-actions a:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 18px;
    min-width: 0;
}

.gallery-grid[hidden],
.gallery-detail-viewer[hidden] {
    display: none;
}

.gallery-card {
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    padding: var(--type-space-content);
    border: 1px solid var(--theme-divider-soft);
    border-radius: 8px;
    background: transparent;
}

.gallery-card.is-editing {
    grid-column: 1 / -1;
}

.gallery-card figure {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

.gallery-photo-link {
    appearance: none;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--theme-border-soft);
    border-radius: 5px;
    background: var(--theme-media-stage-bg);
    color: inherit;
    cursor: zoom-in;
    font: inherit;
    margin-top: auto;
    padding: 0;
}

.gallery-photo-link:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 3px;
}

.gallery-photo-link .gallery-card-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.gallery-card figcaption {
    padding-bottom: var(--type-space-compact);
}

.gallery-caption-heading {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.gallery-card time {
    flex: 0 0 auto;
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: var(--code-display-font-size);
    line-height: var(--main-font-spacing);
    white-space: nowrap;
}

.gallery-caption-heading h6 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    line-height: var(--main-font-spacing);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-card p {
    margin: var(--type-space-content) 0 0;
    color: var(--main-font-color);
    font-size: var(--main-font-size);
    line-height: var(--main-font-spacing);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-admin-controls {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--body-font);
    font-size: var(--code-display-font-size);
}

.gallery-admin-controls form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.gallery-admin-controls > .staff-item-actions {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.gallery-admin-action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 26px;
    border: 1px solid var(--theme-text-subtle);
    border-radius: 4px;
    background: var(--theme-surface-muted);
    color: var(--theme-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--code-display-font-size);
    line-height: 1;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
}

.gallery-admin-action:hover,
.gallery-admin-action:focus-visible {
    border-color: var(--theme-text-secondary);
    color: var(--main-font-color);
}

.gallery-admin-action:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-replace-label {
    position: relative;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--theme-text-secondary);
    font-weight: 600;
    text-underline-offset: 2px;
}

.gallery-replace-label:hover,
.gallery-replace-label:focus-visible {
    border: 0;
    background: transparent;
    color: var(--theme-text-secondary);
    text-decoration: underline;
}

.gallery-replace-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.gallery-detail-viewer {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    /* Keep the caption title below the fixed navigation when detail opens. */
    scroll-margin-block-start: calc(var(--nav-box-height) + var(--type-space-page));
}

.gallery-detail-action-row {
    position: relative;
    min-width: 0;
    margin-top: var(--type-space-content);
}

.gallery-detail-reply-entry {
    min-width: 0;
    width: 100%;
}

.gallery-detail-toolbar {
    display: flex;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    justify-content: flex-end;
    margin: 0;
}

.gallery-detail-close {
    appearance: none;
    box-sizing: border-box;
    min-height: 26px;
    border: 1px solid var(--theme-border);
    border-radius: 4px;
    background: transparent;
    color: var(--theme-border);
    cursor: pointer;
    font: inherit;
    font-size: var(--code-display-font-size);
    font-weight: 600;
    line-height: var(--main-font-spacing);
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
}

.gallery-detail-close:hover,
.gallery-detail-close:active {
    border-color: var(--theme-border);
    background: transparent;
    color: var(--theme-border);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery-detail-close:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-back-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--type-space-tight);
    object-fit: contain;
    vertical-align: -0.12em;
}

.gallery-detail-figure {
    margin: 0;
}

.gallery-detail-image-stage {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--theme-border-soft);
    background: var(--theme-media-stage-bg);
}

.gallery-detail-image {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-detail-placeholder {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px max-content 72px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--type-space-compact);
    margin-top: var(--type-space-content);
    padding-top: var(--type-space-content);
    border-top: 1px solid var(--theme-divider-standard);
}

.gallery-page-summary {
    grid-column: 3;
    justify-self: center;
    color: var(--theme-text-muted);
    font-size: var(--type-size-small);
    line-height: var(--type-leading-ui);
    text-align: center;
    white-space: nowrap;
}

.gallery-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--theme-text-strong);
    font: inherit;
    font-size: var(--type-size-small);
    line-height: var(--type-leading-ui);
    padding-block: var(--type-control-padding-block);
    padding-inline: 0;
    text-decoration: none;
}

/* Equal invisible tracks keep the summary centered while the controls read as text. */
.gallery-page-link-direction {
    width: 72px;
    min-width: 72px;
    white-space: nowrap;
}

.gallery-page-previous {
    grid-column: 2;
    justify-content: flex-end;
}

.gallery-page-next {
    grid-column: 4;
    justify-content: flex-start;
}

a.gallery-page-link:hover,
a.gallery-page-link:active {
    background: transparent;
    color: var(--theme-link-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a.gallery-page-link:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-page-link.is-disabled {
    background: transparent;
    color: var(--theme-control-disabled-text);
}

.gallery-detail-image[hidden],
.gallery-detail-placeholder[hidden] {
    display: none;
}

.gallery-detail-caption {
    padding: 0 0 var(--type-space-content);
}

.gallery-detail-caption .gallery-caption-heading {
    flex-direction: column;
    align-items: stretch;
    gap: var(--type-space-tight);
}

.gallery-detail-caption time {
    flex: 0 0 auto;
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: var(--code-display-font-size);
    line-height: var(--main-font-spacing);
    white-space: nowrap;
}

.gallery-detail-caption h6 {
    min-width: 0;
    margin: 0;
    color: var(--main-font-color);
    font-size: var(--type-size-content-title);
    line-height: var(--type-leading-heading);
    overflow-wrap: anywhere;
}

.gallery-detail-caption .gallery-caption-heading h6 {
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.gallery-detail-caption .gallery-caption-heading time {
    order: -1;
    align-self: flex-end;
}

.gallery-detail-caption p {
    margin: var(--type-space-content) 0 0;
    color: var(--main-font-color);
    font-size: var(--type-size-content-description);
    line-height: var(--type-leading-reading);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* Gallery discussions deliberately mirror the Board's light, recursive reply flow. */
.gallery-replies {
    --gallery-reply-branch-point: calc(
        var(--type-control-padding-block)
        + var(--type-notebook-control-height)
        + var(--type-space-tight)
        + 0.65em
    );
    min-width: 0;
    margin-top: var(--type-space-content);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--theme-text);
    font-family: var(--body-font);
    font-size: var(--main-font-size);
    line-height: var(--main-font-spacing);
}

.gallery-detail-replies-host > .gallery-replies {
    margin-top: 0;
}

.gallery-reply-entry {
    min-width: 0;
}

.gallery-detail-reply-entry .gallery-reply-composer {
    display: block;
}

.gallery-reply-list {
    display: grid;
    gap: var(--type-space-compact);
    margin-top: var(--type-space-content);
}

.gallery-reply-list.has-replies {
    position: relative;
    margin-inline-start: var(--type-space-content);
    padding-inline-start: var(--type-space-content);
}

.gallery-reply-list:not(.has-replies) {
    padding-bottom: var(--type-space-content);
}

.gallery-reply {
    position: relative;
    min-width: 0;
    padding-block: var(--type-control-padding-block);
    border-block: 0;
    background: transparent;
}

.gallery-reply:target {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-reply-row {
    display: block;
    min-width: 0;
}

.gallery-reply-meta {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--type-notebook-control-height);
    min-width: 0;
    color: var(--theme-text-muted);
    font-size: var(--type-size-small);
    line-height: 1.25;
    white-space: nowrap;
}

.gallery-reply-identity-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--type-space-compact);
    min-width: 0;
}

.gallery-reply-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--type-space-tight);
}

.gallery-reply-identity-actions strong {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 18rem;
    overflow: hidden;
    color: var(--theme-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-reply-identity-actions time {
    flex: 0 0 auto;
}

.gallery-reply-actions form {
    margin: 0;
}

.gallery-reply-edit,
.gallery-reply-delete,
.gallery-reply-reply {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--theme-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--type-size-small);
    line-height: inherit;
    text-decoration: none;
}

.gallery-reply-edit:visited {
    color: var(--theme-text-muted);
}

.gallery-reply-delete {
    color: var(--theme-error-text);
}

.gallery-reply-edit:is(:hover, :focus-visible),
.gallery-reply-delete:is(:hover, :focus-visible),
.gallery-reply-reply:is(:hover, :focus-visible) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Reply entry points share the same primary action treatment as Write a post. */
.gallery-reply-reply {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 26px;
    min-height: 0;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-primary-action);
    border-radius: 4px;
    background: var(--theme-primary-action);
    color: var(--theme-primary-action-text);
    font-family: var(--body-font);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: var(--type-leading-ui);
    text-decoration: none;
    white-space: nowrap;
}

.gallery-reply-reply:is(:hover, :focus-visible) {
    border-color: var(--theme-primary-action-hover);
    background: var(--theme-primary-action-hover);
    color: var(--theme-primary-action-text);
    text-decoration: none;
}

.gallery-reply-reply:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-reply-content {
    min-width: 0;
    margin: var(--type-space-tight) 0 0;
    color: var(--theme-text);
    overflow-wrap: anywhere;
}

.gallery-reply-list.has-replies > .gallery-reply::before,
.gallery-reply-children > .gallery-reply::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-1 * var(--type-space-content) - 1px);
    width: var(--type-space-content);
    height: var(--gallery-reply-branch-point);
    border-inline-start: 1px solid var(--theme-divider-standard);
    border-block-end: 1px solid var(--theme-divider-standard);
    content: "";
    pointer-events: none;
}

.gallery-reply-list.has-replies > .gallery-reply:not(:last-child)::after,
.gallery-reply-children > .gallery-reply:not(:last-child)::after {
    position: absolute;
    inset-block-start: var(--gallery-reply-branch-point);
    inset-block-end: calc(-1 * var(--type-space-compact));
    inset-inline-start: calc(-1 * var(--type-space-content) - 1px);
    border-inline-start: 1px solid var(--theme-divider-standard);
    content: "";
    pointer-events: none;
}

.gallery-reply-children {
    position: relative;
    min-width: 0;
    margin-block-start: var(--type-space-tight);
    margin-inline-start: var(--type-space-content);
    padding-inline-start: var(--type-space-content);
}

.gallery-reply-children > .gallery-reply:not(:last-child)::after {
    inset-block-end: calc(-1 * var(--type-space-tight));
}

.gallery-reply-children > .gallery-reply + .gallery-reply {
    margin-block-start: var(--type-space-tight);
}

.gallery-child-reply-composer {
    position: relative;
    margin-block-start: var(--type-space-tight);
}

.gallery-child-reply-form {
    margin-top: 0;
}

.gallery-child-reply-form textarea[data-gallery-reply-editor] {
    min-height: 80px;
}

.gallery-reply-edit-form {
    min-width: 0;
    margin: 0;
}

.gallery-reply-edit-form textarea[data-gallery-reply-edit-editor] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    padding: var(--type-space-content);
    border: 0;
    border-radius: 0;
    background: var(--theme-surface);
    color: var(--theme-text);
    font: inherit;
    resize: vertical;
}

.gallery-reply-edit-form textarea[data-gallery-reply-edit-editor]:focus-visible,
.gallery-reply-editor textarea[data-gallery-reply-editor]:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-reply-edit-meta,
.gallery-reply-editor-meta {
    display: flex;
    align-items: center;
    gap: var(--type-space-content);
    min-width: 0;
    margin-top: var(--type-space-tight);
}

.gallery-reply-edit-meta {
    flex-wrap: wrap;
    gap: var(--type-space-tight) var(--type-space-content);
}

.gallery-reply-edit-meta p,
.gallery-reply-editor-meta p {
    margin: 0;
    color: var(--theme-text-muted);
    font-size: var(--type-size-small);
    line-height: var(--main-font-spacing);
}

.gallery-reply-editor-meta {
    justify-content: space-between;
}

.gallery-reply-editor-meta p:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
}

.gallery-reply-edit-actions {
    display: flex;
    align-items: center;
    gap: var(--type-space-compact);
    margin-left: auto;
}

.gallery-reply-edit-actions a,
.gallery-reply-edit-actions a:visited {
    color: var(--theme-text-muted);
    font-size: var(--type-size-small);
    text-decoration: none;
}

.gallery-reply-edit-actions a:is(:hover, :focus-visible) {
    color: var(--theme-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.gallery-reply-empty {
    margin: 0;
    color: var(--theme-text-muted);
    font-size: var(--main-font-size);
}

.gallery-reply-composer {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gallery-reply-composer-summary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 26px;
    min-height: 0;
    margin: 0;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-primary-action);
    border-radius: 4px;
    background: var(--theme-primary-action);
    color: var(--theme-primary-action-text);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: var(--type-leading-ui);
    list-style: none;
}

.gallery-reply-composer-summary::-webkit-details-marker {
    display: none;
}

.gallery-reply-composer-summary:is(:hover, :focus-visible),
.gallery-reply-composer[open] .gallery-reply-composer-summary {
    border-color: var(--theme-primary-action-hover);
    background: var(--theme-primary-action-hover);
    color: var(--theme-primary-action-text);
}

.gallery-reply-composer-summary:focus-visible,
.gallery-reply-submit:focus-visible,
.gallery-reply-cancel:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.gallery-reply-form {
    width: 100%;
    margin-top: var(--type-space-content);
}

.gallery-reply-field {
    margin-bottom: 0;
}

.gallery-reply-editor {
    position: relative;
    min-width: 0;
}

.gallery-reply-editor-actions {
    display: flex;
    width: fit-content;
    gap: var(--type-space-tight);
    justify-content: flex-end;
    margin-block-start: var(--type-space-tight);
    margin-inline-start: auto;
}

.gallery-reply-compose-actions :is(.gallery-reply-cancel, .gallery-reply-submit) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    min-width: 88px;
    height: 26px;
    min-height: 0;
    margin: 0;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border-radius: 4px;
    font-size: var(--type-size-small);
    font-weight: 600;
    line-height: var(--type-leading-ui);
    text-decoration: none;
    white-space: nowrap;
}

.gallery-reply-cancel,
.gallery-reply-cancel:visited {
    border: 1px solid var(--theme-text-subtle);
    background: var(--theme-secondary-button-bg);
    color: var(--theme-text-strong);
}

.gallery-reply-cancel:is(:hover, :focus-visible) {
    border-color: var(--theme-text-secondary);
    background: var(--theme-surface-hover);
    color: var(--theme-text-strong);
    text-decoration: none;
}

.gallery-reply-editor textarea[data-gallery-reply-editor] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    padding: var(--type-space-content);
    border: 0;
    border-radius: 0;
    background: var(--theme-surface);
    color: var(--theme-text);
    font: inherit;
    resize: vertical;
}

.gallery-reply-submit,
.gallery-reply-edit-submit {
    min-height: 0;
    border: 1px solid var(--theme-primary-action);
    border-radius: 4px;
    background: var(--theme-primary-action);
    color: var(--theme-primary-action-text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: var(--type-leading-ui);
}

.gallery-reply-submit:hover,
.gallery-reply-edit-submit:hover {
    border-color: var(--theme-primary-action-hover);
    background: var(--theme-primary-action-hover);
    color: var(--theme-primary-action-text);
    opacity: 1;
}

.gallery-reply-edit-submit {
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    font-size: var(--type-size-small);
}

.gallery-form-errors,
.gallery-field-error {
    margin: var(--type-space-tight) 0 0;
    color: var(--theme-error-text);
    font-size: var(--type-size-small);
}

.gallery-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .gallery-photo-link,
    .gallery-detail-close,
    .gallery-page-link {
        animation: none;
        scroll-behavior: auto;
        transition: none;
    }
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 14px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .gallery-reply-list.has-replies,
    .gallery-reply-children {
        margin-inline-start: var(--type-space-compact);
        padding-inline-start: var(--type-space-compact);
    }

    .gallery-reply-list.has-replies > .gallery-reply::before,
    .gallery-reply-children > .gallery-reply::before {
        inset-inline-start: calc(-1 * var(--type-space-compact) - 1px);
        width: var(--type-space-compact);
    }

    .gallery-reply-list.has-replies > .gallery-reply:not(:last-child)::after,
    .gallery-reply-children > .gallery-reply:not(:last-child)::after {
        inset-inline-start: calc(-1 * var(--type-space-compact) - 1px);
    }
}

@media print {
    .gallery-reply-composer,
    .gallery-child-reply-composer,
    .gallery-reply-edit-form,
    .gallery-reply-edit,
    .gallery-reply-delete,
    .gallery-reply-reply {
        display: none !important;
    }
}