/* ============================================================
   EzClap phone layer. Loaded after the page styles from base.html and
   from the standalone caption editor. Everything lives inside one
   breakpoint so desktop rendering is untouched. Targets: no horizontal
   overflow at 390px, 44px touch targets, 16px inputs (no iOS zoom),
   sticky bars that respect the notch.
   ============================================================ */
@media (max-width: 768px) {

    /* ---- shell ---------------------------------------------------- */
    html, body { overflow-x: hidden; overscroll-behavior-x: none; }
    img, video, canvas, svg { max-width: 100%; }
    .main-content { padding-left: 14px; padding-right: 14px; min-width: 0; }
    /* page headings: the desktop 2rem title plus its margins ate a fifth of the first screen */
    .main-content h1, .main-content .page-title { font-size: 1.35rem; margin: 6px 0 10px; }
    .main-content .page-header { margin-bottom: 8px; }
    #mobile-menu-btn { min-width: 44px; min-height: 44px; }
    .sidebar-menu a { min-height: 44px; display: flex; align-items: center; }
    .checklist-dismiss { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .sidebar .sidebar-scroll-area { -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom); }

    /* hover tooltips: invisible on touch, but their absolutely positioned
       pseudo-elements still widen the page (found on the caption editor) */
    [data-tooltip]::before, [data-tooltip]::after, [data-tip]::before, [data-tip]::after { display: none !important; }

    /* ---- controls everywhere ------------------------------------- */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select, textarea { font-size: 16px; }
    button, .btn, .ez-btn, [role="button"], a.hub-tile-cta { min-height: 44px; }
    .ez-btn--sm { min-height: 40px; }
    .modal-close, .ez-modal__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .toggle, .toggle-switch, .card-toggle-container, label.toggle { min-height: 44px; display: inline-flex; align-items: center; }
    .toggle-container { min-height: 44px; }

    /* modals become bottom sheets */
    .ez-modal, .modal-content, .modal-container, .sound-picker-dialog {
        width: 100% !important; max-width: 100% !important; margin: auto 0 0 0;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        max-height: 92svh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom);
    }
    .ez-modal-backdrop, .modal-overlay, .modal-backdrop { align-items: flex-end; }

    /* tables and wide widgets scroll inside themselves */
    table { display: block; overflow-x: auto; max-width: 100%; }

    /* ---- library ------------------------------------------------- */
    /* phones are for on-the-go clip work: the desktop feature hub and the
       tall storage/filter cards pushed the clips a full screen down */
    #feature-hub { display: none; }
    /* the page's own rules for these load after this file, so match them
       with one extra selector level */
    .main-content .storage-bar-container { padding: 8px 12px; margin-bottom: 10px; }
    .main-content .storage-bar { height: 8px; }
    .main-content .storage-bar-text { font-size: 12px; margin-top: 4px; }
    .main-content .controls { padding: 10px 12px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    .main-content .controls form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
    .main-content .controls label { margin: 0; }
    .main-content .filter-flags { gap: 8px 14px; flex-wrap: wrap; }
    .hub-tile { min-height: 64px; }
    /* keep two columns (one column made each 9:16 card ~660px tall); the
       four icon buttons wrap into two rows of two so each is 44px */
    .actions-row { flex-wrap: wrap; gap: 8px; }
    .actions-row .icon-btn { flex: 1 1 40%; min-width: 44px; min-height: 44px; }
    .icon-btn.delete-btn { width: auto; }
    /* an <a> styled as a button does not centre its text vertically; make it flex */
    .clip-actions .caption-action-area, .clip-actions .caption-form { height: auto; }
    .clip-actions .caption-btn, .clip-actions .caption-btn.burn-btn-gradient {
        display: flex !important; align-items: center !important; justify-content: center !important;
        min-height: 40px !important; height: 40px !important; padding: 0 6px !important; line-height: 1.2 !important;
    }

    /* library: the caption editor modal (iframe) fills the screen; its
       prev/next clip circles and the close button move into a slim band at
       the bottom instead of floating over the editor at mid-height */
    #edit-caption-modal { padding: 0; }
    #edit-caption-modal .modal-content.modal-caption-editor { width: 100%; height: 100%; max-height: 100%; max-width: 100%; margin: 0; border-radius: 0; border: none; }
    #edit-caption-modal .modal-body { padding: 0 0 calc(52px + env(safe-area-inset-bottom)); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    #caption-editor-slider { flex: 1 1 auto; min-height: 0; }
    #caption-editor-frame { height: 100%; }
    #edit-caption-modal .modal-nav-arrow { top: auto; bottom: calc(6px + env(safe-area-inset-bottom)); transform: none; width: 40px; height: 40px; z-index: 2; }
    #edit-caption-modal .modal-nav-arrow.left { left: 14px; }
    #edit-caption-modal .modal-nav-arrow.right { right: 14px; }
    #edit-caption-modal .close-modal { top: auto; bottom: calc(2px + env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%); font-size: 34px; line-height: 44px; width: 44px; text-align: center; z-index: 2; }

    /* ---- spotlight ----------------------------------------------- */
    .qa-btn { min-width: 44px; min-height: 44px; }
    #spotlight-controls { flex-wrap: wrap; gap: 8px; }

    /* ---- schedule ------------------------------------------------ */
    .weekday-picker { display: flex; flex-wrap: wrap; gap: 8px; }
    .weekday-btn { min-width: 44px; min-height: 44px; }
    .schedule-calendar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ---- auto-publish -------------------------------------------- */
    .streamsync-timeline-root { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .has-bottom-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    /* ---- wizard -------------------------------------------------- */
    .crop-container { touch-action: none; }
    .resize-handle { width: 22px; height: 22px; }
    /* invisible 44px hit area around each handle, without changing its look */
    .resize-handle::after { content: ""; position: absolute; inset: -11px; }
    .guide-btn { min-height: 44px; padding-left: 12px; padding-right: 12px; }
    #preview-shell { max-width: 100%; }
    .wizard-guide-arrow { display: none; }

    /* ---- super editor ------------------------------------------- */
    /* filters two per row, search full width, actions in one row */
    .controls-panel { padding: 12px; }
    /* the page's own phone rule sets flex-direction: column on this container
       and loads after this file; the extra selector depth wins over it */
    .controls-panel .controls-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 8px; }
    .controls-panel .filter-group.search-group, .controls-panel #custom-date-range { grid-column: 1 / -1; }
    .controls-panel .filter-group { width: auto; min-width: 0; gap: 4px; }
    .filter-group label { font-size: 12px; margin-bottom: 4px; }
    .search-hint { font-size: 11px; margin: 2px 0 0; }
    .controls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
    .controls-actions-left { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
    .selected-count { min-height: 40px; padding: 0 12px; white-space: nowrap; display: inline-flex; align-items: center; }
    .btn-refresh { min-height: 40px; white-space: nowrap; }
    .btn-process { flex: 1 1 100%; width: 100%; }
    /* round buttons: keep width = height (the generic 44px min-height made them oval) */
    .btn-play { width: 44px; height: 44px; min-height: 44px; padding: 0; }
    .processing-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    /* ---- caption editor (standalone page) ------------------------ */
    /* The custom player controls overflowed the right edge and made the
       browser zoom the page out to 795px. Wrap them, drop the volume
       slider (phones have hardware volume), keep buttons 44px. */
    /* Player on phones: the wrapper is a 9:16 box capped in height, which
       made the video a small letterboxed frame with the controls overlaid
       across it. Instead size the video itself and put the controls below. */
    .video-wrapper.ez-player-wrapper { aspect-ratio: auto; max-height: none; height: auto; display: flex; flex-direction: column; align-items: center; }
    .video-wrapper.ez-player-wrapper .ez-player-video { width: auto; height: 36vh; max-width: 100%; }
    .video-wrapper.ez-player-wrapper .ez-player-controls { position: static; opacity: 1; pointer-events: auto; width: 100%; padding: 8px 6px 6px; background: none; }
    .ez-big-play { top: 18vh; }
    /* one compact row: five 36px buttons plus the time fit in 328px */
    .ez-controls-row { flex-wrap: nowrap; gap: 6px; align-items: center; }
    .ez-controls-left, .ez-controls-right { gap: 6px; flex-wrap: nowrap; }
    .ez-volume-container { display: none; }
    .ez-controls-row .ez-btn, .ez-controls-row button { min-width: 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; }
    .ez-controls-row .ez-btn svg, .ez-controls-row button svg { width: 18px; height: 18px; }
    .ez-time-display { font-size: 11px; white-space: nowrap; margin-left: auto; }
    .video-wrapper.ez-player-wrapper .ez-player-controls { padding: 6px 4px 4px; gap: 6px; }
    .trim-btn, #btn-set-start-current, #btn-set-end-current { min-height: 44px; }
    .caption-text-area { font-size: 16px; }
    .caption-card-actions button { min-height: 44px; }
    .caption-voice-btn, .caption-ghost-btn, .caption-delete-btn { min-width: 44px !important; width: auto !important; min-height: 44px; }
    .caption-card-header, .caption-card-top { flex-wrap: wrap; gap: 6px; }
    .control-group .actions { flex-wrap: wrap; gap: 8px; }
    .control-group .actions .btn { flex: 1 1 45%; }
}

/* touch devices regardless of width: tooltips do not exist */
@media (hover: none) and (pointer: coarse) {
    .keyboard-tip, .kbd-hint { display: none; }

    /* Sticky hover: after a tap the button keeps :hover, and on these buttons
       the hover look is identical to the selected look, so toggling the mark
       appeared to do nothing. On touch, hover shows the base look unless the
       button really is selected. */
    .icon-btn.delete-btn:hover:not(.selected-delete),
    .icon-btn.download-btn:hover:not(.selected-download) {
        background: none;
        border-color: var(--border-color);
        color: var(--text-muted);
    }
    .editor-delete-btn:hover:not(.selected-delete):not(.is-locked) {
        background: var(--surface-color);
        border-color: var(--border-color);
        color: var(--text-color);
    }
}