/*
 * Wyldcards on a touch screen — phones, iPads, Android tablets, touch laptops.
 *
 * app-shell.css already turns a narrow window into a phone app. This sheet is
 * about the finger rather than the width: an iPad at 1024px gets the desktop
 * layout, and the desktop layout was drawn for a mouse — 30px buttons, 13px
 * checkboxes, and controls that only appear while a pointer hovers the row
 * they belong to. A finger has no hover and needs about 44px to land on.
 *
 * Every rule sits behind a media query, so a mouse-only desktop sees nothing
 * from this file. Card designs are left exactly as drawn: the parts on a card
 * (everything inside .wyldcards-stack) keep the sizes their author gave them,
 * because growing them would move the card's layout. Only the chrome around a
 * card — toolbars, menus, forms, lists, the edit bar — grows.
 *
 * Loaded from fragments/nav.html after every other stylesheet, so the plain
 * `min-height`s below win over the `height`s set elsewhere without !important.
 */

:root {
    /* Apple's and Google's guidance agree on roughly 44–48px. */
    --touch-target: 44px;
}

/* ---------------------------------------------------------------------
 * Anything a finger can land on: no 300ms double-tap wait, no grey flash
 * over the whole element, and no text-selection loupe on a long press of
 * a button.
 * ------------------------------------------------------------------- */
@media (pointer: coarse), (any-pointer: coarse) {
    a, button, summary, label, select,
    input[type="button"], input[type="submit"], input[type="reset"],
    input[type="checkbox"], input[type="radio"],
    [role="button"], [role="menuitem"], [role="tab"], [role="option"] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    button, summary, [role="button"], [role="menuitem"], [role="tab"] {
        -webkit-user-select: none;
        user-select: none;
    }

    /* A long press on a drag handle starts a drag, not the system's
       copy / share callout. */
    .part-name-tag,
    .part-handle,
    .wyldcards-cards-grip,
    .text-document-drag-handle,
    .wyldcards-list-card-drag-handle,
    .wyldcards-card-list-grip,
    [draggable="true"] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Menus, sheets and dialogs scroll on their own without dragging the page
       behind them along once they reach the end. */
    .nav-dropdown-menu,
    .app-sheet-source,
    .confirm-modal-panel,
    dialog {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------
 * Tap targets. Buttons, menus and fields in the app's own chrome grow to
 * --touch-target. The card itself is excluded (see the header).
 * ------------------------------------------------------------------- */
@media (pointer: coarse), (any-pointer: coarse) {
    :is(button,
        summary,
        select,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        [role="button"]):not(.wyldcards-stack *):not(.block-left-controls *):not(.song-block-controls *):not(.create-below):not(.wyldcards-sync-status):not([hidden]) {
        min-height: var(--touch-target);
    }
    /* A <summary> styled as a button does not centre its label the way a
       <button> does, so a taller one needs telling. */
    summary.wyldcards-editbar-btn,
    summary[class*="-btn"]:not(.wyldcards-stack *) {
        display: inline-flex;
        align-items: center;
    }

    /* Square icon buttons — Help, the account menu, the arrows either side of
       the card number, row "…" buttons — get the width too. */
    .header-actions .nav-dropdown-toggle,
    .help-toggle-btn,
    .user-toggle-btn,
    .wyldcards-toolbar-arrow,
    .wyldcards-toolbar-star,
    .app-row-more,
    .wyldcards-list-action-btn--icon,
    .wyldcards-window-card-menu {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Links that behave as buttons: toolbar entries, menu rows, tabs. Inline
       links inside running text are left alone. */
    .wyldcards-toolbar-link,
    .wyldcards-toolbar-mode,
    .wyldcards-mode-status-action,
    .nav-dropdown-item,
    .nav-dropdown-menu a,
    .account-tabs a,
    .app-tab,
    .wyldcards-help-option,
    .login-footer-link,
    a[role="menuitem"],
    a[role="tab"] {
        min-height: var(--touch-target);
        display: inline-flex;
        align-items: center;
    }
    .nav-dropdown-item,
    .nav-dropdown-menu > a,
    .nav-dropdown-menu > li > a {
        display: flex;
    }

    /* The sync pill is a status, but it is also a button (retry, details).
       In the phone shell it is a small dot in the bar and stays one. */
    html:not(.app-shell) .wyldcards-sync-status {
        min-height: 36px;
        padding-inline: 0.6rem;
    }

    /* Checkboxes and radios in forms and lists: a 13px square is hard to hit
       and hard to see under a thumb. */
    input[type="checkbox"]:not(.wyldcards-stack *),
    input[type="radio"]:not(.wyldcards-stack *) {
        width: 1.35rem;
        height: 1.35rem;
        min-width: 1.35rem;
    }

    /* Text fields in the chrome get room for a fingertip and the caret. */
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
        select):not(.wyldcards-stack *) {
        min-height: var(--touch-target);
    }

    /* Rows of edit-bar buttons wrap with space between them, so a thumb aimed
       at one does not catch its neighbour. */
    .wyldcards-editbar-group,
    .wyldcards-toolbar-group,
    .header-actions-group {
        gap: 0.35rem;
    }
}

/* iOS Safari zooms the page in when a field under 16px takes focus, and stays
   zoomed after it loses it. Chrome fields never need to be smaller than that
   on a phone or tablet; fields on a card are handled by touch.js. */
@media (pointer: coarse) {
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
        select,
        textarea):not(.wyldcards-stack *) {
        font-size: max(16px, 1em);
    }
}

/* ---------------------------------------------------------------------
 * Hover-only controls. Without hover, a control that waits for the pointer
 * to cross its row can never be found. Show them — quietly — all the time.
 * ------------------------------------------------------------------- */
@media (hover: none) {
    .wyldcards-list-actions .wyldcards-list-action-btn--icon,
    .text-document-drag-handle,
    .wyldcards-cards-grip,
    .wyldcards-window-card button.wyldcards-window-card-menu {
        opacity: 1;
    }

    .song-block-controls {
        opacity: 0.6;
    }
    .song-block-row:focus-within .song-block-controls,
    .song-block-row:has(.song-block-menu-dropdown.open) .song-block-controls {
        opacity: 1;
    }

    /* The "+" under a screenplay block and the block's own menu. */
    a.create-below[role="button"],
    button.create-below.create-below-menu-toggle,
    .wyldcards-script .block-row a[role="button"]:not(.create-below),
    h1 > small a[role="button"],
    h1 > small .wyldcards-delete-btn,
    #table-scenes tr a[role="button"] {
        opacity: 0.6;
    }

    /* Remove buttons on list and checklist items are an editing control, not
       part of the card's look, so they show on every item. */
    .part-list-remove,
    .part-checklist .part-checklist-remove {
        opacity: 0.55;
    }

    /* A press is the only feedback a finger gets; give chrome buttons one. */
    :is(button, summary, [role="button"], .nav-dropdown-item, .wyldcards-toolbar-link):not(.wyldcards-stack *):active {
        filter: brightness(0.92);
    }
}

/* ---------------------------------------------------------------------
 * Edit mode on any touch screen, not only a phone: the part's label is the
 * move handle and the corner is a thumb-sized resize handle. (wyldcards.css
 * already does this below 800px; an iPad in landscape is wider than that.)
 * ------------------------------------------------------------------- */
@media (pointer: coarse) {
    .wyldcards-mode-edit .part-name-tag {
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        padding: 0.35rem 0.55rem;
        font-size: 0.75rem;
        opacity: 1;
        pointer-events: auto;
        cursor: grab;
        touch-action: none;
    }
    .wyldcards-mode-edit .part-handle {
        right: -14px;
        bottom: -14px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        opacity: 1;
        touch-action: none;
    }
    /* An invisible ring around the handle so a near miss still catches it. */
    .wyldcards-mode-edit .part-handle::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
}