/*
 * Manoj Portfolio v3.1.0 — Layout Stability & Collision Guard
 * Loaded after main.css. This layer deliberately contains only corrective,
 * responsive and interaction-safety overrides so existing visual identity,
 * content and feature modules remain intact.
 */

:root{
    --mm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mm-runtime-mobile-dock: 0px;
    --mm-runtime-compare-lift: 0px;
    --mm-fixed-base: 20px;
    --mm-fixed-lift: 0px;
    --mm-focus-ring: 0 0 0 3px color-mix(in srgb,var(--mm-blue) 20%,transparent);
}

/* ---------------------------------------------------------------------
   1. Global overflow / shrink safety
   --------------------------------------------------------------------- */
html,body{max-width:100%;overflow-x:clip}
body{min-width:280px}
.mm-container{min-width:0}
.mm-container>*,
.mm-hero-grid>*,
.mm-about-grid>*,
.mm-contact-shell>*,
.mm-engineering-grid>*,
.mm-faq-shell>*,
.mm-case-hero-grid>*,
.mm-case-story-grid>*,
.mm-resume-grid>*,
.mm-now-shell>*,
.mm-project-toolbar>*,
.mm-footer-grid>*,
.mm-khabarthali-shell>*,
.mm-command-center-grid>*,
.mm-project-grid>*,
.mm-service-grid>*,
.mm-testimonial-grid>*,
.mm-workflow-grid>*,
.mm-cert-grid>*,
.mm-notes-grid>*,
.mm-lab-grid>*,
.mm-github-grid>*,
.mm-custom-block-grid>*,
.mm-roadmap-board>*,
.mm-project-comparison>*,
.mm-related-grid>*{min-width:0}

img,svg,video,canvas,iframe{max-width:100%}
pre,code,kbd,samp{max-width:100%}
.mm-entry-content pre,
.mm-entry-content table,
.mm-case-story-content pre,
.mm-case-story-content table{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.mm-entry-content table,.mm-case-story-content table{display:block}
.mm-entry-content iframe,.mm-case-story-content iframe{width:100%}

h1,h2,h3,h4,h5,h6,p,li,dd,dt,a,strong,small,span{overflow-wrap:break-word}
a[href^="http"],.mm-entry-content a,.mm-case-story-content a{word-break:break-word}

/* Grid/flex cards must grow with content instead of visually collapsing. */
.mm-service-card,
.mm-project-card,
.mm-testimonial-card,
.mm-workflow-card,
.mm-cert-card,
.mm-note-card,
.mm-lab-card,
.mm-github-card,
.mm-custom-block,
.mm-roadmap-column,
.mm-release-card,
.mm-engineering-panel,
.mm-faq-item,
.mm-command-card,
.mm-related-grid>a{height:auto;min-width:0}

/* Browser hidden semantics always win over layout declarations. */
[hidden]{display:none!important}

/* ---------------------------------------------------------------------
   2. Header collision prevention
   --------------------------------------------------------------------- */
.mm-site-header{isolation:isolate}
.mm-nav-wrap{min-width:0}
.mm-brand{flex:0 0 auto;max-width:min(260px,42vw)}
.mm-brand-copy{min-width:0}
.mm-brand-copy strong,.mm-brand-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-desktop-nav{min-width:0}
.mm-desktop-nav ul{min-width:0}
.mm-nav-actions{flex:0 0 auto;min-width:0}
.mm-mobile-panel{max-height:calc(100dvh - var(--mm-header));overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Switch to the compact navigation before the full nav can collide. */
@media (max-width:1120px){
    .mm-desktop-nav{display:none!important}
    .mm-menu-toggle{display:inline-flex!important}
    .mm-nav-wrap{gap:14px}
    .mm-header-cta{padding-inline:14px}
}
@media (max-width:880px){
    .mm-header-cta{display:none!important}
    .mm-command-trigger{display:none!important}
}
@media (max-width:720px){
    .mm-site-header{height:var(--mm-header)}
    .mm-nav-wrap{gap:8px}
    .mm-brand{max-width:54vw}
    .mm-brand-copy strong{font-size:12px}
    .mm-brand-copy small{max-width:150px}
    .mm-nav-actions{gap:6px}
    .mm-utility-btn,.mm-menu-toggle{width:40px;height:40px;min-width:40px}
}
@media (max-width:380px){
    .mm-brand-copy small{display:none}
    .mm-brand{max-width:48vw}
}

/* ---------------------------------------------------------------------
   3. Responsive section/grid hardening
   --------------------------------------------------------------------- */
@media (max-width:1180px){
    .mm-workflow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .mm-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}
    .mm-stats-card{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mm-stats-card .mm-stat:nth-child(2n){border-right:0}
    .mm-stats-card .mm-stat-quote{grid-column:1/-1}
}
@media (max-width:900px){
    .mm-workflow-grid,
    .mm-cert-grid,
    .mm-notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mm-now-shell{grid-template-columns:170px minmax(0,1fr);gap:24px;padding:32px}
    .mm-now-orbit{width:150px;height:150px}
    .mm-project-toolbar{grid-template-columns:1fr!important;align-items:stretch}
    .mm-project-search{width:100%}
    .mm-project-count{justify-self:start!important;align-self:auto!important;margin:0!important}
    .mm-project-filters{max-width:100%}
}
@media (max-width:720px){
    .mm-workflow-grid,
    .mm-cert-grid,
    .mm-notes-grid,
    .mm-timeline{grid-template-columns:1fr}
    .mm-stats-card{grid-template-columns:1fr}
    .mm-stats-card .mm-stat{border-right:0}
    .mm-stats-card .mm-stat-quote{grid-column:auto}
    .mm-now-shell{grid-template-columns:1fr;padding:26px 20px}
    .mm-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .mm-service-card{min-height:0}
    .mm-khabarthali-shell{min-width:0}
    .mm-khabarthali-features{grid-template-columns:1fr}
    .mm-project-actions{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
    .mm-project-actions>*{min-width:0}
    .mm-project-card .mm-project-body{min-height:0}
    .mm-contribution-shell{overflow:hidden}
    .mm-contribution-grid{min-width:0}
}
@media (max-width:520px){
    .mm-service-grid{grid-template-columns:1fr}
    .mm-project-actions{align-items:stretch}
    .mm-project-actions .mm-project-link{flex:1 1 auto}
    .mm-project-actions .mm-project-quick{min-height:36px}
    .mm-khabarthali-copy h2{font-size:clamp(31px,10vw,38px)}
}

/* ---------------------------------------------------------------------
   4. Hero safety at awkward tablet widths
   --------------------------------------------------------------------- */
@media (min-width:981px) and (max-width:1120px){
    .mm-hero-grid{grid-template-columns:minmax(0,1fr) minmax(390px,44%);gap:24px}
    .mm-hero h1{font-size:clamp(48px,5.8vw,68px)}
    .mm-portrait{width:min(390px,100%)}
    .mm-visual-halo{width:min(410px,100%);height:min(410px,38vw)}
}
@media (max-width:720px){
    .mm-hero-visual{width:100%;overflow:visible}
    .mm-portrait{max-width:calc(100vw - 44px)}
    .mm-visual-halo{max-width:calc(100vw - 34px)}
    .mm-mountain-ring{max-width:calc(100vw - 52px)}
    .mm-location-chip{max-width:min(150px,42vw)}
}

/* ---------------------------------------------------------------------
   5. Dialogs, command palette and long-content safety
   --------------------------------------------------------------------- */
.mm-command-panel,
.mm-project-dialog,
.mm-tech-dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 28px)}
.mm-command-body,.mm-dialog-content{min-width:0}
.mm-command-list a,.mm-command-list button{min-width:0}
.mm-command-list a strong,.mm-command-list button strong,
.mm-command-list a small,.mm-command-list button small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-command-layer{overscroll-behavior:contain}
.mm-project-dialog,.mm-tech-dialog{overscroll-behavior:contain}
.mm-dialog-content{overflow-wrap:anywhere}

@media(max-width:720px){
    .mm-command-layer{padding:10px;align-items:start}
    .mm-command-panel{width:100%;max-height:calc(100dvh - 20px);border-radius:16px}
    .mm-command-search{height:58px;padding-inline:13px;gap:9px}
    .mm-command-search input{font-size:15px}
    .mm-command-list{max-height:calc(100dvh - 145px)}
    .mm-command-list a,.mm-command-list button{grid-template-columns:34px minmax(0,1fr);padding:9px}
    .mm-command-list a small,.mm-command-list button small{display:none}
    .mm-tech-dialog .mm-dialog-content{padding:22px 18px}
}

/* ---------------------------------------------------------------------
   6. Fixed UI collision manager
   --------------------------------------------------------------------- */
@media(max-width:720px){
    :root{
        --mm-fixed-base: calc(var(--mm-runtime-mobile-dock, 78px) + var(--mm-safe-bottom));
        --mm-fixed-lift: var(--mm-runtime-compare-lift, 0px);
    }
    body{padding-bottom:max(88px,calc(var(--mm-runtime-mobile-dock,78px) + var(--mm-safe-bottom) + 8px))}

    .mm-mobile-quicknav{
        left:8px;right:8px;bottom:calc(8px + var(--mm-safe-bottom));
        height:58px;z-index:9200;
    }
    .mm-compare-tray{
        left:8px;right:8px;bottom:calc(var(--mm-fixed-base) + 4px);
        width:auto;transform:none;z-index:9400;border-radius:15px;
        display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;
        padding:8px 9px;
    }
    .mm-compare-tray>div:first-child{min-width:0;overflow:hidden}
    .mm-compare-tray>div:first-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .mm-compare-tray>.mm-btn{min-height:38px;padding:0 11px}
    .mm-compare-mini{display:none!important}

    .mm-assistant-launcher{
        right:12px;bottom:calc(var(--mm-fixed-base) + var(--mm-fixed-lift) + 8px);z-index:9500;
        width:44px;height:44px;padding:0;justify-content:center;
    }
    .mm-assistant-launcher span{display:none!important}
    .mm-assistant{
        left:8px;right:8px;bottom:calc(var(--mm-fixed-base) + var(--mm-fixed-lift) + 60px);
        width:auto;max-height:calc(100dvh - var(--mm-header) - var(--mm-fixed-base) - var(--mm-fixed-lift) - 78px);
        z-index:9700;border-radius:18px;
    }
    .mm-assistant-body{height:auto;min-height:180px;max-height:min(46dvh,390px)}

    .mm-a11y-tools{left:12px;bottom:calc(var(--mm-fixed-base) + var(--mm-fixed-lift) + 8px);z-index:9490}
    .mm-a11y-panel{max-height:min(55dvh,360px);overflow:auto}

    .mm-back-top{
        right:12px;bottom:calc(var(--mm-fixed-base) + var(--mm-fixed-lift) + 62px);
        width:42px;height:42px;z-index:9300;
    }
    .mm-toast{
        bottom:calc(var(--mm-fixed-base) + var(--mm-fixed-lift) + 12px);
        max-width:calc(100% - 128px);z-index:9800;
    }
    .mm-pwa-update{
        top:auto;bottom:calc(var(--mm-fixed-base) + var(--mm-fixed-lift) + 64px);
        width:min(440px,calc(100% - 128px));z-index:9650;
    }
    html.mm-assistant-open .mm-back-top{opacity:0!important;visibility:hidden!important;pointer-events:none}
}

@media(max-width:430px){
    .mm-toast{left:10px;right:64px;max-width:none;transform:translateY(10px)}
    .mm-toast.is-visible{transform:none}
    .mm-pwa-update{left:10px;right:64px;width:auto;transform:none}
}

/* ---------------------------------------------------------------------
   7. Cards, controls and touch polish
   --------------------------------------------------------------------- */
.mm-btn,.mm-utility-btn,.mm-project-mini-action,.mm-project-quick,
.mm-assistant-launcher,.mm-a11y-tools button,.mm-mobile-quicknav a{touch-action:manipulation}
.mm-btn:focus-visible,.mm-utility-btn:focus-visible,.mm-menu-toggle:focus-visible,
.mm-project-mini-action:focus-visible,.mm-project-quick:focus-visible,
.mm-mobile-quicknav a:focus-visible,.mm-assistant-launcher:focus-visible,
.mm-a11y-tools button:focus-visible{outline:2px solid var(--mm-blue);outline-offset:3px;box-shadow:var(--mm-focus-ring)}

.mm-project-card,.mm-service-card,.mm-testimonial-card,.mm-command-card{
    contain:layout;
}
/* Never let 3D tilt paint over neighbouring cards. */
[data-mm-tilt]{position:relative;z-index:0}
[data-mm-tilt]:hover,[data-mm-tilt]:focus-within{z-index:2}

@media(hover:none), (pointer:coarse){
    [data-mm-tilt]{transform:none!important}
    .mm-project-card:hover,.mm-service-card:hover,.mm-testimonial-card:hover{transform:none}
}

/* ---------------------------------------------------------------------
   8. Dark mode consistency for the stabilization layer
   --------------------------------------------------------------------- */
html[data-theme="dark"] .mm-mobile-panel,
html[data-theme="dark"] .mm-command-panel,
html[data-theme="dark"] .mm-assistant,
html[data-theme="dark"] .mm-a11y-panel,
html[data-theme="dark"] .mm-compare-tray{border-color:#2a3d50}
html[data-theme="dark"] .mm-command-list a strong,
html[data-theme="dark"] .mm-command-list button strong{color:#eaf2fb}
html[data-theme="dark"] .mm-toast{border-color:#2d4358;background:rgba(4,13,22,.96)}

/* ---------------------------------------------------------------------
   9. Motion / performance safety
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
    [data-mm-tilt]{transform:none!important}
    .mm-assistant-launcher,.mm-assistant,.mm-a11y-panel,.mm-compare-tray,.mm-back-top,.mm-toast{transition:none!important}
}

/* ---------------------------------------------------------------------
   10. Print must never include floating UI
   --------------------------------------------------------------------- */
@media print{
    .mm-mobile-panel,.mm-assistant-launcher,.mm-assistant,.mm-a11y-tools,.mm-compare-tray,
    .mm-back-top,.mm-toast,.mm-pwa-update,.mm-mobile-quicknav,.mm-command-layer{display:none!important}
    body{padding-bottom:0!important}
}
.mm-content-overflow-guard,.mm-content-overflow-guard *{overflow-wrap:anywhere;word-break:break-word}