/* ==========================================================================
   Vault Dark Glass — Mobile & Responsive
   ========================================================================== */

/* Tablet: the rail becomes a drawer below the top bar, opened from the
   top-bar menu button (base.html toggles .cds-rail.is-open + the backdrop).
   It starts under the top bar so the menu button stays reachable to close
   it. Closed, it is visibility:hidden (after the slide) so keyboard focus
   cannot land in an off-screen drawer. Flyouts open INLINE under their
   area button instead of beside the rail. */
@media (max-width: 900px) {
    .cds-content { margin-left: 0; padding: calc(var(--shell-topbar-h) + var(--sp-4)) var(--sp-4) var(--sp-4); }
    .cds-topbar { left: 0; padding: 0 var(--sp-4); gap: var(--sp-2); }
    .cds-topbar__menu { display: inline-flex; }
    .cds-topbar__search { width: auto; flex: 0 1 200px; min-width: 120px; }
    .cds-topbar__search-kbd { display: none; }
    .cds-topbar__shortcuts,
    .cds-topbar__scan span { display: none; }
    .cds-rail {
        top: var(--shell-topbar-h);
        width: 260px;
        align-items: stretch;
        padding: var(--sp-3) var(--sp-3);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--duration-normal) var(--ease),
                    visibility 0s linear var(--duration-normal);
        box-shadow: none;
    }
    .cds-rail.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--duration-normal) var(--ease), visibility 0s;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }
    .cds-rail-backdrop { top: var(--shell-topbar-h); }
    .cds-rail__logo { width: auto; justify-content: flex-start; padding-left: var(--sp-2); }
    .cds-rail__item {
        width: 100%;
        flex-direction: row;
        gap: var(--sp-3);
        min-height: 44px;
        padding: 0 var(--sp-3);
    }
    .cds-rail__label { font-size: var(--text-base); }
    .cds-rail__badge,
    .cds-rail__dot { position: static; margin-left: auto; }
    .cds-context-pill__source { display: none; }
    .cds-context-pill__title { min-width: 72px; }
    .cds-rail__foot { position: relative; justify-content: flex-start; padding-left: var(--sp-2); }
    .cds-rail-flyout,
    .cds-rail-user {
        position: static;
        width: auto;
        max-height: none;
        margin: 2px 0 var(--sp-2);
        box-shadow: none;
    }
    /* Account popover: anchored to the avatar's foot, opening upward. */
    .cds-rail-user { position: absolute; left: 0; bottom: calc(100% + var(--sp-2)); width: 234px; margin: 0; }
    .cds-station-grid { grid-template-columns: 1fr; }
    .cds-grading-layout { grid-template-columns: 1fr; }
    .cds-encap-layout { grid-template-columns: 1fr; }
    .cds-grade-inputs { grid-template-columns: 1fr; }
}

/* The fixed "Report issue" button (bottom-right, 16 px in, ~46 px tall, z 700) sat
   on the last control of every signed-in page: the Next-page button on Audit Log /
   Defects / Aging at 320-768 px, the last input of a form (a11y critics A-F5, A-F6).
   Bottom padding that clears it, so the last control can always be scrolled above
   the button -- and scroll-padding-bottom (carbon.css) has room to work. On a wide
   screen the Browse frame keeps its own 48 px clear, which a SHORT window (< 608 px
   tall: the frame's 520 px minimum makes the page scroll) uses up. Bare pages
   (sign-in) have no button. */
@media (max-width: 900px), (max-height: 640px) {
    .cds-content:not(.cds-content--bare) { padding-bottom: calc(var(--sp-4) + 64px); }
}

/* Mobile */
@media (max-width: 640px) {
    .cds-content { padding: calc(var(--shell-topbar-h) + var(--sp-3)) var(--sp-3) var(--sp-3); }
    .cds-topbar__brand,
    .cds-context-pill__title { display: none; }
    .cds-topbar__search { flex: 1 1 auto; min-width: 0; }
    .cds-page-header h1, .cds-page-header__title { font-size: 20px; }
    .cds-tile__header { padding: var(--sp-3) var(--sp-4); }
    .cds-tile__body { padding: var(--sp-4); }
    .cds-metric__value { font-size: 24px; }
    .cds-scanner-input { font-size: 16px; height: 48px; }
    .cds-btn { height: 44px; font-size: 14px; }
    .cds-data-table { font-size: 12px; }
    .cds-data-table th, .cds-data-table td { padding: var(--sp-2) var(--sp-3); }
    .cds-page-header__row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

    /* Table -> card view (labeled tables only).
       Reinstated from the pre-Dark-Glass build (commit 8416d65, dropped in
       8223312) and re-tokenized. Gated on :has(td[data-label]) so tables
       whose cells never got data-label keep the compact rendering above;
       each td renders its authored data-label as the field name. */
    .cds-data-table:has(td[data-label]) { display: block; width: 100%; }
    .cds-data-table:has(td[data-label]) thead { display: none; }
    .cds-data-table:has(td[data-label]) tbody { display: block; width: 100%; }
    .cds-data-table:has(td[data-label]) tr {
        display: block;
        width: 100%;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        background: var(--glass-bg-surface);
        margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
    }
    /* `display: block` above beats the UA's [hidden] { display: none }, so a
       row a page hides (the Journey event-log filter) stayed visible on a
       phone. Same specificity plus an attribute, so it wins. */
    .cds-data-table:has(td[data-label]) tr[hidden] { display: none; }
    .cds-data-table:has(td[data-label]) td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--sp-4);
        width: 100%;
        height: auto;
        padding: var(--sp-2) 0;
        border-bottom: none;
        text-align: left;
    }
    .cds-data-table:has(td[data-label]) td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-xs);
        color: var(--glass-text-secondary);
        flex-shrink: 0;
    }

    /* Modal: slide up from bottom on mobile */
    .cds-modal-overlay { align-items: flex-end; }
    .cds-modal {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 90vh;
        width: 100%;
        max-width: 100%;
        animation: modal-slide-up var(--duration-normal) var(--ease);
    }
    @keyframes modal-slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Journey mobile */
    .journey-stepper { overflow-x: auto; justify-content: flex-start; padding: var(--sp-3) 0; }
    .journey-step { min-width: 60px; }
    .step-circle { width: 28px; height: 28px; font-size: var(--text-xs); }
    .step-connector { min-width: 16px; }
    .step-label { font-size: var(--text-xs); }
}

/* Touch targets — 44px minimum for coarse pointer (touchscreen) devices */
@media (pointer: coarse) {
    .cds-btn { min-height: 44px; }
    .cds-rail-flyout__link,
    .cds-rail-user__link { min-height: 44px; }
    .cds-preset-btn { min-height: 44px; }
    .cds-data-table td { padding: var(--sp-3) var(--sp-4); }

    /* 2026-08-23 (design review): the old coarse block covered 5 selectors
       and missed every form control and dismiss affordance. */
    .cds-text-input,
    .cds-form-input,
    .cds-select { min-height: 44px; }
    .cds-select--compact { min-height: 44px; }
    .cds-pagination a { min-height: 44px; display: inline-flex; align-items: center; }
    .cds-password-toggle,
    .cds-modal__close,
    .cds-topbar__menu,
    .cds-report-fav { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .vault-toast__close,
    .cds-cart-pill__clear { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    /* The station header's cart-pill clear button is a station control: the handoff's 44 px (a11y critic NIT). */
    .cds-cart-pill__clear { min-width: 44px; min-height: 44px; }
    .cds-tabs__tab { min-height: 44px; }

    /* iOS Safari auto-zooms any focused input under 16px, and the
       zoom-and-reflow loses the operator's place after every field tap.
       Only the scanner input had this treatment. */
    .cds-text-input,
    .cds-form-input,
    .cds-select,
    .cds-topbar__search-input,
    textarea { font-size: 16px; }
}