/* MIRA ATLAS — mobile shell (<900px). All rules scoped under #shellM.
   The mockup framed this inside a fake iPhone; here it fills the real viewport,
   so the hardcoded status-bar/home-indicator offsets become env(safe-area-inset-*). */

#shellM{position:fixed;inset:0;overflow:hidden;background:var(--bg-body);font-family:var(--font-sans)}
#shellM .screen{position:absolute;inset:0;display:none;flex-direction:column}
#shellM .screen.on{display:flex}
#shellM .safe-top{height:calc(env(safe-area-inset-top,0px) + 12px);flex:none}

/* map screen */
#shellM #sMap uae-map{position:absolute;inset:0}
#shellM #mTop{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;right:12px;z-index:10;display:flex;flex-direction:column;gap:8px}
#shellM #mSearchBox{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:99px}
#shellM #mSearchBox input{flex:1;border:none;background:none;font-size:13px;color:var(--color-text-main);outline:none;min-width:0}
#shellM #mSearchBox input::placeholder{color:rgba(90,125,107,.6)}
#shellM #mChips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
#shellM #mChips::-webkit-scrollbar{display:none}
#shellM #mDrop{border-radius:16px;overflow:hidden;max-height:250px;overflow-y:auto;display:none}
#shellM #mDrop .row{display:flex;gap:9px;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(45,122,95,.07);font-size:12.5px}
#shellM #mDrop .k{font-size:7.5px;font-weight:600;letter-spacing:.14em;color:rgba(45,122,95,.6);text-transform:uppercase;width:52px;flex:none}
#shellM #mCount{position:absolute;right:12px;z-index:9;top:calc(env(safe-area-inset-top,0px) + 114px);display:flex;flex-direction:column;align-items:center;padding:8px 10px;border-radius:14px}
#shellM #mCount b{font-family:var(--font-serif);font-size:18px;font-weight:600;color:var(--color-deep);line-height:1}
#shellM #mCount span{font-size:6.5px;letter-spacing:.16em;color:rgba(45,122,95,.7);text-transform:uppercase;margin-top:2px}
#shellM #mSheet{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);z-index:10}
#shellM #mSheetRow{display:flex;gap:10px;overflow-x:auto;padding:6px 12px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
#shellM #mSheetRow::-webkit-scrollbar{display:none}
#shellM .mcard{flex:none;width:286px;scroll-snap-align:center;border-radius:18px;overflow:hidden;cursor:pointer}
#shellM .mcard .art{position:relative;height:84px}
#shellM .mcard .art .bdg{position:absolute;top:8px;left:8px;display:flex;gap:4px}
#shellM .mcard .pb{padding:9px 12px 11px;background:rgba(255,255,255,.55)}
#shellM .mcard .nm{font-family:var(--font-serif);font-size:16.5px;font-weight:600;color:var(--color-deep);line-height:1.1}
#shellM .mcard .lc{font-size:9.5px;color:var(--color-text-muted);margin-top:2px}
#shellM .mcard .pr{display:flex;justify-content:space-between;margin-top:7px;font-size:11px}
#shellM .mcard .pr b{font-family:var(--font-serif);font-size:14px;color:var(--color-deep)}

/* list screen */
#shellM #sList .lhead{padding:6px 16px 8px;display:flex;align-items:baseline;gap:8px}
#shellM #sList .lhead b{font-family:var(--font-serif);font-size:26px;font-weight:600;color:var(--color-deep)}
#shellM #listBox{flex:1;overflow-y:auto;padding:0 12px 130px;display:flex;flex-direction:column;gap:12px}
#shellM .lcard{border-radius:18px;overflow:hidden;flex:none;cursor:pointer}
#shellM .lcard .art{position:relative;height:108px}
#shellM .lcard .art .bdg{position:absolute;top:9px;left:9px;display:flex;gap:5px}
#shellM .lcard .star{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:99px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#b08a2e;font-size:15px;border:1px solid rgba(255,255,255,.75)}
#shellM .lcard .pb{padding:11px 14px 12px}
#shellM .lcard .nm{font-family:var(--font-serif);font-size:19px;font-weight:600;color:var(--color-deep);margin:2px 0 3px}
#shellM .lcard .lc{font-size:10px;color:var(--color-text-muted)}
#shellM .lcard .meta{display:flex;margin-top:9px;border-top:1px solid rgba(45,122,95,.1);padding-top:8px}
#shellM .lcard .meta>div{flex:1}
#shellM .lcard .meta .v{font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--color-deep);margin-top:1px}
#shellM .lcard .meta>div:last-child{text-align:right}

/* catalog */
#shellM #sCat .body{flex:1;overflow-y:auto;padding:0 12px 130px;display:flex;flex-direction:column;gap:12px}
#shellM .empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px 130px}
#shellM .empty .ic{width:64px;height:64px;border-radius:22px;background:rgba(255,255,255,.5);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shadow-card)}

/* settings */
#shellM #sSet .body{flex:1;overflow-y:auto;padding:0 14px 130px}
#shellM .srow2{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 6px;border-bottom:1px solid rgba(45,122,95,.1);font-size:13.5px;color:var(--color-text-main)}
#shellM .srow2 .sub{font-size:10px;color:var(--color-text-muted);margin-top:2px}
#shellM .htitle{display:flex;align-items:center;gap:10px;padding:8px 16px 10px}
#shellM .htitle h1{font-family:var(--font-serif);font-size:27px;font-weight:600;color:var(--color-deep);margin:0;letter-spacing:-.01em}
#shellM .seg{display:flex;background:rgba(255,255,255,.35);border:1px solid var(--glass-border);border-radius:99px;padding:3px}
#shellM .seg button{padding:6px 12px;border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--color-primary-dark)}
#shellM .seg button.on{background:var(--color-deep);color:#b0e8c5}

/* tab dock */
#shellM #dock{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:30;display:flex;border-radius:26px;padding:7px}
#shellM #dock button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;border-radius:19px;color:rgba(27,77,62,.55);font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;position:relative}
#shellM #dock button.on{background:var(--color-deep);color:#b0e8c5;box-shadow:0 6px 18px rgba(13,40,24,.3)}
#shellM #dock .bdgN{position:absolute;top:2px;right:calc(50% - 16px);background:#D4A853;color:#fff;font-size:8px;font-weight:700;border-radius:99px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* filter sheet */
#shellM .dual{position:relative;height:22px}
#shellM .dual .track{position:absolute;top:9.5px;left:0;right:0;height:3px;border-radius:99px;background:rgba(45,122,95,.15)}
#shellM .dual .fill{position:absolute;top:9.5px;height:3px;border-radius:99px;background:var(--accent-line)}
#shellM .dual input[type=range]{position:absolute;inset:0;width:100%;margin:0;-webkit-appearance:none;appearance:none;background:none;pointer-events:none;height:22px}
#shellM .dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:17px;height:17px;border-radius:99px;background:#fff;border:2px solid var(--color-primary);box-shadow:0 2px 8px rgba(13,40,24,.25);cursor:grab;margin-top:-7px}
#shellM .dual input[type=range]::-webkit-slider-runnable-track{height:3px;background:none}
#shellM .dual input[type=range]::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:99px;background:#fff;border:2px solid var(--color-primary)}
#shellM #fSheet{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:40;border-radius:26px 26px 0 0;transform:translateY(105%);transition:transform .45s var(--ease-reveal);max-height:72%;display:flex;flex-direction:column}
#shellM #fSheet.open{transform:none}
#shellM #fSheet .grab{width:36px;height:4px;border-radius:99px;background:rgba(27,77,62,.2);margin:10px auto 2px}
#shellM #fSheet .fb{flex:1;overflow-y:auto;padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 26px);display:flex;flex-direction:column;gap:16px}
#shellM #fScrim{position:absolute;inset:0;z-index:39;background:rgba(13,40,24,.25);opacity:0;pointer-events:none;transition:opacity .4s}
#shellM #fScrim.open{opacity:1;pointer-events:auto}
#shellM .chiprow{display:flex;flex-wrap:wrap;gap:7px}

/* detail */
#shellM #mDetail{position:absolute;inset:0;z-index:50;display:none;background:var(--bg-body)}
#shellM #mDetail.open{display:block}
#shellM #mViewer{position:absolute;top:0;left:0;right:0;height:47%}
#shellM #mDetail .fade{position:absolute;top:calc(47% - 40px);left:0;right:0;height:40px;background:linear-gradient(to bottom,rgba(245,240,232,0),rgba(245,240,232,.9));pointer-events:none}
#shellM #mdTop{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;right:12px;z-index:5;display:flex;justify-content:space-between;align-items:center}
#shellM #mdPresets{position:absolute;top:calc(47% - 46px);left:50%;transform:translateX(-50%);z-index:5}
#shellM #mdSheet{position:absolute;top:47%;left:0;right:0;bottom:0;border-radius:26px 26px 0 0;display:flex;flex-direction:column;overflow:hidden}
#shellM #mdHead{padding:16px 18px 0}
#shellM #mdName{font-family:var(--font-serif);font-size:25px;font-weight:600;color:var(--color-deep);margin:4px 0 7px;line-height:1.05}
#shellM #mdTabs{display:flex;gap:2px;padding:12px 14px 0;border-bottom:1px solid rgba(45,122,95,.12)}
#shellM #mdTabs button{flex:1;padding:9px 2px;font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
#shellM #mdTabs button.on{color:var(--color-deep);border-color:var(--color-primary)}
#shellM #mdBody{flex:1;overflow-y:auto;padding:14px 16px}
#shellM #mdCta{display:flex;gap:8px;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 16px);border-top:1px solid rgba(45,122,95,.12);background:rgba(255,255,255,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#shellM #mdCta .btn-primary{flex:1;padding:13px 10px;font-size:11px}
#shellM .statrow{display:flex;gap:8px;margin-bottom:13px}
#shellM .stat{flex:1;position:relative;border-radius:13px;border:1px solid var(--glass-border);background:rgba(255,255,255,.42);padding:9px 10px;overflow:hidden}
#shellM .stat::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--accent-line)}
#shellM .stat .v{font-family:var(--font-serif);font-size:15.5px;font-weight:600;color:var(--color-deep);margin-top:3px;line-height:1;white-space:nowrap}
#shellM .spec{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid rgba(45,122,95,.09);font-size:12px}
#shellM .spec .k{color:var(--color-text-muted)}
#shellM .spec .v{font-weight:600;color:var(--color-deep);text-align:right}
#shellM .unit{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:13px;border:1px solid var(--glass-border);background:rgba(255,255,255,.42);margin-bottom:8px}
#shellM .unit.hl{background:rgba(255,255,255,.75);border-color:rgba(212,168,83,.55)}
#shellM .unit .t{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--color-deep);width:64px;flex:none}
#shellM .unit .m{font-size:9.5px;color:var(--color-text-muted)}
#shellM .unit .p{margin-left:auto;text-align:right;font-size:12px}
#shellM .unit .p b{color:var(--color-deep)}
#shellM .amen{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#shellM .amen div{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--color-text-main);padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.55)}
#shellM .amen i{width:5px;height:5px;border-radius:99px;background:var(--color-primary-light);flex:none}
#shellM #mToast{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);left:50%;transform:translate(-50%,60px);z-index:80;pointer-events:none;background:rgba(13,40,24,.92);color:#cfeeda;padding:10px 18px;border-radius:99px;font-size:11px;white-space:nowrap;transition:transform .4s var(--ease-reveal),opacity .4s;opacity:0}
#shellM #mToast.show{transform:translate(-50%,0);opacity:1}