/* Photo-frame maker (/collage) */

/* The three bundled TTFs are also offered as canvas fonts. They must be real
   @font-face rules, not just names, or the canvas silently falls back to the
   default sans-serif. collage.js waits for document.fonts before drawing. */
@font-face {
    font-family: "CollageNoto";
    src: url("/media/fonts/NotoSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: block;
}

@font-face {
    font-family: "CollageGabriela";
    src: url("/media/fonts/Gabriela-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: "CollageTriodion";
    src: url("/media/fonts/Triodion-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: block;
}

.cm-head {
    margin-bottom: 1.25rem;
}

.cm-head__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.cm-head__lead {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0;
    max-width: 62ch;
}

.cm-head__back {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.cm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .cm-grid {
        grid-template-columns: minmax(0, 5fr) minmax(300px, 4fr);
        gap: 2rem;
    }
}

/* ── Preview ─────────────────────────────────────────────────────────────── */

.cm-stage {
    /* Sticky only next to the controls; stacked on a phone it would pin a
       500px-tall canvas over the form. */
    position: static;
}

@media (min-width: 992px) {
    .cm-stage {
        position: sticky;
        top: 1rem;
    }
}

.cm-canvas-wrap {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #eef1f5;
    box-shadow: 0 10px 30px rgba(11, 18, 32, .14);
}

.cm-canvas {
    display: block;
    width: 100%;
    height: auto;
    /* The canvas is the drag surface, so the browser must not claim the
       gesture for scrolling or pinch-zooming the page. */
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.cm-canvas.is-dragging {
    cursor: grabbing;
}

.cm-canvas.is-empty {
    cursor: default;
}

/* [hidden] is only display:none in the UA sheet, so this author display rule
   would override it and pin the loader on screen for ever. */
.cm-canvas-loader[hidden] {
    display: none;
}

.cm-canvas-loader {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: rgba(11, 18, 32, .72);
}

/* Sits over the empty window so the whole preview is one big upload target. */
.cm-dropzone {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.5rem;
    border: 0;
    background: transparent;
    color: #0b1220;
    text-align: center;
}

.cm-dropzone[hidden] {
    display: none;
}

.cm-dropzone__title {
    font-size: 1.05rem;
    font-weight: 700;
}

.cm-dropzone__hint {
    font-size: 0.8rem;
    color: #475569;
    max-width: 22ch;
}

.cm-dropzone.is-over {
    background: rgba(0, 150, 110, .12);
    outline: 3px dashed var(--green);
    outline-offset: -12px;
}

.cm-stage__hint {
    margin: 0.75rem auto 0;
    max-width: 460px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

/* ── Controls ────────────────────────────────────────────────────────────── */

.cm-block {
    padding: 1rem;
    border: 1px solid var(--ring);
    border-radius: 14px;
    background: var(--card);
}

.cm-block+.cm-block {
    margin-top: 1rem;
}

.cm-block__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.75rem;
}

.cm-frames {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.6rem;
}

.cm-frame {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 2px solid var(--ring);
    border-radius: 10px;
    background: var(--card);
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--muted);
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}

.cm-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.cm-frame:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.cm-frame.is-active {
    border-color: var(--green);
    color: var(--ink);
    font-weight: 600;
}

.cm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cm-field {
    display: block;
    margin-top: 0.75rem;
}

.cm-block .cm-field:first-of-type {
    margin-top: 0;
}

.cm-field__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.cm-field__value {
    font-weight: 400;
    color: var(--muted);
}

.cm-colors {
    display: flex;
    gap: 0.5rem;
}

.cm-color {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid var(--ring);
    border-radius: 50%;
    background: var(--cm-swatch, #000);
    box-shadow: inset 0 0 0 2px #fff;
}

.cm-color.is-active {
    border-color: var(--green);
    transform: scale(1.08);
}

.cm-block--download .btn {
    flex: 1 1 auto;
}

.cm-note {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.cm-note.is-error {
    color: var(--red);
    font-weight: 600;
}

/* ── Stickers ────────────────────────────────────────────────────────────── */

/* A gallery, so it scrolls inside its own box rather than stretching the
   panel; the frame picker above it stays visible while browsing. */
.cm-stickers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 0.4rem;
    max-height: 268px;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--ring);
    border-radius: 12px;
    background: var(--bg);
}

.cm-sticker {
    display: grid;
    place-items: center;
    padding: 0.2rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--card);
    transition: border-color .15s ease, transform .15s ease;
}

/* collage.js zooms each thumbnail onto its own artwork, which has to be clipped
   to the cell. The clip lives on this span rather than on the button, because
   WebKit does not apply overflow to a <button> — there the zoomed artwork spills
   over its neighbours instead. */
.cm-sticker__clip {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
}

.cm-sticker img {
    width: 100%;
    height: auto;
    transform-origin: center;
    /* collage.js reveals each thumbnail once it has measured and zoomed it. */
    transition: opacity .18s ease;
}

.cm-sticker:hover {
    border-color: var(--green);
    transform: translateY(-1px);
}

#cmStickerTools[hidden] {
    display: none;
}

/* Placeholder tile for the "no frame" choice, which has no artwork to show. */
.cm-frame__bare {
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    background: repeating-linear-gradient(45deg, #f1f3f5 0 6px, #e7eaee 6px 12px);
    color: var(--muted);
}

/* The text-sticker palette is wider than the caption one, so let it wrap. */
.cm-colors--wrap {
    flex-wrap: wrap;
}

#cmTextTools[hidden] {
    display: none;
}

/* Caption fields, hidden wholesale on a frame that has no place for them. */
#cmCaptionFields[hidden],
#cmCaptionNote[hidden] {
    display: none;
}

.cm-color:disabled {
    opacity: .4;
}