/* 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}
.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}}
.pv-report{display:none}
@media print{
  body.pv-printing>*:not(#printReport){display:none!important}
  body.pv-printing{background:#fff!important;color:#000!important;margin:0}
  .pv-report{display:block;color:#000;font-size:12pt;line-height:1.5;padding:0 2mm}
  .rp-head{display:flex;align-items:center;gap:16px;border-bottom:2px solid #062B47;padding-bottom:10px;margin-bottom:12px}.rp-head img{height:44px;width:auto}
  .rp-head h1{font-size:18pt;margin:0;color:#062B47}.rp-num{margin:2px 0 0;font-size:11pt}.rp-num b{font-size:13pt;font-family:monospace}
  .rp-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px;padding:8px 10px;border:1px solid #bbb;border-radius:6px}.rp-meta dt{font-size:9.5pt;color:#555}.rp-meta dd{margin:0;font-weight:700}
  .pv-report h2{font-size:13pt;margin:14px 0 6px;color:#062B47;border-bottom:1px solid #ccc;padding-bottom:3px}
  .rp-facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rp-facts li{border:1px solid #ccc;border-radius:6px;padding:6px 8px;display:grid}.rp-facts span{font-size:9.5pt;color:#555}.rp-facts b{font-size:13pt}
  .rp-plan{margin:0;text-align:center;page-break-inside:avoid}.rp-plan img{max-width:100%;max-height:150mm;border:1px solid #999;border-radius:4px}
  .rp-boq{page-break-before:auto}.pv-report .boq{width:100%;border-collapse:collapse;min-width:0;font-size:10.5pt}.pv-report .boq th{background:#e9eef2!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.pv-report .boq td,.pv-report .boq th{border:1px solid #999;padding:5px 8px}.pv-report .boq tr{page-break-inside:avoid}
  .rp-note{font-size:9.5pt;color:#444;margin-top:12px;border-top:1px solid #ccc;padding-top:8px}.rp-foot{font-size:9pt;color:#666;margin-top:10px;text-align:center}
  @page{size:A4;margin:14mm 12mm}
}
.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(auto-fit,minmax(130px,1fr));gap:12px;width:min(720px,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 */
/* the dock: one scrollable strip, a group per system, so the plan keeps the screen */
.tp-camtypes{flex-direction:row;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;gap:14px;padding:8px 12px;max-height:112px}
.tp-tgrp{display:flex;flex-direction:column;flex:0 0 auto;gap:4px;scroll-snap-align:start}
.tp-tgrp .tp-lab{min-width:0;font-size:.72rem;opacity:.75;white-space:nowrap}
.tp-tgrp .chip-btn{white-space:nowrap}
.tp-tgrp > .chip-btn + .chip-btn{margin-inline-start:0}
.tp-tgrp-row{display:flex;gap:6px}
.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-camtypes{max-height:108px;gap:10px}.tp-tgrp .chip-btn{min-height:44px;padding-block:4px}}
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}

/* ---------------------------------------------------------------- design studio
   The editor opens full screen as soon as a plan exists: the toolbar stays on top, the device dock at the bottom, the plan fills the middle
   and the details panel slides in only when an item is selected (or from the Details button). The page itself does not scroll behind it. */
body:not(.tp-full) .tool-app:not(.no-plan) .tp-toolbar,body:not(.tp-full) .tool-app:not(.no-plan) .tp-camtypes{display:none}
body:not(.tp-full) .tool-app:not(.no-plan) .tp-insp{display:none}
body:not(.tp-full) .tool-app:not(.no-plan){grid-template-columns:minmax(0,1fr)}
body:not(.tp-full) .tp-canvas svg{pointer-events:none}
.tp-open{position:absolute;inset-block-end:14px;inset-inline-end:14px;z-index:4;box-shadow:0 10px 30px rgba(4,30,51,.3)}
.no-plan .tp-open,body.tp-full .tp-open{display:none}
body.tp-full .tp-main{padding-bottom:8px}
body.tp-full .tp-toolbar{order:1;flex:none;box-shadow:0 6px 24px rgba(4,30,51,.18)}
body.tp-full .tp-canvas{order:2;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-c)}
body.tp-full .tp-camtypes{order:3;flex:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:14px;margin:0;border-style:solid;border-color:var(--line-c);background:var(--surface);box-shadow:0 -6px 24px rgba(4,30,51,.12)}
body.tp-full .tp-camtypes[hidden]{display:flex}
.tp-camtypes .chip-btn{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:74px;padding:8px 10px;border-radius:14px;font-size:.75rem;line-height:1.2;white-space:normal;text-align:center}
.tp-camtypes .chip-btn svg.ti{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tp-camtypes .chip-btn .tp-dot{display:none}
.tp-camtypes .chip-btn[aria-pressed=true]{outline:2px solid var(--c,#38C6D9);background:rgba(56,198,217,.14)}
.tb-done{margin-inline-start:auto;font-weight:700;min-height:42px;padding:0 22px}
body.tp-full .tp-toolbar{justify-content:flex-start}
@media (min-width:861px){
  body.tp-full .tp-main{padding-inline-end:8px}
  body.tp-full .tp-insp{top:76px;bottom:104px;transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .4s cubic-bezier(.25,.8,.25,1),visibility 0s .4s;box-shadow:0 18px 50px rgba(4,30,51,.35);background:var(--bg,#fff);padding:10px;border-radius:16px}
  [dir=rtl] body.tp-full .tp-insp{transform:translateX(calc(-100% - 24px))}
  body.tp-full.tp-drawer .tp-insp,body.tp-full.tp-drawer-pin .tp-insp{transform:none;visibility:visible;transition-delay:0s}
}
@media (max-width:860px){#tbPanel{display:none}.tb-done{min-height:40px;padding:0 14px}}
.tp-pic{margin:16px 0;text-align:center}.tp-pic img{max-width:100%;max-height:520px;border-radius:14px;box-shadow:0 12px 40px rgba(4,30,51,.22);background:#f4f8fb}
.tp-pic figcaption{margin-top:10px}
.tp-done{margin:14px 0;padding:18px 20px;border-radius:16px;border:1.5px solid var(--coral,#FF7A59);background:rgba(255,122,89,.08);display:flex;flex-direction:column;gap:8px}
.tp-done b{font-size:1.1rem}.tp-done .dd-n{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.tp-done .dd-r{display:flex;flex-wrap:wrap;gap:8px}
.rot-bg{position:fixed;inset:0;z-index:95;background:rgba(4,18,28,.7);display:grid;place-items:center;padding:14px}
.rot{width:min(720px,100%);background:var(--bg,#fff);color:var(--ink,#1b2b34);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;max-height:94vh;overflow:auto}
.rot canvas{max-width:100%;max-height:52vh;align-self:center;border-radius:12px;background:#dde7ee}
.rot-r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.rot input[type=range]{flex:1 1 200px}

/* ---- topology view and design checks (library engine) ---- */
.tp-topo { overflow-x: auto; border: 1px solid var(--line, #dde7ee); border-radius: 12px; background: var(--surface, #fff); margin: 8px 0 16px }
.tp-topo svg { display: block; width: 100%; min-width: 560px; height: auto; color: var(--ink, #0b2a3f) }
.topo-node.is-error rect { stroke: #E5484D } .topo-node.is-warning rect { stroke: #F4B860 } .topo-edges .topo-bad { stroke: #E5484D }
.tp-issues { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 6px }
.tp-issues .iss { padding: 8px 12px; border-radius: 8px; border-inline-start: 4px solid; font-size: .92rem; background: var(--surface, #fff) }
.tp-issues .iss-error { border-color: #E5484D } .tp-issues .iss-warning { border-color: #F4B860 }
#rowTilt input[type=range] { width: 100%; margin-top: 4px }
#fRes[readonly] { background: transparent; border-style: dashed; color: inherit }
.tp-camtypes .tp-tgrp { align-items: center }
.tp-camtypes .chip-btn { min-height: 44px }

/* ---- add-a-device screen (submit.js) ---- */
.sub-bg{z-index:140}
.gate.sub-box{width:min(720px,100%);max-height:92vh;overflow:auto;gap:12px}
.sub-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.sub-dots{display:flex;gap:6px;width:100%}.sub-dots i{flex:1;height:5px;border-radius:3px;background:var(--line-c,#cdd8df)}.sub-dots i.on{background:var(--cyan-400,#38c6d9)}
.sub-body{display:flex;flex-direction:column;gap:10px;min-height:200px}
.sub-f{display:flex;flex-direction:column;gap:4px}.sub-f input,.sub-f select,.sub-f textarea{width:100%;min-height:44px;max-width:100%}
.sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sub-port{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;align-items:end;padding:10px;border:1px solid var(--line-c,#cdd8df);border-radius:10px;margin-bottom:8px}
.sub-chk{flex-direction:row;align-items:center}.sub-chk input{width:auto;min-height:0}
.sub-ai{opacity:.7}.sub-cov{width:100%;max-width:420px;height:auto;border-radius:8px}
.sub-checks{list-style:none;padding:0;display:grid;gap:6px}.sub-checks li{padding:6px 10px;border-radius:8px;border-inline-start:4px solid var(--line-c,#cdd8df)}
.sub-checks .ok{border-color:#3BB273}.sub-checks .warn{border-color:#F4B860}.sub-checks .bad{border-color:#E5484D}
.sub-ok{color:#1f8a54;font-weight:600}.sub-foot{flex-wrap:wrap}
#subCard[hidden],#btnSubmitDevice[hidden],#subHint[hidden]{display:none}
.sub-foot{position:sticky;bottom:-24px;background:var(--card,var(--paper,#fff));padding-block:12px;margin-top:6px;border-top:1px solid var(--line-c,#cdd8df);z-index:2}

/* ---- phone ergonomics: pinch and pan on the studio plan, saved badge, term help, start wizard ---- */
body.tp-full #cv{touch-action:none}
.tp-badge{align-self:center;margin-inline-start:auto;padding:4px 10px;border-radius:999px;font-size:12px;background:rgba(56,198,217,.14);color:var(--text);opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.tp-badge.on{opacity:1}
.tp-q{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin-inline-start:2px;border:0;background:none;color:var(--cyan-400,#0B5C8A);font:700 16px Tajawal,sans-serif;cursor:pointer;border-radius:50%}
.tp-q::before{content:"";}.tp-q:focus-visible{outline:3px solid var(--coral);outline-offset:-4px}
.tp-help{display:block;margin:2px 0 8px;padding:8px 12px;border-radius:10px;background:rgba(56,198,217,.1);font-size:.9rem;line-height:1.55}
.tp-help[hidden]{display:none}
.gate.wiz-box{width:min(560px,100%);max-height:92vh;overflow:auto;gap:12px}
.wiz-g{border:0;padding:0;margin:0;display:grid;gap:8px}.wiz-g legend{font-weight:700;margin-bottom:6px;padding:0}
.wiz-g label{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:1.5px solid var(--line-c,#cdd8df);border-radius:12px;cursor:pointer}
.wiz-g label:has(input:checked){border-color:var(--cyan-400,#38c6d9);background:rgba(56,198,217,.1)}
.wiz-g input{width:20px;height:20px;accent-color:#0B5C8A}

/* ---- printed report: pages, running footer, per-camera pages, legend, schedule ---- */
@page{@bottom-end{content:counter(page) " / " counter(pages);font-size:9pt;color:#555}}
@media print{
  .pv-report{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-page{break-before:page}.rp-first{break-before:auto}
  .rp-run{position:fixed;top:-10mm;left:0;right:0;font-size:8.5pt;color:#667;text-align:center}.rp-head{padding-top:4mm}
  .rp-sub{margin:2px 0;font-size:11pt;color:#334}.rp-small{font-size:9pt;color:#555}
  .rp-plan img{max-height:185mm;max-width:100%}
  .rp-legend{margin-top:8px;font-size:10pt;break-inside:avoid}.rp-legend ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:4px 0}.rp-legend li{display:flex;align-items:center;gap:6px}.rp-legend i{display:inline-block;width:18px;height:12px;border:1px solid #0B5C8A;border-radius:2px}
  .rp-cam h3{font-size:11pt;margin:10px 0 4px;color:#062B47}.rp-cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .rp-spec{display:grid;gap:2px;margin:0}.rp-spec div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #e1e6ea;padding:2px 0;font-size:10pt}.rp-spec dt{color:#555}.rp-spec dd{margin:0;font-weight:700}
  .rp-side{margin:0}.rp-side svg{width:100%;height:auto;border:1px solid #ccd;background:#fff}
  .rp-q{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rp-q figure{margin:0;border:1px solid #ccd;border-radius:6px;overflow:hidden;break-inside:avoid}.rp-q svg{width:100%;height:auto;display:block}.rp-q figcaption{font-size:9pt;padding:4px 6px;background:#f4f7f9}
  .rp-topo{--surface:#fff;--ink:#062B47;color:#062B47;border:1px solid #ccd;border-radius:6px;overflow:visible;margin:6px 0}.rp-topo svg{width:100%;min-width:0;height:auto}
  .rp-sched td,.rp-sched th{font-size:9.5pt}.pv-report tr{break-inside:avoid}
  .rp-share{display:flex;align-items:center;gap:12px;margin:10px 0;break-inside:avoid}.rp-qr{width:30mm;height:30mm;flex:none;border:1px solid #ccd;padding:1mm;background:#fff}.rp-qr svg{width:100%;height:100%;display:block}.rp-share p{margin:0;font-size:9pt;color:#334;overflow-wrap:anywhere}
  .rp-checks{padding-inline-start:18px}.rp-checks .error{color:#a40000}.rp-checks .warning{color:#7a5200}
}

/* ---- shared design page (/d/<code>/) ---- */
.share-sec .sh-id{font-size:15px;color:var(--muted-c);margin-bottom:16px}
.share-sec .sh-id b{color:var(--ink-c,inherit)}
.sh-cards{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.sh-cards li{border:1px solid var(--line-c);border-radius:14px;background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.sh-cards b{font-size:28px;line-height:1.1}
.sh-cards span{font-size:13.5px;color:var(--muted-c)}
.sh-pic{margin:0 0 28px}
.sh-pic img{display:block;width:100%;max-width:960px;height:auto;border:1px solid var(--line-c);border-radius:14px;background:#fff}
.sh-issues{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.sh-issues li{border:1px solid var(--line-c);border-radius:12px;background:var(--surface);padding:10px 14px;font-size:14.5px;line-height:1.55}
.sh-issues li b{display:inline-block;margin-inline-end:6px;font-size:12.5px;padding:1px 8px;border-radius:999px;border:1px solid currentColor}
.sh-issues .sev-error b{color:#b3261e}.sh-issues .sev-warning b{color:#8a5a00}.sh-issues .sev-info b{color:#1f5f8b}
.sh-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.sh-qr{display:flex;align-items:center;gap:14px;margin-top:8px}
.sh-qr #shQrImg{width:160px;height:160px;border:1px solid var(--line-c);border-radius:10px;background:#fff;padding:6px;flex:none}
.sh-qr #shQrImg svg{width:100%;height:100%;display:block}
.sh-qr p{margin:0;font-size:14px;color:var(--muted-c);max-width:260px}
.sh-state{padding:24px 0;font-size:16px}
@media print{.share-sec .sh-actions,.sh-qr{display:none}}

/* ---- floors ---- */
.tp-floors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.fl-tabs{display:flex;flex-wrap:wrap;gap:6px}
.tp-floors .chip-btn{min-height:40px}
.tp-floors .fl-add,.tp-floors .fl-del{border-style:dashed}
body.tp-full .tp-floors{margin:4px 0}

/* the plan in the page is a picture, not a scroll area: a swipe or a wheel over it must keep scrolling the page (it used to be trapped inside) */
body:not(.tp-full) .tp-canvas{overflow:hidden;touch-action:pan-y;overscroll-behavior:auto}
body.tp-full .tp-canvas{overscroll-behavior:contain}

/* ---- organisation chart: positions and people as a tree (horizontal on wide screens, an indented list on phones) ---- */
.org-wrap{overflow-x:auto;padding:6px 4px 28px}
.oc{--oc-line:var(--line-c,#c9d6df);--oc-gap:26px;display:flex;justify-content:safe center;min-width:max-content;margin-inline:auto}
.oc ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;position:relative;padding-top:var(--oc-gap)}
.oc>ul{padding-top:0}
.oc li{list-style:none;position:relative;padding:var(--oc-gap) 8px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.oc>ul>li{padding-top:0}
.oc li::before,.oc li::after{content:"";position:absolute;top:0;inset-inline-end:50%;width:50%;height:var(--oc-gap);border-top:2px solid var(--oc-line)}
.oc li::after{inset-inline-end:auto;inset-inline-start:50%;border-inline-start:2px solid var(--oc-line)}
.oc>ul>li::before,.oc>ul>li::after,.oc li:only-child::before,.oc li:only-child::after{display:none}
.oc li:only-child{padding-top:var(--oc-gap)}
.oc li:first-child::before,.oc li:last-child::after{border:0}
.oc li:last-child::before{border-inline-end:2px solid var(--oc-line);border-start-end-radius:8px}
.oc li:first-child::after{border-start-start-radius:8px}
.oc ul ul::before{content:"";position:absolute;top:0;inset-inline-start:50%;height:var(--oc-gap);border-inline-start:2px solid var(--oc-line)}
.oc-card{width:196px;border:1.5px solid var(--line-c);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 6px 22px rgba(4,30,51,.08)}
.oc-pos{padding:14px 12px;font-weight:700;font-size:var(--s-sm,.9375rem);border-style:dashed;background:transparent;box-shadow:none}
.oc-pos .tname{display:block}
.oc>ul>li>.oc-pos{background:var(--navy-900,#062B47);color:#fff;border:0}
.oc .tcard-btn.oc-btn{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px;text-align:start;border:0;background:transparent;box-shadow:none;transform:none;width:100%;cursor:pointer;color:inherit;font:inherit}
.oc .tcard-btn.oc-btn:hover,.oc .tcard-btn.oc-btn:focus-visible{transform:none;box-shadow:none}
.oc .oc-card:has(.tcard-btn):hover{border-color:var(--cyan-400);box-shadow:0 10px 28px rgba(4,30,51,.16)}
.oc-txt{display:grid;gap:2px;min-width:0}
.oc-txt .tname{font-weight:800;font-size:.9375rem;overflow-wrap:anywhere}.oc-txt .ttitle{font-size:.8125rem;color:var(--muted-c,#5b6f7e);overflow-wrap:anywhere}
.oc .avatar{width:52px;height:52px;border-radius:16px;flex:none;font-size:18px;overflow:hidden}
.avatar.has-photo{padding:0;background:var(--surface)}.avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.psocial{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 18px 0}
.oc ul.oc-stack{display:block;padding:0;margin-top:var(--oc-gap);margin-inline-start:34px;padding-inline-start:16px;border-inline-start:2px solid var(--oc-line);align-self:flex-start}
.oc ul.oc-stack::before{display:none}
.oc ul.oc-stack>li,.oc ul.oc-stack>li:only-child{display:block;padding:12px 0 0;text-align:start}
.oc ul.oc-stack>li::before,.oc ul.oc-stack>li::after{display:none}
.oc ul.oc-stack>li>.oc-card{position:relative}
.oc ul.oc-stack>li>.oc-card::before{content:"";position:absolute;top:50%;inset-inline-end:100%;width:16px;border-top:2px solid var(--oc-line)}
@media (max-width:1180px){
  .org-wrap{overflow:visible}
  .oc{display:block;min-width:0}
  .oc ul,.oc ul ul{display:block;padding:0;padding-inline-start:16px;margin-inline-start:12px;border-inline-start:2px solid var(--oc-line)}
  .oc>ul{border:0;margin:0;padding:0}
  .oc li,.oc li:only-child{display:block;padding:12px 0 0;text-align:start}
  .oc li::before,.oc li::after,.oc ul ul::before{display:none}
  .oc-card{width:auto;max-width:360px}
}