/* Enterprise mobile hardening layer. Loaded after style.css by design. */
html {
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: 92px;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

img, video, iframe, canvas, svg { max-width: 100%; }
:where(main, section, article, aside, form, fieldset, div) { min-width: 0; }
:where(pre, code, .formula-code, .lab-formula, .workflow-output) { overflow-wrap: anywhere; }
:where(button, [role="button"], input, select, textarea) { touch-action: manipulation; }

:focus-visible {
    outline: 3px solid #fbbc04;
    outline-offset: 3px;
}

/* One reliable navigation model across desktop, tablet and mobile. */
.nav-toggle {
    position: relative;
    z-index: 1002;
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-content: center;
    gap: 6px;
    border: 1px solid rgba(15, 157, 88, .18);
    border-radius: 14px;
    background: #e6f4ea;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #0b7b43;
    transition: transform .2s ease;
}

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.main-nav {
    position: fixed;
    z-index: 1001;
    top: 100px;
    right: max(24px, calc((100vw - 1280px) / 2 + 34px));
    display: grid;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100dvh - 124px);
    align-content: start;
    gap: 5px;
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(15, 157, 88, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 28px 80px rgba(7, 42, 25, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.mobile-nav-label {
    display: block;
    padding: 2px 12px 10px;
    color: #0b7b43;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.main-nav .nav-link {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    color: #263e32;
    font-size: .94rem;
    font-weight: 750;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible { background: #e6f4ea; color: #084b2e; }
.main-nav .btn-nav { justify-content: center; margin-top: 5px; color: #fff; }

.nav-backdrop {
    position: fixed;
    z-index: 999;
    inset: 0;
    display: block;
    background: rgba(7, 29, 20, .36);
    backdrop-filter: blur(4px);
}

.nav-backdrop[hidden] { display: none; }
body.nav-open { overflow: hidden; }

@media (max-width: 780px) {
    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-height: 44px;
        font-size: 16px !important;
    }

    :where(button, .btn, .btn-cta, .btn-submit, .btn-small, a.button) {
        min-height: 44px;
    }

    .container { width: min(100% - 28px, 1180px); }

    .main-nav {
        top: 74px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 92px - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-dock {
        bottom: max(8px, env(safe-area-inset-bottom));
    }

    body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

    .cookie-banner {
        right: 12px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        left: 12px;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
    }

    .admin-shell { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); }
    .admin-hero { gap: 14px; padding: 20px; }
    .admin-profile { max-width: 100%; overflow-wrap: anywhere; }
    .admin-navigation {
        top: 72px;
        margin-inline: -2px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
    }
    .admin-navigation a { scroll-snap-align: start; }
    .admin-report-grid, .admin-metrics, .agent-dashboard-grid { grid-template-columns: 1fr; }
    .admin-report-card, .admin-editor, .editor-card { padding: 18px; }
    .admin-table-wrap, .table-responsive, .workflow-output {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .workflow-studio { gap: 16px; }
    .workflow-toolbar, .workflow-configurator, .workflow-config-status,
    .workflow-governance, .workflow-output { padding: 18px; border-radius: 16px; }
    .workflow-actions, .workflow-assets { display: grid; grid-template-columns: 1fr; width: 100%; }
    .workflow-actions form, .workflow-actions button, .workflow-actions a,
    .workflow-assets a { width: 100%; text-align: center; }

    .workflow-canvas {
        display: grid;
        gap: 0;
        padding: 18px;
        overflow: visible;
    }
    .workflow-node { width: 100%; min-height: 0; padding: 18px; }
    .workflow-node h3 { margin-top: 20px; }
    .workflow-node p { min-height: 0; }
    .workflow-edge { min-height: 38px; justify-content: center; transform: rotate(90deg); }
    .workflow-inspector { gap: 14px; padding: 18px; }
    .workflow-inspector article { padding: 10px 12px; }
    .workflow-governance fieldset, .workflow-sla { grid-template-columns: 1fr; }
    .workflow-config-status ul { grid-template-columns: 1fr; }

    .profile-card, .lab-panel, .lab-result, .formula-sheet { padding: 18px; }
    .profile-stats, .profile-topics .topic-grid { grid-template-columns: 1fr; }
    .profile-nav { scroll-snap-type: x proximity; }
    .profile-nav a { scroll-snap-align: start; }

    .cookie-modal-actions, .hero-actions, .start-hero-actions,
    .use-cases-actions, .books-empty-actions { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .logo-name { font-size: .82rem; }
    .container { width: min(100% - 20px, 1180px); }
    .mobile-dock { right: 8px; left: 8px; }
    .mobile-dock a { font-size: .6rem; }
    .admin-shell { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    :focus-visible { outline: 3px solid CanvasText; }
}