/* ============================================================
   Touch and app affordances.
   This is installed as a PWA and wrapped with Capacitor, so it has to
   behave like an app in a WebView, not like a page in a desktop browser.
   ============================================================ */

/* ---------------------------------------------------- tap behaviour */

a, button, .btn, .iconbtn, .chip, .opt, .tile, .card--hover,
select, input[type="checkbox"], input[type="radio"], summary,
[data-tab], [data-mode], [data-act], [data-theme-btn] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;          /* removes the 300ms click delay */
}

button, .btn, .iconbtn, .chip, .bottomnav a, .mode-switch button,
.btn-group button, .tabs button, .pvcard__grip {
    -webkit-user-select: none;
    user-select: none;
}

/* text the learner may actually want to copy stays selectable */
.block__body, .reader-body p, .card-table, pre, code, .outcard pre {
    -webkit-user-select: text;
    user-select: text;
}

/* ------------------------------------------------ press feedback */

@media (hover: none) {
    /* no hover on a finger — press states carry the whole interaction */
    .btn:active            { transform: scale(.97); }
    .iconbtn:active        { background: var(--surface-3); transform: scale(.92); }
    .tile:active,
    .card--hover:active    { transform: scale(.985); }
    .opt:active:not(:disabled) { transform: scale(.985); background: var(--primary-soft); }
    .chip:active           { transform: scale(.95); }
    .bottomnav a:active    { background: var(--surface); }
    .dropdown-menu a:active,
    .dropdown-menu button:active { background: var(--surface-3); }

    /* hover-only affordances must be permanently visible on touch */
    .block__tools { opacity: 1; }
    .codecard__foot .cbtn, .codecard__head .cbtn { border-color: var(--code-border); }
    .pvcard__tools { opacity: 1; }
}

/* -------------------------------------------------- tap target size */

@media (pointer: coarse) {
    .iconbtn                    { min-width: 44px; min-height: 44px; }
    .iconbtn.btn--sm            { min-width: 40px; min-height: 40px; }
    .btn                        { min-height: 46px; padding: 0 18px; }
    .btn--sm                    { min-height: 40px; padding: 0 14px; }
    .chip                       { min-height: 40px; }
    .opt                        { padding: 14px 15px; }
    .mode-switch button,
    .btn-group button           { min-height: 38px; padding: 8px 14px; }
    .tabs button                { min-height: 46px; }
    .table .cell-actions .iconbtn { min-width: 40px; min-height: 40px; }
    .toc a                      { min-height: 40px; }
    .qgrid button               { min-height: 42px; }
    .checkline input[type="checkbox"],
    .checkline input[type="radio"] { width: 21px; height: 21px; }
    .pvcard__tools .iconbtn     { min-width: 38px; min-height: 38px; }

    /* iOS zooms the page when a font under 16px gets focus */
    .input, .select, .textarea  { font-size: 16px; }
}

/* --------------------------------------------------- scroll feel */

.table-wrap, .table-scroll, .codecard__body, .outcard pre,
.si__scroll, .toc, .modal-body, .adm-side__nav, .tabs, .rawview {
    -webkit-overflow-scrolling: touch;
}

/* a horizontal scroller must not drag the whole page sideways */
.table-wrap, .table-scroll, .codecard__body, .tabs, .qgrid {
    overscroll-behavior-x: contain;
}

/* panels that scroll internally should not chain to the page behind them */
.modal-body, .si__scroll, .toc, .dropdown-menu, .sheet {
    overscroll-behavior-y: contain;
}

/* NOTE: never set overscroll-behavior-y on html/body — it breaks
   scrolling inside an Android WebView build. */

/* ------------------------------------------------------ safe areas */

.appbar-inner,
.reader-bar-inner { padding-left: max(var(--sp-5), env(safe-area-inset-left));
                    padding-right: max(var(--sp-5), env(safe-area-inset-right)); }

.page             { padding-left: max(var(--sp-5), env(safe-area-inset-left));
                    padding-right: max(var(--sp-5), env(safe-area-inset-right)); }

.toasts           { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 16px); }

/* ------------------------------------------- standalone / app mode */

@media (display-mode: standalone) {
    /* installed app: the browser chrome is gone, so give the bar the status bar back */
    .appbar { padding-top: env(safe-area-inset-top); }
    .reader-bar { padding-top: env(safe-area-inset-top); }

    /* an installed app has its own back gesture — the browser hints are noise */
    .appfoot { display: none; }
}

/* ---------------------------------------------- pointer refinements */

@media (hover: hover) and (pointer: fine) {
    .block__tools { opacity: 0; }
    .block:hover .block__tools,
    .block:focus-within .block__tools { opacity: 1; }
}

/* keyboard users always get the tools, whatever the input device */
.block__tools:focus-within { opacity: 1; }

/* ------------------------------------------------------ scrollbars */

@media (pointer: coarse) {
    /* thin overlay scrollbars only get in the way on a touch screen */
    *::-webkit-scrollbar { width: 0; height: 0; }
}

/* -------------------------------------------------- drag behaviour */

.pvcard__grip { touch-action: none; }   /* let the grip own the gesture */
img, .brand-mark, .avatar { -webkit-user-drag: none; user-select: none; }

/* --------------------------------------------------- app polish */

/* stop the address-bar-height jump on mobile browsers */
@supports (height: 100dvh) {
    .auth-shell { min-height: 100dvh; }
    .code-fullscreen { height: 100dvh; }
}

/* the bottom sheet should sit above the home indicator */
.sheet { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }