/* PREVARO apps: camera planner (/tool/) and team pages (/team/). Loaded only on those pages, after site.css. */
.app-page{--bg:#F2F7F9;--bg2:#E6F0F4;--surface:#fff;--text:#0A2236;--muted-c:#4E6577;--line-c:#D6E3EA;--chip:#fff;--shadow:rgba(6,43,71,.25);--accent-txt:#0B5C8A;
  --navy-950:#041C2F;--navy-900:#062B47;--cyan-400:#38C6D9;--coral-500:#FF7A59;--b1:#E4EFF4;--bf:#0A2236;--bline:rgba(10,34,54,.16);--bsurf:rgba(255,255,255,.72);--bacc:#0B5C8A;--hdrfg:#0A2236;
  --g1:radial-gradient(170% 130% at 100% 0,#0B3F66 0%,#062B47 45%,#041E33 100%)}
.app-page .btn.pri{background:var(--coral);color:var(--deep)}
.app-page .btn.pri:hover{background:#ff8f73}
.app-page .btn.ghost-dk{border-color:var(--line);color:var(--ink);background:var(--paper)}
.app-page .btn.ghost-dk:hover{border-color:var(--blue);color:var(--blue)}
.app-page .btn.ghost{border-color:rgba(230,241,246,.35);color:var(--on-dark)}
.app-page .btn.sm{padding:9px 14px;font-size:var(--s-xs);min-height:40px}
.sec.light{background:var(--mist)}
.wrap.wide{max-width:1400px}
.tool-f{background:var(--surface);border:1px solid var(--line-c);border-radius:16px;padding:12px 28px}
.tool-f li{padding:14px 0;border-bottom:1px solid var(--line-c);font-weight:500}
.tool-f li:last-child{border:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding-inline:10px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#dbe9ef;font:700 14px Tajawal,sans-serif;cursor:pointer;transition:background .2s,transform .25s,border-color .2s}
.icon-btn:hover{background:rgba(255,255,255,.1);border-color:var(--cyan-400);transform:translateY(-2px)}
.icon-btn svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.icon-btn:hover svg{transform:rotate(20deg)}
.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:#e6f1f6;font:500 14.5px Tajawal,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .25s,opacity .2s}
.chip-btn:hover{transform:translateY(-2px);border-color:var(--cyan-400);background:rgba(56,198,217,.12)}
.chip-btn[aria-pressed=false]{opacity:.5}
.chip-btn .dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--c,#38C6D9)}
.chip-btn.reset{margin-inline-start:auto;border-style:dashed}
.team-sec{min-height:50vh}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.tcard{list-style:none}
.tcard-btn{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 22px 26px;background:var(--surface);color:var(--text);border:1px solid var(--line-c);border-radius:18px;font:inherit;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.tcard-btn:hover,.tcard-btn:focus-visible{transform:translateY(-8px) rotate(-.6deg);border-color:var(--cyan-400);box-shadow:0 30px 50px -26px var(--shadow)}
.avatar{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:var(--navy-900);color:var(--cyan-400);font-weight:700;font-size:30px;letter-spacing:.02em;margin-bottom:10px;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-radius .4s}
.tcard-btn:hover .avatar{transform:rotate(8deg) scale(1.08);border-radius:50%}
.avatar.big{width:104px;height:104px;font-size:38px;border:5px solid var(--surface)}
.tcard-btn:hover .tmore::after{transform:rotate(45deg) translate(3px,-3px)}
[dir=rtl] .tcard-btn:hover .tmore::after{transform:rotate(-135deg) translate(3px,-3px)}
.sheet-back{position:fixed;inset:0;background:rgba(4,30,51,.7);backdrop-filter:blur(4px);z-index:95;animation:fadein .25s}
.sheet-back[hidden],.sheet[hidden]{display:none}
.sheet{position:fixed;z-index:96;inset-block:max(16px,env(safe-area-inset-top));inset-inline:50%;width:min(420px,calc(100vw - 24px));translate:-50% 0;display:flex;flex-direction:column;background:var(--bg);border-radius:34px;box-shadow:0 40px 90px -20px rgba(0,0,0,.7);overflow:hidden;transform-origin:var(--ox,50%) var(--oy,50%)}
[dir=rtl] .sheet{translate:50% 0}
.sheet.opening{animation:sheetin .5s cubic-bezier(.2,.9,.25,1)}
.sheet.closing{animation:sheetout .3s ease forwards}
.sheet-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--navy-950);gap:10px}
.sheet-body{overflow:auto;flex:1;overscroll-behavior:contain}
.phone{max-width:420px;margin-inline:auto}
.phone-in{background:var(--bg);border-radius:0 0 34px 34px;padding-bottom:28px;text-align:center}
.pcover{height:130px;background:var(--navy-900) radial-gradient(60% 120% at 80% 0,rgba(56,198,217,.35),transparent 70%)}
.phone .avatar.big{margin:-52px auto 12px;position:relative}
.pname{font-size:26px;line-height:1.3;padding-inline:20px}
.ptitle{color:var(--accent-txt);font-weight:700;margin-top:2px}
.pbio{margin:16px 26px 0;color:var(--muted-c);font-size:16.5px;line-height:1.75}
.psub{font-size:14.5px;margin:22px 0 10px;color:var(--muted-c)}
.skills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-inline:20px}
.skills li{background:var(--chip);border:1px solid var(--line-c);border-radius:999px;padding:6px 14px;font-size:15px;transition:transform .25s,background .25s,color .25s}
.skills li:hover{transform:translateY(-3px);background:var(--navy-900);color:#fff}
.pactions{display:grid;gap:10px;padding:24px 22px 0}
.pactions .btn{width:100%}
.profile-page{background:var(--navy-900);padding:110px 0 70px;position:relative;overflow:hidden;min-height:80vh}
.profile-page .phone{background:var(--bg);border-radius:34px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);overflow:hidden;color:var(--text)}
.toast{position:fixed;inset-inline:0;bottom:max(24px,env(safe-area-inset-bottom));margin-inline:auto;width:max-content;max-width:90vw;background:var(--navy-950);color:#fff;border:1px solid var(--cyan-400);border-radius:999px;padding:12px 22px;z-index:120;animation:pop .25s}
.tool-sec{padding-block:60px 90px}
.tool-app{display:grid;grid-template-columns:270px minmax(0,1fr) 300px;gap:18px;align-items:start}
.tp-side,.tp-insp{display:grid;gap:14px}
.tp-card{background:var(--surface);border:1px solid var(--line-c);border-radius:14px;padding:18px;display:grid;gap:10px;min-width:0}
.tp-h{font-size:17px}
.tp-h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.tp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tp-hint,.tp-note{font-size:14.5px;line-height:1.6;color:var(--muted-c)}
.tp-warn{margin-top:10px;font-size:15px;color:var(--text);background:rgba(255,122,89,.14);border:1px solid var(--coral-500);border-radius:10px;padding:10px 14px}
.tp-lab{font-weight:700;font-size:14.5px;margin-top:4px}
.tp-card input[type=text],.tp-card input[type=number],.tp-card select{width:100%;min-height:44px;font:16px Tajawal,sans-serif;color:var(--text);background:var(--bg);border:1.5px solid var(--line-c);border-radius:10px;padding:8px 12px}
.tp-card input[type=range]{width:100%;min-height:36px;accent-color:var(--cyan-400)}
.tp-types{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn.lt{color:var(--text);border-color:var(--line-c);background:var(--surface)}
.chip-btn.lt[aria-pressed=false]{opacity:1}
.chip-btn.lt:hover{background:rgba(56,198,217,.14);border-color:var(--cyan-400)}
.chip-btn.lt[aria-pressed=true]{background:var(--navy-900);border-color:var(--cyan-400);color:#fff;opacity:1}
.icon-btn.lt{color:var(--text);border-color:var(--line-c);background:var(--surface);font-size:20px}
.tp-bar{display:flex;gap:8px;margin-bottom:10px}
.tp-canvas{position:relative;background:var(--bg2);border:1px solid var(--line-c);border-radius:14px;overflow:auto;max-height:76vh;min-height:320px;overscroll-behavior:contain}
.tp-canvas svg{display:block;max-width:none}
.tp-canvas.placing svg{cursor:crosshair}
.tp-empty{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted-c);font-size:18px}
.tp-empty[hidden]{display:none}
.tp-calc p{margin:6px 0}
.tp-calc ul{padding-inline-start:18px;list-style:disc}
.tp-calc li{padding:2px 0}
.tp-list{display:grid;gap:6px}
.tp-li{width:100%;text-align:start;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--line-c);background:var(--bg);color:var(--text);font:500 15px Tajawal,sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.tp-li:hover{border-color:var(--cyan-400);transform:translateX(3px)}
[dir=rtl] .tp-li:hover{transform:translateX(-3px)}
.tp-li.on{background:var(--navy-900);color:#fff;border-color:var(--cyan-400)}
.tp-res{margin-top:34px}
.tp-res.empty .tp-tablewrap,.tp-res.empty .tp-cta{opacity:.5}
.tp-tablewrap{overflow-x:auto;border:1px solid var(--line-c);border-radius:14px;background:var(--surface)}
.boq{width:100%;border-collapse:collapse;min-width:560px}
.boq th,.boq td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--line-c);font-size:16px}
.boq th{background:var(--navy-900);color:#fff;font-size:14.5px}
.boq td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.boq tbody tr{transition:background .2s}
.boq tbody tr:hover{background:rgba(56,198,217,.1)}
.tp-cta{margin-top:20px}
.tp-cta .btn{min-height:50px}
.tp-disc{margin-top:18px;color:var(--muted-c);font-size:14.5px;max-width:80ch}
.print-head{display:none}
.acct{margin-bottom:18px;background:var(--surface);border:1px solid var(--line-c);border-radius:14px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.acct[hidden],.acct [hidden]{display:none}
.acct-in{font-weight:700;font-size:15px}
.acct-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-inline-start:auto}
.acct-ctl input,.acct-ctl select{min-height:44px;border:1.5px solid var(--line-c);border-radius:10px;background:var(--bg);color:var(--text);font:16px Tajawal,sans-serif;padding:6px 12px;max-width:220px}
.acct-out{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.icon-btn{color:var(--hdrfg);border-color:var(--bline)}
.icon-btn:hover{background:rgba(56,198,217,.14);border-color:var(--bacc)}
.profile-page{background-color:var(--b1);color:var(--bf)}
.chip-btn{border-color:var(--bline);background:var(--bsurf);color:var(--bf)}
.chip-btn:hover{border-color:var(--bacc);background:rgba(56,198,217,.14)}
.sheet-bar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.sheet-bar .icon-btn{color:#DBE9EF;border-color:rgba(255,255,255,.22)}
.sheet-bar .icon-btn:hover{background:rgba(255,255,255,.1)}
.profile-page .phone{border:1px solid var(--bline)}
.tp-warn{color:var(--text)}
.profile-page{background:var(--g1);color:#fff}

@media (max-width:860px){.chip-btn{padding-inline:12px;font-size:14px}}
@media (max-width:420px){.icon-btn{min-width:44px;padding-inline:8px}}
@media (max-width:320px){.legend .chip-btn span{font-size:13px}}
@media (hover:none){.tcard-btn:hover{transform:none;box-shadow:none}.tcard-btn:active{transform:scale(.98)}}
@media (pointer:coarse){.chip-btn,.icon-btn{min-height:48px}}
@media (prefers-reduced-motion:reduce){.sheet.opening,.sheet.closing,.lang-menu,.plan-tip{animation:none}}
@media (max-width:1180px){.tool-app{grid-template-columns:260px minmax(0,1fr)}.tp-insp{grid-column:1/-1;grid-template-columns:1fr 1fr}}
@media (max-width:860px){.tool-app{grid-template-columns:1fr}.tp-insp{grid-template-columns:1fr}.tp-canvas{max-height:64vh}}
@media print{body.pg-tool .page-hero,body.pg-tool .tool-app,body.pg-tool .tp-cta,body.pg-tool .site-foot,body.pg-tool .site-head,body.pg-tool .cta-band,body.pg-tool .to-top,body.pg-tool .hdr,body.pg-tool .skip,.toast{display:none!important}body.pg-tool .print-head{display:block;font-size:22px;font-weight:700;margin-bottom:10px}.boq th{background:#ddd!important;color:#000!important}.boq td,.boq th{border:1px solid #999}.tp-tablewrap{border:0;overflow:visible}}
.skills{list-style:none;padding:0;margin:0 0 6px}
.backlink{display:inline-flex;gap:6px;color:var(--cyan);text-decoration:none;font-size:var(--s-sm);margin-bottom:18px}
.backlink::before{content:"←"}[dir=rtl] .backlink::before{content:"→"}
.backlink:hover{text-decoration:underline}
.team-grid{list-style:none;padding:0}

:root[data-theme=dark] .app-page{--bg:#071E31;--bg2:#0A2236;--surface:#0C2840;--text:#E6F1F6;--muted-c:#A3BBC8;--line-c:#1D4561;--chip:#0C2840;--accent-txt:#5BBFE0;--b1:#062B47;--bf:#fff;--bline:rgba(255,255,255,.14);--bsurf:rgba(255,255,255,.05);--bacc:#38C6D9;--hdrfg:#E6F1F6}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .app-page{--bg:#071E31;--bg2:#0A2236;--surface:#0C2840;--text:#E6F1F6;--muted-c:#A3BBC8;--line-c:#1D4561;--chip:#0C2840;--accent-txt:#5BBFE0;--b1:#062B47;--bf:#fff;--bline:rgba(255,255,255,.14);--bsurf:rgba(255,255,255,.05);--bacc:#38C6D9;--hdrfg:#E6F1F6}}
/* planner on phones: the steps become a swipeable row above the plan, the plan gets most of the screen */
@media (max-width:860px){
  .pg-tool .page-hero .wrap{padding-block:18px 22px}
  .pg-tool .page-hero .lede,.pg-tool .page-hero .crumbs{display:none}
  .pg-tool .page-hero h1{font-size:1.6rem}
  .pg-tool .tool-sec{padding-top:14px}
}

/* planner: walls, doors, obstacles and the site map */
.tp-canvas[hidden],.tp-map[hidden],.tp-guide[hidden],#objCard[hidden],.tp-check[hidden]{display:none}
.tp-ic{display:inline-block;width:14px;height:14px;margin-inline-end:7px;vertical-align:-2px}
.ic-wall{background:linear-gradient(currentColor,currentColor) center/100% 4px no-repeat}
.ic-door{background:linear-gradient(#FF7A59,#FF7A59) center/100% 3px no-repeat;border-inline:2px solid currentColor}
.ic-obs{background:currentColor;opacity:.55;border-radius:2px}
#cv .wo{cursor:pointer}
#cv .wo-hit{stroke:transparent;stroke-linecap:round}
#cv .wo-wall{stroke:#E6F1F6;stroke-linecap:round}
#cv .wo-door{stroke:#FF7A59;stroke-linecap:round}
#cv .wo-halo{stroke:#062B47;stroke-opacity:.9;stroke-linecap:round}
#cv .wo-obs{fill:#A9C7D6;fill-opacity:.5;stroke:#E6F1F6}
.lt #cv .wo-wall{stroke:#0A2236}
.lt #cv .wo-halo{stroke:#fff}
.lt #cv .wo-obs{fill:#0A2236;fill-opacity:.55;stroke:#fff}
#cv .wo.sel .wo-wall,#cv .wo.sel .wo-obs{stroke:#38C6D9}
#cv .wo.sel .wo-door{filter:drop-shadow(0 0 3px #38C6D9)}
#cv .wh{fill:#fff;stroke:#0B5C8A;cursor:grab}
#cv .wo:focus-visible{outline:none}
#cv .wo:focus-visible .wo-wall,#cv .wo:focus-visible .wo-obs{stroke:#FF7A59}
#cv .rub{fill:rgba(56,198,217,.18);stroke:#0B5C8A}
/* step-by-step guide above the plan while placing or drawing */
.tp-guide{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:10px;padding:12px 14px;border:1.5px solid var(--cyan-400);border-radius:12px;background:var(--navy-900);color:#fff;scroll-margin-top:84px}
.tp-guide-t{flex:1 1 240px;margin:0;font-size:16px;font-weight:700;line-height:1.5}
.tp-guide-b{display:flex;gap:8px;margin-inline-start:auto}
.tp-guide .btn.ghost-dk{color:#fff;border-color:rgba(255,255,255,.4)}
.lt .tp-guide{background:#E3F2F8;color:var(--navy-900)}
.lt .tp-guide .btn.ghost-dk{color:var(--navy-900);border-color:var(--line-c)}
.tp-canvas{scroll-margin-top:84px}
.tp-canvas.placing svg{touch-action:none}
#cv .rub-pt{fill:#FF7A59;stroke:#fff;stroke-width:2}
#cv .rub-ring{fill:none;stroke:#FF7A59;stroke-width:2;stroke-dasharray:none;animation:rubpulse 1.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rubpulse{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.4)}}
@media (prefers-reduced-motion:reduce){#cv .rub-ring{animation:none}}
.tp-check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:15px;cursor:pointer}
.tp-check input{width:20px;height:20px;accent-color:var(--cyan-400)}
.tp-map{display:grid;gap:10px;margin-bottom:10px}
.tp-mapbar input{flex:1 1 200px;min-width:0;min-height:44px;font:16px Tajawal,sans-serif;color:var(--text);background:var(--bg);border:1.5px solid var(--line-c);border-radius:10px;padding:8px 12px}
.tp-mapview{height:min(62vh,540px);min-height:300px;border:1px solid var(--line-c);border-radius:14px;overflow:hidden;direction:ltr;z-index:0}
#cv g:focus:not(:focus-visible){outline:none}

/* ---------------------------------------------------------------- planner layout: toolbar over the plan, panels at the side
   (phones: one column, the toolbar stays under the header, the selected item opens as a sheet from the bottom) */
.tool-app{grid-template-columns:minmax(0,1fr) 320px}
.tp-insp{align-content:start}
.tp-toolbar{position:sticky;top:76px;z-index:8;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line-c);border-radius:14px;padding:6px;margin-bottom:10px;box-shadow:0 10px 24px -18px rgba(4,28,47,.6)}
.no-plan .tp-toolbar{display:none}
.tb-group{display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.tb{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:56px;min-height:54px;padding:6px 6px 5px;border:1px solid transparent;border-radius:10px;background:none;color:var(--text);font:600 12px/1.1 Tajawal,sans-serif;cursor:pointer;transition:background .15s,color .15s}
.tb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.tb:hover:not(:disabled){background:rgba(56,198,217,.14)}}
.tb[aria-pressed=true]{background:var(--navy-900);color:#fff;border-color:var(--cyan-400)}
.lt .tb[aria-pressed=true]{background:#0B5C8A;border-color:#0B5C8A}
.tb:disabled{opacity:.32;cursor:default}
.tb:focus-visible{outline:3px solid var(--coral);outline-offset:1px}
[dir=rtl] .tb-flip svg{transform:scaleX(-1)}
.tb-sep{width:1px;height:34px;background:var(--line-c);margin-inline:4px}
.tp-camtypes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;padding:10px 12px;border:1.5px dashed var(--cyan-400);border-radius:12px;background:rgba(56,198,217,.06)}
.tp-camtypes[hidden]{display:none}
.tp-camtypes .tp-lab{margin:0}
/* empty plan: three ways to start */
.tp-empty{display:grid;align-content:center;justify-items:center;gap:16px;pointer-events:auto}
.tp-empty-t{font-size:20px;font-weight:700;color:var(--text);margin:0}
.tp-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(620px,100%)}
.tp-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:120px;padding:16px 10px;border:1.5px solid var(--line-c);border-radius:14px;background:var(--surface);color:var(--text);font:700 15px/1.35 Tajawal,sans-serif;cursor:pointer;text-align:center;transition:border-color .2s,transform .2s}
.tp-opt svg{width:36px;height:36px;fill:none;stroke:var(--cyan-400);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lt .tp-opt svg{stroke:#0B5C8A}
.tp-opt:hover{border-color:var(--cyan-400);transform:translateY(-2px)}
.tp-opt:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.no-plan .tp-canvas{min-height:380px}
/* selected item */
.tp-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-x{display:none;width:40px;height:40px;padding:0;align-items:center;justify-content:center}
.sheet-x svg,.tp-rot svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tp-tip{font-size:14px;line-height:1.6;color:var(--text);background:rgba(56,198,217,.1);border-inline-start:3px solid var(--cyan-400);border-radius:8px;padding:8px 10px;margin:0}
.tp-tip[hidden],#rowDir[hidden],#rowLens[hidden],#rowVari[hidden],#rowRadius[hidden]{display:none}
.tp-rot{display:flex;align-items:center;gap:8px}
.tp-rot input{flex:1;min-width:0;min-height:40px;accent-color:var(--coral)}
.tp-rot .icon-btn{width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tp-two{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.tp-two>div{display:grid;gap:4px;min-width:0}
/* the guide: a floating bar at the bottom of the screen while a tool is active */
.tp-guide{position:fixed;inset-inline:0;margin-inline:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(760px,calc(100% - 20px));z-index:70;box-shadow:0 14px 36px rgba(4,28,47,.38)}
.tp-guide #scaleForm{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tp-guide #scaleForm[hidden]{display:none}
.tp-guide #scaleForm input{width:120px;min-height:44px;font:16px Tajawal,sans-serif;border-radius:10px;border:1.5px solid var(--line-c);padding:6px 10px;background:var(--bg);color:var(--text)}
.tp-guide #scaleForm .tp-lab{color:inherit;margin:0}
.tp-guide-b[hidden],#guideUndo[hidden]{display:none}
body.tp-guiding{padding-bottom:130px}
body.tp-guiding .chat-fab,body.tp-guiding .to-top{display:none}
/* camera being moved: it grows under the finger */
#cv .pc .pc-body{transition:transform .15s}
#cv .pc.lift .pc-body{transform:scale(1.8);transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
#cv .sling{stroke:#FF7A59;stroke-dasharray:none}
@media (max-width:860px){
  .tool-app{display:flex;flex-direction:column;gap:12px}
  .tp-main,.tp-insp{width:100%;min-width:0}
  .tp-toolbar{top:66px;padding:4px;gap:2px;border-radius:12px}
  .tb-group{width:100%;flex-wrap:nowrap;justify-content:space-between}
  .tb{flex:1 1 0;min-width:0;min-height:50px;padding:5px 1px 4px;font-size:10.5px;gap:2px}
  .tb svg{width:21px;height:21px}
  .tb-sep{height:28px;margin-inline:1px}
  .tp-canvas{min-height:0;max-height:64vh}
  .no-plan .tp-canvas{min-height:330px}
  .tp-start{grid-template-columns:1fr;gap:10px;padding-inline:14px}
  .tp-opt{flex-direction:row;justify-content:flex-start;min-height:62px;padding:12px 16px;text-align:start}
  .tp-opt svg{width:28px;height:28px}
  .tp-empty-t{font-size:18px}
  /* the selected camera or item opens as a sheet; the plan stays visible above it */
  .tp-sheet{position:fixed;inset-inline:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:72;max-height:52vh;overflow:auto;overscroll-behavior:contain;box-shadow:0 -12px 40px rgba(4,28,47,.4);border-color:var(--cyan-400)}
  #camCard.none{display:none}
  .sheet-x{display:inline-flex}
  body.tp-sheet-open{padding-bottom:54vh}
  body.tp-sheet-open .chat-fab,body.tp-sheet-open .to-top{display:none}
  .tp-guide{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}
.tp-moreb{display:none}
body.tp-dragging .tp-sheet{visibility:hidden}
#cv{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (max-width:860px){
  .tp-moreb{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-c);border-radius:10px;background:var(--bg);color:var(--text);font:700 14.5px Tajawal,sans-serif;cursor:pointer}
  .tp-moreb::after{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-inline:4px}
  .more .tp-moreb::after{transform:rotate(-135deg)}
  #camCard:not(.more) .tp-more{display:none}
  .tp-more{display:grid;gap:10px}
  .tp-sheet{padding:12px 14px;gap:8px}
  .tp-sheet .tp-tip{font-size:13px;padding:6px 9px}
  body.tp-sheet-open{padding-bottom:40vh}
}
.tp-list{list-style:none;padding:0;margin:0}
/* device picker: cameras and other systems */
.tp-camtypes{flex-direction:column;align-items:stretch}
.tp-tgrp{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tp-tgrp .tp-lab{min-width:90px}
.tp-dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-inline-end:7px;vertical-align:0}
/* a bigger plan */
.tp-canvas{min-height:62vh;max-height:80vh}
.no-plan .tp-canvas{min-height:380px}
/* full screen */
body.tp-full{overflow:hidden}
body.tp-full .tp-main{position:fixed;inset:0;z-index:90;background:var(--bg);padding:8px;display:flex;flex-direction:column;gap:8px}
body.tp-full .tp-toolbar{position:static;margin:0}
body.tp-full .tp-canvas{flex:1;min-height:0;max-height:none}
body.tp-full .tp-warn,body.tp-full .tp-note{display:none}
body.tp-full .tp-guide{z-index:96}
@media (min-width:861px){body.tp-full .tp-main{padding-inline-end:344px}body.tp-full .tp-insp{position:fixed;z-index:91;top:8px;bottom:8px;inset-inline-end:8px;width:328px;overflow:auto}}
@media (max-width:860px){body.tp-full .tp-sheet{z-index:97}.tp-tgrp .tp-lab{min-width:0;width:100%}}
body.tp-full .tp-main{padding-bottom:110px}
@media (max-width:860px){body.tp-full .tp-main{padding-bottom:150px}}
.tp-canvas svg#cv{margin-inline:auto}
@media (max-width:860px){.tp-camtypes{padding:8px;gap:6px}.tp-tgrp{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.tp-tgrp::-webkit-scrollbar{display:none}.tp-tgrp .tp-lab{width:auto;min-width:auto;flex:none;font-size:12px}.tp-tgrp .chip-btn{flex:none;white-space:nowrap;padding:8px 12px}}
.tp-camtypes{flex-wrap:nowrap}.tp-tgrp{min-width:0;max-width:100%}
.tp-two>div[hidden]{display:none}
.tp-guide{pointer-events:none}.tp-guide button,.tp-guide input,.tp-guide label,.tp-guide a{pointer-events:auto}