/* =============================================================================
   ATRIUM · 08 · POSTURE REFINEMENT
   =============================================================================
   The shell's geometry lives in atrium.layout.css. This layer is the reality
   check on top of it: touch, gestures, keyboards, notches, and the handful
   of surfaces that must change seat rather than size.

   The alignment gutter (--at-mat) and the frame docking belong to the layout
   layer and are NOT repeated here — they were previously defined in both
   files, which meant two places to get the same number wrong.

   Standing audit findings this file closes:
     P0  inputs below 16px → iOS zooms the page on focus
     P0  search unreachable on phones (hidden with no alternative)
     P0  admin had no navigation below 64em (rail hidden, no tab bar)
     P1  touch targets under 44px: password reveal, .btn-close, comment
         delete, chat emoji trigger
     P1  profile post viewer could push its detail column offscreen
     P1  chat dialog floated on phones instead of owning the screen
     P2  gestures: double-tap-zoom delay, image ghost-drag, selectable chrome
     P2  keyboard: no "/" to search, Esc did not dismiss

   No layout may scroll the page horizontally; internal scroll regions are
   the only ones allowed an x-axis.
   ========================================================================== */

/* =============================================================================
   0 · OVERFLOW INSURANCE — every posture
   ========================================================================== */
html,
body {
    overflow-x: hidden;
    overflow-x: clip; /* clip: no scroll container is created */
    max-width: 100%;
}

.v-shell,
.v-main,
.v-post,
.v-grid,
.modal-body { min-width: 0; }

/* =============================================================================
   1 · TOUCH REALITY — any coarse pointer, any width
   ========================================================================== */
@media (pointer: coarse) {
    :root {
        --at-control-h: 2.75rem;     /* 44px — every control meets the floor  */
        --at-control-h-sm: 2.5rem;   /* 40px — compact controls stay tappable */
    }
}

/* Fields never trigger the iOS focus-zoom: 16px minimum where it matters.
   -----------------------------------------------------------------------------
   SPECIFICITY IS LOAD-BEARING HERE. This layer loads last, but "last" only
   wins between rules of EQUAL weight. `.v-composer .comment-input` (0,2,0)
   in the product layer sets 13px, so a bare `.comment-input` (0,1,0) here
   lost to it — and the comment field, the single most-used input in the
   product, zoomed the page on every iOS tap. Each selector below is written
   to at least match the weight of whatever sets its size elsewhere. */
@media (max-width: 47.98em), (pointer: coarse) {
    .v-input,
    .v-select,
    .v-textarea,
    .form-control,
    .form-select,
    .v-composer .comment-input,
    .v-chatcomposer__field #msginput,
    #msginput {
        font-size: 1rem; /* 16px */
    }
}

/* --- The 44px floor, for real -----------------------------------------------
   A coarse pointer gets the full target on the controls people actually
   press all day. The post action row was 36px square: comfortable with a
   mouse, and a genuine miss-rate on a thumb. The row grows a little on
   touch, which is the correct trade. */
@media (pointer: coarse) {
    .v-post__action {
        min-width: var(--at-hit);
        min-height: var(--at-hit);
    }

    .v-comment .delete-comment,
    .v-composer .add-comment,
    .emoji-picker-trigger,
    .v-back,
    .v-navicon {
        min-width: var(--at-hit);
        min-height: var(--at-hit);
    }

    /* Footer and prose links get a pressable band without changing type. */
    .v-footer__links a { padding-block: var(--at-s2); }
}

/* The wordmark is a link, so it is a target: it now fills the bar's height
   rather than being a 24px-tall image with dead space around it. */
.v-brand {
    min-height: var(--at-control-h);
    align-items: center;
}

/* Sub-floor targets, raised without moving their optics. */
.btn-close {
    box-sizing: border-box;
    width: var(--at-hit);
    height: var(--at-hit);
    padding: 0;
    background-size: 1em;
    background-position: center;
}

.auth-toggle-password,
.v-field__trail {
    width: var(--at-hit);
    min-height: 2.5rem;
}

.v-comment .delete-comment {
    padding: var(--at-s2);
    margin: calc(var(--at-s2) * -1); /* bigger hand, same optics */
}

/* Size only. Where it sits is the composer's business — this rule used to
   carry a hard-coded 3.25rem offset describing the old .input-group
   layout, which would have fought the docked panel's own positioning. */
.emoji-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--at-hit);
    height: var(--at-hit);
    padding: 0;
}

.v-footer__links a {
    display: inline-block;
    padding-block: var(--at-s1);
}

/* =============================================================================
   2 · GESTURES — native feel on every pointer
   ========================================================================== */
/* Kill the double-tap-zoom delay on everything interactive. dblclick-to-like
   on media still fires. */
a, button, input, select, textarea, label, summary, [role="button"],
.v-rowitem, .v-menu__item, .v-chip, .chatlist_item, .v-notif__body {
    touch-action: manipulation;
}

/* THE SELECTION MODEL — native by default.
   The whole interface is unselectable, the way an app's chrome is: navigation,
   header, footer, buttons, labels, badges, chips, avatars, stats, usernames in
   the UI, icons, menus, dropdown items, cards, notifications, message previews,
   tabs and page titles never highlight on a drag or a double-click.

   Selection is then GRANTED back exactly where a person edits or reads: every
   form control and contenteditable, and the readable bodies of posts, comments,
   messages, bios and prose — where copying is expected. Add .v-selectable to
   any other element that should be copyable. */
body {
    -webkit-user-select: none;
    user-select: none;
}

input, textarea, select, [contenteditable="true"], [contenteditable=""],
.v-input, .v-textarea, .v-select, .comment-input,
.v-post__text, .v-comment__text, .chat-message, .v-dm-msg__text,
.v-profile__biotext, .v-prose, .v-selectable {
    -webkit-user-select: text;
    user-select: text;
}

/* No image ever ghost-drags out of the app. */
img { -webkit-user-drag: none; }

/* `contain`, not `none`: this keeps iOS's native rubber-band bounce and momentum
   (the app must feel elastic, not nailed down) while still stopping the BROWSER's
   own pull-to-refresh and any scroll-chaining. `none` additionally suppressed the
   bounce, which is what made scrolling feel dead. The top-of-page pull is taken
   over by the in-app pull-to-refresh (assets/js/pull-refresh.js); inner scroll
   regions keep their own overscroll-behavior, set where they live. */
html, body { overscroll-behavior-y: contain; }

/* =============================================================================
   3 · ENFILADE — phones (< 48em)
   ========================================================================== */
@media (max-width: 47.98em) {

    /* --- search: reachable again -----------------------------------------
       The toggle in the top bar (navbar.php) opens the form as a full-width
       bar beneath the fixed chrome; "/" opens it from a keyboard too. */
    .v-topbar .v-search {
        display: none;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        max-width: none;
        padding: var(--at-s2) var(--at-mat);
        background: var(--at-surface);
        border-bottom: 1px solid var(--at-hairline);
        box-shadow: var(--at-shadow-md);
    }

    .v-topbar.is-search-open .v-search {
        display: block;
        animation: v-panel-in var(--at-t-base) var(--at-ease-out);
    }

    .v-topbar .v-search .v-search__panel { max-height: 55dvh; }

    /* --- sidebars go fullscreen ------------------------------------------
       A 400px panel with a sliver of dimmed page beside it is a desktop
       convention. On a phone a sidebar owns the whole screen, slides in from
       its edge, scrolls internally (bridge layer) and locks the page behind it
       (the overlay controller). Safe areas are handled by the header/body
       padding in the bridge layer. */
    .offcanvas.offcanvas-start,
    .offcanvas.offcanvas-end {
        width: 100vw;
        max-width: 100vw;
    }

    /* --- page rhythm ------------------------------------------------------ */
    .v-page-header { flex-wrap: wrap; row-gap: var(--at-s2); }
    .v-page-title { font-size: var(--at-text-xl); }

    /* Cards keep a soft radius but reclaim gutter width. */
    .v-card--padded, .v-card__body { padding: var(--at-s4); }

    /* --- profile ---------------------------------------------------------- */
    /* Stats become a native snap row instead of a wrapping pile. */
    .v-profile__stats {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--at-s4) * -1);
        padding-inline: var(--at-s4);
        padding-bottom: var(--at-s1);
    }
    .v-profile__stats::-webkit-scrollbar { display: none; }
    .v-profile__name { font-size: var(--at-display); }

    /* Post viewer owns the screen: media capped so the conversation always
       has room; the detail column scrolls. */
    [id^="postview"] .modal-dialog {
        margin: 0;
        max-width: none;
        min-height: 100dvh;
        align-items: stretch;
        /* The viewer wears .telegram-modal for its dress, but it is a
           full-screen surface, not a sheet — so it opts out of the sheet
           geometry the way it already opts out of the sheet slide
           (atrium.polish.css §2). */
        position: relative;
        bottom: auto;
    }
    [id^="postview"] .modal-content {
        min-height: 100dvh;
        max-height: none;
        border-radius: 0;
    }
    [id^="postview"] .modal-content::before { content: none; }
    [id^="postview"] .post-media img,
    [id^="postview"] .post-media video {
        max-height: 44dvh !important; /* beats the inline desktop cap */
    }

    /* --- chat: full-screen, keyboard-safe --------------------------------- */
    #chatbox .modal-dialog {
        margin: 0;
        max-width: none;
        height: 100dvh;
        align-items: stretch;
    }
    #chatbox .modal-content {
        height: 100dvh;
        border-radius: 0;
    }
    #chatbox .modal-body { flex: 1 1 auto; }
    #chatbox #msgsender {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--at-s3));
    }

    /* --- sheets respect the home indicator -------------------------------- */
    .telegram-modal .modal-content {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--at-s4));
    }

    /* Standard (centred) dialogs get a consistent gutter and never touch the
       edges. Sheets are the exception in both directions: they are meant to
       meet the screen, so every sheet family — and the full-screen chat — is
       excluded here. .v-actions was missing from this list, which left the
       post action sheet inset like a centred dialog while its bottom corners
       were square. */
    .modal:not(.telegram-modal):not(.v-actions):not(#chatbox) .modal-dialog {
        margin: var(--at-s3);
    }

    /* --- market ------------------------------------------------------------ */
    .v-shell--wide .v-page-header .v-btn { padding-inline: var(--at-s3); }

    /* Dropdowns STAY dropdowns on a phone — they no longer become bottom
       sheets. The overlay controller anchors every menu to its trigger and
       keeps it on-screen on all viewports; the base .dropdown-menu styling
       already gives 44px rows and proper elevation. Larger rows for the thumb: */
    .dropdown-menu .dropdown-item { min-height: var(--at-hit); font-size: var(--at-text-md); }
}

/* The mobile search toggle exists only in the Enfilade. */
.v-search-toggle { display: inline-flex; }
@media (min-width: 48em) { .v-search-toggle { display: none; } }

/* =============================================================================
   4 · ADJOINING — small tablets (48–64em)
   ========================================================================== */
@media (min-width: 48em) and (max-width: 63.98em) {
    /* Two-up market cards feel deliberate rather than cramped three-up. */
    .v-shell--wide .col-md-4 { flex: 0 0 50%; max-width: 50%; }

    /* Dialogs sit slightly high — the natural reading position on a tablet. */
    .modal-dialog-centered { align-items: flex-start; padding-top: var(--at-s10); }
}

/* =============================================================================
   5 · ADMIN — adaptive navigation (no tab bar exists there)
   -----------------------------------------------------------------------------
   Below the Floor Plan the admin colonnade becomes a horizontal chip row
   under the top bar: the same links, a different seat.
   ========================================================================== */
@media (max-width: 63.98em) {
    .v-rail--adaptive {
        display: block;
        position: static;
        width: auto;
        padding: var(--at-s2) var(--at-mat);
        border-bottom: 1px solid var(--at-hairline);
        background: var(--at-surface);
        overflow: visible;
    }

    .v-rail--adaptive .v-rail__list {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        gap: var(--at-s2);
    }
    .v-rail--adaptive .v-rail__list::-webkit-scrollbar { display: none; }

    .v-rail--adaptive .v-rail__link {
        white-space: nowrap;
        min-height: var(--at-control-h-sm);
        padding: var(--at-s1) var(--at-s3);
        border-radius: var(--at-r-pill);
    }

    .v-rail--adaptive .v-rail__sep,
    .v-rail--adaptive .v-rail__label { display: none; }
}

/* Data tables scroll inside their case, never the page. */
.v-table { min-width: 44rem; }

/* =============================================================================
   6 · KEYBOARD & POINTER PARITY
   ========================================================================== */
/* Hover-only affordances never gate anything on touch. */
@media (hover: none) {
    .v-card--interactive:hover,
    .gallery-wrapper:hover { transform: none; }
}

/* Full-height iOS toolbars: dynamic viewport units wherever a surface claims
   the screen (dvh, above); anchors clear the fixed lintel (base.css). The "/"
   focus shortcut and Esc dismissal live in navbar.php. */