/* =========================================================
   MOCKUP FEED — full-screen vertical palette feed
   Loaded only on /mockups, so it is free to take over the page.
   ========================================================= */

body.mfeed-mode {
    margin: 0;
    padding-bottom: 0;
    overflow: hidden;
    background: #08080a;
    background-image: none;
    color: #fff;
    cursor: auto; /* the global `cursor: pointer` iOS hack makes no sense here */
}

body.mfeed-mode .main-header,
body.mfeed-mode .main-footer { display: none; }

body.mfeed-mode .content-wrapper { margin: 0; padding: 0; max-width: none; }

/* ---------- viewport & snapping ---------- */

.mfeed-viewport {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mfeed-viewport::-webkit-scrollbar { display: none; }

.mfeed-slide {
    position: relative;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

/* Backdrop painted from the palette on the slide itself. */
.mfeed-slide::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(60% 60% at 18% 12%, var(--c1) 0%, transparent 62%),
        radial-gradient(55% 55% at 88% 22%, var(--c2) 0%, transparent 60%),
        radial-gradient(65% 65% at 22% 92%, var(--c3) 0%, transparent 62%),
        radial-gradient(60% 60% at 92% 88%, var(--c4) 0%, transparent 60%),
        var(--c1);
    filter: saturate(1.15);
}
/* Dark scrim so white HUD text is readable over any palette. */
.mfeed-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.16) 26%, rgba(0,0,0,0.20) 58%, rgba(0,0,0,0.72) 100%);
}

/* ---------- horizontal mockup carousel ---------- */

.mfeed-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.mfeed-track::-webkit-scrollbar { display: none; }

.mfeed-stage {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    /* Room for the HUD at the bottom and the top bar above. */
    padding: 94px 24px 168px;
    box-sizing: border-box;
    /* Vertical space the stage furniture eats: padding + gap + caption.
       Kept as a variable so the media queries below can restate it in one
       place — a percentage height here would ignore the caption and
       overflow the slide. */
    --reserve: 314px;
    --gutter: 48px;
}

/* Fit the fixed-size design canvas into whatever space is left.
   height = min(available height, available width * aspect) — the classic
   contain formula. JS then sets --s so the px-perfect artwork scales. */
.mfeed-canvas {
    position: relative;
    aspect-ratio: var(--dw) / var(--dh);
    height: min(
        calc(100dvh - var(--reserve)),
        (100vw - var(--gutter)) * var(--dh) / var(--dw)
    );
    max-width: 100%;
    will-change: transform;
}

.mfeed-canvas-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(var(--s, 1));
    transform-origin: top left;
}

.mfeed-caption {
    font: 700 13px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 9px 18px;
    border-radius: 999px;
    flex: none;
}

/* ---------- carousel dots ---------- */

.mfeed-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 128px;
    display: flex;
    gap: 8px;
    z-index: 5;
}
.mfeed-dot {
    width: 7px; height: 7px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.38);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}
.mfeed-dot.is-active { width: 22px; background: #fff; }

/* ---------- HUD: actions left, palette right ---------- */

.mfeed-hud {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 6;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px calc(26px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}
.mfeed-hud > * { pointer-events: auto; }

.mfeed-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mfeed-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 58px;
    padding: 10px 8px;
    border: none;
    border-radius: 16px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    cursor: pointer;
    font: inherit;
    transition: background 0.2s ease, transform 0.15s ease;
}
.mfeed-btn:hover { background: rgba(255,255,255,0.20); }
.mfeed-btn:active { transform: scale(0.94); }
.mfeed-btn svg { display: block; }
.mfeed-btn-label {
    font: 700 11px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.mfeed-like.is-liked { background: rgba(225,48,108,0.9); }
.mfeed-like.is-liked svg { fill: #fff; stroke: #fff; }
@keyframes mfeed-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.mfeed-like.just-liked svg { animation: mfeed-pop 0.42s ease; }

.mfeed-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* Without this the tag row (below) dictates the column width; a couple of
       long tags then push the whole column — palette stack included — off the
       right edge of a phone. min-width:0 lets it shrink so the tags wrap
       instead. */
    min-width: 0;
}
.mfeed-tags {
    display: flex;
    flex-wrap: wrap;          /* wrap onto new rows rather than growing sideways */
    justify-content: flex-end;
    gap: 6px;
    max-width: 100%;
    font: 600 11.5px/1 Inter, system-ui, sans-serif;
    color: rgba(255,255,255,0.72);
}
.mfeed-tags span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 11px;
    border-radius: 999px;
}

/* The palette stack, bottom right. */
.mfeed-stack {
    display: flex;
    flex-direction: column;
    width: 74px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0,0,0,0.42);
}
.mfeed-chip {
    height: 46px;
    border: none;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: 800 10.5px/1 ui-monospace, monospace;
    letter-spacing: 0.06em;
    transition: height 0.2s ease;
}
/* Hex stays legible without hovering — on touch there is no hover, and the
   codes are half the reason the stack is there. */
.mfeed-chip span { opacity: 0.72; transition: opacity 0.18s ease; }
.mfeed-chip:hover span,
.mfeed-chip.is-copied span { opacity: 1; }
.mfeed-chip:hover { height: 56px; }

/* ---------- top bar: logo, filters, collections ---------- */

.mfeed-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.30) 62%, transparent 100%);
}
.mfeed-topbar > * { pointer-events: auto; }

.mfeed-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}
.mfeed-topbar-row > * { pointer-events: auto; }

/* Logo sits directly on the feed — no plate.
   Mobile keeps the colourful card mark from the main header (it already reads
   on dark); desktop swaps in the white wordmark. Box sizing still comes from
   the shared .logo-link rule, so it matches the main header at every
   breakpoint. The drop-shadow keeps it legible when a pale palette scrolls
   underneath, which a flat white logo would otherwise wash out against. */
.mfeed-logo {
    display: inline-flex;
    flex: none;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}

@media (min-width: 768px) {
    .mfeed-logo .logo-link {
        background-image: url('/images/palelttedeck-white-alpha.png');
    }
}

.mfeed-topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.mfeed-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    font: 700 12.5px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.2s ease;
}
.mfeed-pill:hover { background: rgba(255,255,255,0.26); }
.mfeed-pill-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 800 10.5px/17px Inter, system-ui, sans-serif;
    text-align: center;
}

/* ---------- filter panel ---------- */

.mfeed-panel[hidden] { display: none; }
.mfeed-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mfeed-panel-card {
    width: 100%;
    max-width: 560px;
    max-height: 86dvh;
    display: flex;
    flex-direction: column;
    background: #141417;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
}
.mfeed-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    flex: none;
}
.mfeed-panel-head h2 { margin: 0; font: 800 17px/1 Inter, system-ui, sans-serif; letter-spacing: -0.3px; }
.mfeed-panel-close {
    width: 34px; height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.mfeed-panel-body {
    padding: 18px 22px calc(26px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
}

.mfeed-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55);
    margin-bottom: 22px;
}
.mfeed-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font: 500 14px/1 Inter, system-ui, sans-serif;
    min-width: 0;
}
.mfeed-search input::placeholder { color: rgba(255,255,255,0.45); }

.mfeed-panel-group { margin-bottom: 22px; }
.mfeed-panel-group[hidden] { display: none; }
.mfeed-panel-group h3 {
    margin: 0 0 11px;
    font: 800 11px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}
.mfeed-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mfeed-option {
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font: 600 13px/1 Inter, system-ui, sans-serif;
    transition: background 0.2s ease;
}
.mfeed-option[hidden] { display: none; }
.mfeed-option:hover { background: rgba(255,255,255,0.18); }
.mfeed-option.is-active { background: #fff; color: #111; font-weight: 800; }
.mfeed-empty-hint {
    margin: 12px 0 0;
    font: 500 13px/1.5 Inter, system-ui, sans-serif;
    color: rgba(255,255,255,0.5);
}
.mfeed-empty-hint[hidden] { display: none; }

/* ---------- scroll hint + loader ---------- */

.mfeed-hint {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.78);
    font: 600 11.5px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.mfeed-hint.is-hidden { opacity: 0; }
@keyframes mfeed-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.mfeed-hint svg { animation: mfeed-bob 1.6s ease-in-out infinite; }

.mfeed-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    color: rgba(255,255,255,0.6);
    font: 600 12.5px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Author styles beat the UA rule for [hidden], so restate it explicitly —
   without this the end card shows on load. */
.mfeed-end[hidden] { display: none; }

.mfeed-end {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    scroll-snap-align: start;
    text-align: center;
    padding: 24px;
    background: #08080a;
}
.mfeed-end h2 { font: 900 27px/1.2 Inter, system-ui, sans-serif; margin: 0; letter-spacing: -0.6px; }
.mfeed-end p { color: rgba(255,255,255,0.6); margin: 0; font-size: 14.5px; }
.mfeed-end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mfeed-end a {
    padding: 13px 26px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 800 14px/1 Inter, system-ui, sans-serif;
}
.mfeed-end a.is-ghost {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* ---------- toast ---------- */

.mfeed-toast {
    position: fixed;
    left: 50%;
    bottom: 210px;
    transform: translate(-50%, 12px);
    z-index: 40;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    color: #111;
    font: 700 13px/1 Inter, system-ui, sans-serif;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mfeed-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- desktop ---------- */

@media (min-width: 900px) {
    .mfeed-topbar { padding: 18px 32px 12px; }
    .mfeed-stage {
        padding: 102px 24px 150px;
        --reserve: 304px;
        /* Stop wide browser mockups from spanning the whole monitor. */
        --gutter: max(48px, 100vw - 1180px);
    }
    .mfeed-hud { padding: 0 40px 34px; max-width: 1320px; left: 50%; right: auto; transform: translateX(-50%); width: 100%; box-sizing: border-box; }
    .mfeed-stack { width: 84px; }
    .mfeed-chip { height: 52px; font-size: 11.5px; }
    .mfeed-panel { align-items: center; }
    .mfeed-panel-card { border-radius: 22px; max-height: 78dvh; }
}

/* Keep the artwork usable on short landscape phones. */
@media (max-height: 560px) {
    .mfeed-topbar { padding: 10px 16px 8px; }
    .mfeed-stage {
        padding: 74px 16px 120px;
        gap: 12px;
        --reserve: 206px;
        --gutter: 32px;
    }
    .mfeed-caption { display: none; }
    .mfeed-dots { bottom: 104px; }
}

/* The 300px desktop logo is too wide next to the action pills on a phone;
   the shared .logo-link rule already swaps to the 150px mobile asset. */
@media (max-width: 420px) {
    .mfeed-pill-text { display: none; }
    .mfeed-pill { padding: 10px; }
}

/* Very narrow phones (~360px, e.g. Galaxy S8+). At full size the four action
   buttons plus the palette stack are wider than the viewport, so the stack
   collides with Share/Details and the tag column gets squeezed until labels
   truncate to "#…". Tighten the HUD's horizontal footprint to give the tags
   and stack their space back. */
@media (max-width: 380px) {
    .mfeed-hud { padding-left: 14px; padding-right: 14px; gap: 10px; }
    .mfeed-actions { gap: 5px; }
    .mfeed-btn { min-width: 50px; padding: 9px 5px; }
    .mfeed-btn-label { font-size: 10.5px; }
    .mfeed-stack { width: 64px; }
    .mfeed-chip { height: 42px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .mfeed-viewport, .mfeed-track { scroll-behavior: auto; }
    .mfeed-hint svg { animation: none; }
    .mfeed-like.just-liked svg { animation: none; }
}