/* tools/watermark.css
   The watermark maker keeps its settings open beside the previews: changing
   them and watching every photo redraw is the whole job, so on results the
   settings card stays in the album's card slot and the photos fill the rest. */
.tool-content.wm-page.has-results > .tool-settings {
    grid-column: 1 / 3;
    grid-row: 2 / span 2;
    align-self: start;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: flex;
}

.tool-content.wm-page.has-results > #results-view {
    grid-column: 3 / -1;
    grid-row: 2 / span 2;
}

@media (max-width: 1100px) {
    .tool-content.wm-page.has-results > #results-view {
        grid-column: 3 / -1;
    }
}

@media (max-width: 760px) {
    .tool-content.wm-page.has-results > .tool-settings {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.tool-settings .wm-text {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font: inherit;
    font-size: 0.95rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.tool-settings .wm-text:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.tool-settings .wm-text::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* The logo on a checkerboard, so a white logo and its removed background show. */
.wm-logo-preview {
    height: 64px;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #2a2a2e;
    background-image:
        linear-gradient(45deg, #3a3a3f 25%, transparent 25%),
        linear-gradient(-45deg, #3a3a3f 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3a3a3f 75%),
        linear-gradient(-45deg, transparent 75%, #3a3a3f 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

.wm-logo-preview img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.wm-logo-btn {
    width: 100%;
}

.wm-logo-note {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.wm-logo-note:empty {
    display: none;
}

.wm-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.wm-actions .btn-secondary {
    flex: 1;
}

.wm-card .compress-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.wm-card.is-saving {
    opacity: 0.6;
    cursor: progress;
}

/* Bigger previews than the compressor's, so the mark can be judged and dragged. */
.wm-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.wm-card {
    cursor: default;
}

.wm-card .compress-thumb canvas {
    cursor: grab;
    touch-action: none;
}

.wm-card .compress-thumb canvas:active {
    cursor: grabbing;
}

.wm-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wm-save {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    border: 0;
    background: #fff;
    color: #0d0d0f;
    cursor: pointer;
}

.wm-save:hover {
    background: rgba(255, 255, 255, 0.85);
}

.wm-actions .btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 10px 16px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 1;
}

.wm-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}

.wm-logo-btn.btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Idle: this tool's settings card is taller than the album's two rows, so
   the rows keep their 168px and the card runs on below them, instead of
   stretching the drop tile and the ghost tiles to its height. */
@media (min-width: 761px) {
    .tool-content.wm-page:not(.has-results) {
        grid-template-rows: auto 168px 168px;
    }
    .tool-content.wm-page:not(.has-results) > .tool-settings {
        grid-row: 2 / span 6;
        align-self: start;
    }
}

.wm-actions {
    justify-content: center;
}

.wm-actions .btn-secondary {
    flex: 0 1 auto;
    white-space: nowrap;
    min-width: 150px;
}

.wm-brand-btn {
    margin-bottom: 8px;
}

/* "No logo or watermark? Make one with text": a quiet disclosure under the
   file picker, white and underlined like every other link on the tools. */
.wm-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: -4px 0 16px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.wm-switch:hover {
    text-decoration-color: #fff;
}

.wm-switch[hidden] {
    display: none;
}

.wm-switch-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.wm-logo-btn[hidden],
.wm-switch[hidden] {
    display: none !important;
}

.wm-logo-preview[hidden] {
    display: none !important;
}