/*  A tap is a click, and one tap does it (from Elbe Satranç, 2026-09-04).

    The companion of touch-tap-fix.js, which cuts every :hover rule out of the
    stylesheets on a device a finger is used on. These are the rules that
    cannot be cut, only added:

      * no grey flash under a tap, and no text selection from a long press —
        except in the places where selecting text is the point;
      * `touch-action: manipulation` on everything, so the browser never waits
        a third of a second to see whether a second tap is coming. `*` carries
        no specificity, so the boards keep their own `touch-action: none` (a
        finger on a board moves a piece and never the page);
      * the way back from a pinch — the button touch-tap-fix.js makes, shown
        only while the page is actually zoomed.

    `hover: none` OR `pointer: coarse`: a phone with a stylus or a paired
    mouse still reports a hover, and still needs all of this. */

@media (hover: none), (pointer: coarse) {
    * { -webkit-tap-highlight-color: transparent; }

    body {
        -webkit-user-select: none;
        user-select: none;
    }

    input, textarea, select, [contenteditable],
    .chat-messages, .chat-text, .swal2-html-container,
    .tr-notation-body, pre, code {
        -webkit-user-select: text;
        user-select: text;
    }

    * {
        touch-action: manipulation;
    }
}

/*  No zoom-in when a field gets focus (iOS, 2026-09-16).

    iOS WebKit zooms the whole page in — and pans to the field — whenever a
    text field smaller than 16px is focused, so on an iPhone the screen jumped
    left/right/up/down between the e-mail and password boxes. Android and the
    desktop browsers never do this, so the rule is applied only where it is
    needed: `-webkit-touch-callout` exists only in iOS WebKit (Safari and the
    app's WKWebView alike), which makes this @supports an iOS-only switch.
    16px is the threshold WebKit uses; below it the zoom happens, at it nothing
    does. Pinch-zoom is untouched — only the automatic focus zoom goes away.
    Check-boxes, radios, ranges and colour pickers draw no text and are left
    out; anything else a finger can type or pick into is covered, including
    the `.form-control-sm` / DataTables search sizes and inline `style`
    font-sizes (hence !important). */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea,
    [contenteditable="true"],
    [contenteditable=""] {
        font-size: 16px !important;
    }
}

/*  Placed from the top left and moved by a transform, because on a pinched
    phone "bottom right" in CSS means the bottom right of the whole page, which
    is usually off the screen.

    Both palettes, written here together:
      light  #312E81 on #E0E7FF   11.4:1, border #A5B4FC   1.9:1 on white
      dark   #E5E7EB on #1F2937   12.6:1, border rgba(255,255,255,0.25)  */
.elbe-unzoom {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    color: #312E81;
    background: #E0E7FF;
    border: 1px solid #A5B4FC;
    border-radius: 50%;
    box-shadow: 0 6px 18px -6px rgba(28, 22, 8, 0.55);
    transform-origin: top left;
    z-index: 2147483000;            /* over dialogs, over the bars, over everything */
    -webkit-tap-highlight-color: transparent;
}

.elbe-unzoom.show {
    display: flex;
}

body[data-bs-theme="dark"] .elbe-unzoom,
body.theme-dark .elbe-unzoom {
    color: #E5E7EB;
    background: #1F2937;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
}