/* ═══════════════════════════════════════════════════════════════════════════
   RMQ CENTRAL STYLE SHEET — motion and the Appearance panel.   (Robert, 2026-09-27)

   Colors come from rmq-theme.css. No color literals in this file.

   The shared building blocks (page reset, body, header, form fields, overlays…)
   are NOT here: they live in templates/partials/rmq_blocks.html, and each page
   pulls in the ones it uses, at the spot the rule always sat. That way a block
   can never restyle a page that didn't already have it.

   Sections:  1 motion   2 the Appearance panel
   (Wide-screen layout is rmq-layout.css, loaded AFTER the page's own styles.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Motion ──────────────────────────────────────────────────────────────
   data-motion is set on <html> by rmq-theme.js: the person's choice, or the
   device's Reduce Motion setting when the choice is "Match device". */

[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ── 2. The Appearance panel ────────────────────────────────────────────────
   Opens on top of whatever page you are on (static/rmq-appearance.js).
   Phone: a sheet that slides up from the bottom. 768px and up: a bar that
   slides down from the top. The page stays visible and restyles live. */

.rmq-ap-scrim {
    position: fixed;
    inset: 0;
    z-index: 1990;
    background: transparent;
}

.rmq-ap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-2);
    border-top: 1px solid var(--line-20);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgb(var(--shadow-rgb) / 0.35);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rmq-ap.rmq-ap-open {
    transform: none;
}

.rmq-ap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rmq-ap-title {
    font-size: 1rem;
    font-weight: 700;
}

.rmq-ap-done {
    width: auto;
    padding: 8px 18px;
    border: none;
    border-radius: 18px;
    background: var(--red);
    color: var(--on-accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.rmq-ap-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rmq-ap-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rmq-ap-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-70);
}

.rmq-ap-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rmq-ap-opt {
    width: auto;
    padding: 8px 12px;
    border: 1px solid var(--line-20);
    border-radius: 10px;
    background: var(--surface-05);
    color: var(--gray-a0);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.rmq-ap-opt[aria-pressed="true"] {
    border-color: var(--teal);
    background: rgb(var(--teal-rgb) / 0.15);
    color: var(--teal);
}

.rmq-ap-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rmq-ap-sw {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--rmq-ap-sw);
    cursor: pointer;
}

.rmq-ap-sw[aria-pressed="true"] {
    border-color: var(--text);
}

.rmq-ap-pick {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--line-30);
    background: var(--rmq-ap-wheel);
    cursor: pointer;
}

.rmq-ap-pick input {
    position: absolute;
    inset: -8px;
    width: auto;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.rmq-ap-note {
    font-size: 0.75rem;
    color: var(--gray-a0);
}

@media (min-width: 768px) {
    .rmq-ap {
        top: 0;
        bottom: auto;
        max-height: none;
        padding: 12px 24px;
        border-top: none;
        border-bottom: 1px solid var(--line-20);
        border-radius: 0;
        box-shadow: 0 12px 40px rgb(var(--shadow-rgb) / 0.35);
        transform: translateY(-105%);
    }

    .rmq-ap-inner {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 12px 26px;
        max-width: 1320px;
        margin: 0 auto;
    }

    .rmq-ap-head {
        order: 2;
        margin: 0 0 0 auto;
        gap: 16px;
    }

    .rmq-ap-rows {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 26px;
    }
}

/* Theme switch: the new look wipes out in a circle from where you tapped.
   Browsers without View Transitions just switch. */
.rmq-ap-wipe::view-transition-old(root) {
    animation: none;
}

.rmq-ap-wipe::view-transition-new(root) {
    animation: rmq-ap-wipe 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes rmq-ap-wipe {
    from { clip-path: circle(0 at var(--rmq-ap-x, 50%) var(--rmq-ap-y, 50%)); }
    to { clip-path: circle(150vmax at var(--rmq-ap-x, 50%) var(--rmq-ap-y, 50%)); }
}