/*CSS for cell : gapAnalysis*/

            .ga-overlay{
                position:fixed; inset:0;
                background: rgba(10,10,14,.58);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                display:flex; align-items:center; justify-content:center;
                padding: 18px;
            }
            .ga-modal{
                width: min(980px, 96vw);

                /* was: height: min(720px, 92vh); */
                height: min(900px, 96vh);
                max-height: 96vh;

                background: rgba(255,255,255,.92);
                border-radius: 18px;
                box-shadow: 0 25px 80px rgba(0,0,0,.35);
                overflow: hidden;
                display: grid;
                grid-template-columns: 320px 1fr;
                border: 1px solid rgba(0,0,0,.08);
                position: relative;
            }

            @media (max-width: 860px){
                .ga-modal{ grid-template-columns: 1fr; height: min(760px, 94vh); }
                .ga-side{ display:none; }
            }
            .ga-side{
                background: rgba(248,247,255,.98);          /* light lavender */
                color: #201b2e;
                padding: 18px;
                position: relative;
                display:flex;
                flex-direction:column;
                border-right: 1px solid rgba(90,70,160,.14);
            }

            .ga-brand{
                display:flex; flex-direction:column; gap:6px;
                padding: 6px 6px 14px 6px;
            }
            .ga-title{ font-size: 18px; font-weight: 800; letter-spacing:.2px;  color:#3b2b7a;}
            .ga-sub{ font-size: 12px; opacity:.86; line-height:1.4; color: rgba(32,27,46,.68); opacity: 1; }
            .ga-progressWrap{
                margin-top: 10px;
                border-radius: 999px;
                height: 10px;
                overflow:hidden;
                background: rgba(90,70,160,.12); 
            }
            .ga-progressBar{
                height: 100%;
                width: 0%;
                background: rgba(90,70,160,.55);
            }
            .ga-stepList{
                margin-top: 14px;
                display:flex;
                flex-direction:column;
                gap:10px;

                overflow-y:auto;        /* keep */
                min-height: 0;          /* NEW: critical for flex scroll */
                padding-right: 10px;
                flex:1;
                scrollbar-gutter: stable;
                scrollbar-width: thin;  /* Firefox */
                scrollbar-color: rgba(90,70,160,.45) rgba(0,0,0,0);
            }

            .ga-stepItem{
                padding: 10px 10px;
                border-radius: 12px;
                background: rgba(255,255,255,.78);
                border: 1px solid rgba(90,70,160,.12);
                cursor: pointer;
                user-select:none;
            }
            .ga-stepItem:hover{ background: rgba(90,70,160,.06); }
            .ga-stepItem.active{
                background: rgba(90,70,160,.10);
                border: 1px solid rgba(90,70,160,.20);
            }


            .ga-stepItem:hover{ background: rgba(255,255,255,.12); }
            .ga-stepItem.active{
                background: rgba(255,255,255,.18);
                border: 1px solid rgba(255,255,255,.22);
            }
            .ga-stepTop{
                display:flex; align-items:center; justify-content:space-between;
                gap: 10px;
            }
            .ga-stepName{ font-size: 13px; font-weight: 700; color:#201b2e;  }

            .ga-stepList::-webkit-scrollbar{ width: 10px; }
            .ga-stepList::-webkit-scrollbar-thumb{
                background: rgba(90,70,160,.35);
                border-radius: 999px;
            }
            .ga-stepList::-webkit-scrollbar-thumb:hover{
                background: rgba(90,70,160,.55);
            }
            .ga-stepList::-webkit-scrollbar-track{
                background: rgba(0,0,0,0);
            }


            .ga-pill{
                font-size: 11px; padding: 3px 8px; border-radius: 999px;
                background: rgba(90,70,160,.12); color:#3b2b7a;
            }

            .ga-main{
                background: rgba(255,255,255,.88);
                padding: 18px 18px 14px 18px;
                position: relative;

                /* NEW */
                display: flex;
                flex-direction: column;
                height: 100%;
                min-height: 0;
            }

            .ga-head{
                display:flex; align-items:flex-start; justify-content:space-between;
                gap: 12px;
                padding-right: 46px; /* space for close button */
            }
            .ga-h1{
                font-size: 18px;
                font-weight: 900;
                margin: 2px 0 2px 0;
                color: #101018;
            }
            .ga-h2{
                font-size: 12px;
                margin: 0;
                color: rgba(16,16,24,.68);
                line-height: 1.45;
            }
            .ga-card{
                margin-top: 14px;
                background: rgba(255,255,255,.95);
                border: 1px solid rgba(0,0,0,.08);
                border-radius: 16px;
                padding: 14px;
                box-shadow: 0 10px 30px rgba(0,0,0,.07);

                /* was: min-height: 320px; */
                flex: 1 1 auto;
                min-height: 0;
                overflow: auto;          /* NEW: scrolling */
            }

            .ga-qTitle{
                font-size: 15px;
                font-weight: 900;
                color:#0f0f16;
                margin: 0 0 6px 0;
            }
            .ga-qHelp{
                font-size: 12px;
                color: rgba(15,15,22,.70);
                margin: 0 0 12px 0;
                line-height: 1.45;
            }

            .ga-ctrlRow{ display:flex; flex-direction:column; gap: 10px; }
            .ga-chipRow{
                display:flex; flex-wrap:wrap; gap: 10px;
            }
            .ga-chip{
                border-radius: 999px;
                border: 1px solid rgba(0,0,0,.14);
                padding: 10px 12px;
                background: rgba(255,255,255,.8);
                cursor:pointer;
                user-select:none;
                font-size: 13px;
            }
            .ga-chip:hover{ background: rgba(0,0,0,.03); }
            .ga-chip.sel{
                border: 1px solid rgba(16,16,24,.22);
                background: rgba(16,16,24,.08);
                font-weight: 800;
            }
            .ga-metaLine{
                display:flex; align-items:center; justify-content:space-between;
                font-size: 12px;
                color: rgba(15,15,22,.65);
                margin-top: 2px;
            }

            .ga-likertWrap{
                padding: 12px 12px;
                border-radius: 14px;
                border: 1px solid rgba(0,0,0,.10);
                background: rgba(0,0,0,.02);
            }
            .ga-likertTop{
                display:flex; align-items:center; justify-content:space-between;
                margin-bottom: 8px;
            }
            .ga-score{
                font-size: 26px;
                font-weight: 1000;
                color:#101018;
                letter-spacing:.3px;
            }
            .ga-scoreLbl{
                font-size: 12px;
                color: rgba(15,15,22,.65);
                text-align:right;
            }
            .ga-range{
                width: 100%;
            }
            .ga-ticks{
                display:flex; justify-content:space-between;
                margin-top: 8px;
                font-size: 12px;
                color: rgba(15,15,22,.65);
                user-select:none;
            }
            .ga-tick{
                cursor:pointer;
                padding: 4px 6px;
                border-radius: 8px;
            }
            .ga-tick:hover{ background: rgba(0,0,0,.04); }

            .ga-toggleRow{
                display:flex; align-items:center; justify-content:space-between;
                gap: 12px;
                padding: 12px;
                border: 1px solid rgba(0,0,0,.10);
                border-radius: 14px;
                background: rgba(0,0,0,.02);
            }
            .ga-switch{
                width: 54px; height: 30px;
                border-radius: 999px;
                position: relative;
                cursor:pointer;
                background: rgba(0,0,0,.18);
                transition: .15s ease;
                flex: 0 0 auto;
            }
            .ga-switch.on{ background: rgba(16,16,24,.45); }
            .ga-knob{
                width: 24px; height: 24px;
                border-radius: 999px;
                position:absolute; top:3px; left:3px;
                background: rgba(255,255,255,.95);
                transition: .15s ease;
                box-shadow: 0 8px 20px rgba(0,0,0,.18);
            }
            .ga-switch.on .ga-knob{ left: 27px; }

            .ga-footer{
                /* was: position:absolute; left/right/bottom... */

                position: sticky;
                bottom: 0;
                margin-top: 12px;
                padding-top: 10px;

                display:flex;
                align-items:center;
                justify-content:space-between;
                gap: 10px;

                /* nice fade so it looks premium */
                background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92) 45%);
            }

            .ga-btnRow{ display:flex; gap: 10px; }
            .ga-btn{
                border-radius: 12px;
                border: 1px solid rgba(0,0,0,.12);
                padding: 10px 12px;
                background: rgba(255,255,255,.92);
                cursor:pointer;
                user-select:none;
                font-weight: 400;
                font-size: 12px;
            }
            .ga-btn:hover{ background: rgba(0,0,0,.03); }
            .ga-btn.primary{
                background: rgba(16,16,24,.92);
                color: #fff;
                border: 1px solid rgba(16,16,24,.92);
            }
            .ga-btn.primary:hover{ background: rgba(16,16,24,.86); }
            .ga-btn.ghost{
                background: rgba(255,255,255,.55);
            }
            .ga-note{
                font-size: 12px;
                color: rgba(15,15,22,.62);
            }

            .ga-loader{
                display:flex; flex-direction:column; align-items:center; justify-content:center;
                height: 100%;
                gap: 10px;
                color: rgba(15,15,22,.70);
                font-size: 13px;
            }
            .ga-spinner{
                width: 28px; height: 28px;
                border-radius: 999px;
                border: 3px solid rgba(0,0,0,.12);
                border-top-color: rgba(0,0,0,.35);
                animation: gaSpin 0.9s linear infinite;
            }
            @keyframes gaSpin { to { transform: rotate(360deg); } }