/* ══════════════════════════════════════════════════════════════
   Notespark — touch pointers

   The three-column desktop layout is mouse-tuned: controls reveal on
   hover, the splitter is 8px, rows are ~30px. An iPad in landscape
   (1080–1366px) gets that layout, and none of those assumptions hold.

   Gated on (pointer: coarse) — catches any touch device at any width,
   including a touchscreen laptop, and leaves trackpad users alone.

   Load AFTER nota-layout.css, nota-sidebar.css and nota-splitters.css.
   ══════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {

    /* ══ HOVER-REVEALED CONTROLS ═══════════════════════════════
       There is no hover on a touchscreen. iPadOS emulates it on the
       first tap, so a notebook row currently needs two taps: one to
       reveal the actions, another to open it.

       These hide with `width: 0; overflow: hidden`, not opacity, so
       both have to be undone. Widths match what the hover rules in
       nota-sidebar.css use, so nothing shifts relative to mouse. */

    .nota .nav-item-edit {
        opacity: .55;
        width: 20px;
    }

    .nota .sb-sec-edit,
    .nota .sb-sec-del {
        opacity: .55;
        width: 20px;
        margin-right: 2px;
    }

    .nota .sb-move {
        width: 18px;
    }

    /* .sb-nb-actions is display:none → display:flex on hover in
       nota-layout.css, so opacity alone does nothing here.

       The warning in nota-sidebar.css is real: six permanently visible
       buttons crush notebook titles to "Ch…". The compromise is the
       same sizing the hover state already uses (20px buttons, 1px gap,
       no growth) plus the existing title ellipsis — titles get tight
       but stay readable, and every control is one tap instead of two. */
    .nota .sb-nb-actions {
        display: flex !important;
        align-items: center;
        gap: 1px;
        flex: 0 0 auto;
        opacity: .6;
    }

    .nota .sb-nb-actions .sb-act {
        width: 20px;
        height: 20px;
    }

    /* ══ HIT TARGETS ═══════════════════════════════════════════
       Apple's guidance is 44pt; these are 20–22px and can't simply be
       grown — six of them at 34px would be wider than the sidebar.

       Instead each button gets an invisible overlay extending past its
       bounds. The tap area roughly doubles with zero layout change.
       Buttons sit close together, so the overlay is deliberately
       modest — bleeding 6px each way rather than to a full 44px, which
       would make neighbouring targets overlap and misfire. */

    .nota .sb-act,
    .nota .sb-sec-edit,
    .nota .sb-sec-del,
    .nota .nav-item-edit,
    .nota .nav-item-delete {
        position: relative;
    }

    .nota .sb-act::after,
    .nota .sb-sec-edit::after,
    .nota .sb-sec-del::after,
    .nota .nav-item-edit::after,
    .nota .nav-item-delete::after {
        content: "";
        position: absolute;
        top: -7px;
        bottom: -7px;
        left: -3px;
        right: -3px;
    }

    /* Rows themselves have room to grow and are the main tap target. */
    .nota .sb-navrow,
    .nota .sb-caprow,
    .nota .sb-nb-row,
    .nota .sb-sec,
    .nota .nav-item {
        min-height: 40px;
    }

    .nota .home-sec-head,
    .nota .home-row {
        min-height: 42px;
    }

    /* ══ SPLITTERS ═════════════════════════════════════════════
       Both handles, 8px wide, already carry touch-action:none — good.
       Widening to 44px with a matching negative margin keeps the
       layout footprint at 8px while giving a finger something to
       find. The ::after hairline and ::before grip are positioned at
       left:50%, so they stay centred without further change. */

    .nota .nota-divider,
    .nota .notes-divider {
        width: 44px;
        margin-left: -18px;
        margin-right: -18px;
    }

    /* The grip only appears on hover, which is the one affordance a
       touch user never gets. Show it permanently but quietly. */
    .nota.theme-light .nota-divider::before,
    .nota.theme-light .notes-divider::before {
        color: rgba(0, 0, 0, 0.30);
    }

    /* ══ iOS INPUT ZOOM ════════════════════════════════════════
       Safari zooms the page when focusing an input under 16px. In a
       three-column layout that zoom is disorienting and doesn't undo
       cleanly on blur. */

    .nota input[type="text"],
    .nota input[type="email"],
    .nota input[type="password"],
    .nota input[type="search"],
    .nota textarea,
    .nota select,
    .nota .form-input,
    .nota .sp-input,
    .nota .s-input {
        font-size: 16px;
    }

    /* ══ TAP FEEL ══════════════════════════════════════════════
       Long-press on a row triggers iOS text selection and the callout
       menu rather than feeling like a button. Note bodies are left
       alone — text in a note still needs to be selectable. */

    .nota .sb-nb-row,
    .nota .sb-navrow,
    .nota .sb-caprow,
    .nota .sb-sec,
    .nota .nav-item,
    .nota .home-row,
    .nota .home-sec-head,
    .nota .tab-item {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* The grey tap flash fires on every row and reads as a rendering
       glitch beside the app's own hover states. */
    .nota button,
    .nota .home-row,
    .nota .nav-item,
    .nota .sb-nb-row,
    .nota .sb-sec {
        -webkit-tap-highlight-color: transparent;
    }

    /* ══ SCROLLING ═════════════════════════════════════════════ */

    .nota .sb-scroll,
    .nota .nota-body,
    .nota .home-content,
    .nota .notes-panel {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ══ DRAGGING A SPLITTER BY FINGER ═════════════════════════════
   nota-splitters.js puts body.nota-resizing on during a drag. On
   touch the col-resize cursor is meaningless, but suppressing
   selection and neutralising iframes still matters — and the page
   must not scroll while a finger is dragging the handle. */

@media (pointer: coarse) {
    body.nota-resizing {
        overflow: hidden;
        touch-action: none;
    }
}