/* mobile-polish.css — additive responsive tweaks loaded after app.css.
 *
 * These rules only fire below 900px (mobile + small-tablet) so they
 * never touch the desktop layout. Strict additive policy: only tighten
 * touch-targets and constrain off-canvas overflow — no layout reflows.
 *
 * Loaded after app.css from index.html, so these rules win on the
 * specificity tie. */


/* ─────────────────────────────────────────────────────────────────
 *  Touch-target floor — 44×44px iOS HIG minimum.
 *  Applied on small viewports where finger taps are the primary
 *  input. Desktop keeps the existing tighter button heights.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (pointer: coarse) {

    /* All visible buttons get a minimum hit area. Use min-* so we never
       shrink existing larger targets. Inline-flex keeps icon centering. */
    .btn,
    .btn-icon,
    .tool,
    .icon-btn,
    .editor button,
    .topbar button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Form controls — same rule. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;          /* prevents iOS auto-zoom on focus */
    }

    /* Anchor-tags styled as buttons (rare, but they exist). */
    a.btn,
    a.btn-primary,
    a.btn-icon {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ─────────────────────────────────────────────────────────────────
 *  Editor — stop horizontal overflow on narrow screens.
 *  The pattern-strip is 320px fixed on desktop; on mobile it should
 *  fill the available width instead of forcing a horizontal scroll.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {

    .editor > .pattern-strip,
    .editor .pattern-strip {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
    }

    .editor > .color-strip,
    .editor .color-strip {
        max-width: 100vw;
    }

    /* Toolbar — give the horizontal-scroll behavior a visual hint that
       there's more to the right. Soft fade on the right edge. */
    .editor > .toolbar {
        position: relative;
    }
    .editor > .toolbar::after {
        content: "";
        position: sticky;
        right: 0;
        height: 100%;
        width: 24px;
        pointer-events: none;
        background: linear-gradient(
            to right,
            rgba(245, 239, 228, 0),
            var(--surface, #f5efe4)
        );
    }
}


/* ─────────────────────────────────────────────────────────────────
 *  Modal overlays on mobile — full-width with safe-area padding.
 *  iOS Safari leaves a notch / home-bar inset; respect it.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .modal-card {
        width: calc(100vw - 1.5rem);
        max-width: calc(100vw - 1.5rem);
        margin: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
                env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    }

    /* Settings page card — already has max-width 560px; on phone
       collapse to the full screen so long forms don't waste space. */
    .settings-page-card {
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0;
    }
}


/* ─────────────────────────────────────────────────────────────────
 *  Footer — wrap when too narrow instead of horizontal scroll.
 * ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .site-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: .4rem;
    }
}