/* PETRA KSA AI Assistant - the PROJECT TOOLS panel and the MENU toggle (owner 2026-09-29).
   "بدي هون زي بروجكت اسيستنت تو ليست ... اكبس فان خلص يوديني على الفان ... يسهل الريفيو تاع البروجكت"
   "والبار الموجود على الشمال ... بدي يكون في كبسة بتخفيها وبتظهرها ... بتكبر انت الفيو تاعك للشاشة اذا اخفيتها"
   Its own sheet, loaded after desk.css, with its own class names (pt-*): nothing in desk.css changes, and every colour
   is one of the design's tokens (the header button copies the bell beside it). */

:root{--pt-w:236px;--pt-gap:20px}

/* ── the menu: hidden on his word, and the page takes the room. A desktop thing - on a phone the menu is the top band ── */
.rail .mark{position:relative}
.pt-railhide{position:absolute;inset-inline-start:18px;bottom:16px}      /* on the theme button's row, at its other end */
.pt-railhide .ic,.pt-railshow .ic{width:18px;height:18px;flex-basis:18px}
.pt-railshow{display:none}
@media (max-width:1100px){.pt-railhide{position:static;margin-inline-start:auto}}
@media (max-width:820px){.pt-railhide,.pt-railshow{display:none!important}}
@media (min-width:821px){
  html.rail-off .shell{grid-template-columns:minmax(0,1fr)}
  html.rail-off .rail{display:none}
  html.rail-off .head-in,html.rail-off #view,html.rail-off .lane-o{max-width:none}
  /* first in the header, the bell's twin: same size, same glass on the photo */
  html.rail-off .pt-railshow{display:inline-grid;place-items:center;order:-2;width:38px;height:38px;flex:0 0 38px;padding:0;border-radius:50%;
    border:1px solid rgba(255,255,255,.55);background:rgba(7,19,34,.35);color:#fff;cursor:pointer;transition:background .15s var(--e)}
  html.rail-off .pt-railshow:hover{background:rgba(7,19,34,.6)}
  html.rail-off .pt-railshow:focus-visible{outline:2px solid #fff;outline-offset:2px}
  html.rail-off .shell[data-view="usage"] .pt-railshow{color:var(--ink-2);border-color:var(--rule);background:var(--surface)}
  html.rail-off .shell[data-view="usage"] .pt-railshow:hover{background:var(--surface-2);color:var(--ink)}
}

/* ── project tools: docked beside the project and sticky while the page scrolls; a pull-out drawer when there is no room ── */
html.pt-dock #view{padding-inline-start:calc(28px + var(--pt-w) + var(--pt-gap))}
.pt{position:absolute;z-index:6;width:var(--pt-w)}
html.pt-on #view>.panel,html.pt-on #view .sug,html.pt-on #view .ws-units-box,html.pt-on #view .ws-frame,html.pt-on #view .ws-groups{scroll-margin-top:12px}
.pt[hidden],.pt-tab[hidden],.pt-scrim[hidden]{display:none!important}
.pt-in{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--lift);scrollbar-width:thin}
/* docked, it sticks below the header that stays on top (--pt-head is the header's measured height, projtools.js) */
html.pt-dock .pt-in{top:calc(var(--pt-head, 0px) + 12px);max-height:calc(100dvh - var(--pt-head, 0px) - 24px)}
.pt-h{display:flex;align-items:center;gap:8px;padding:9px 9px 9px 14px;border-bottom:1px solid var(--rule-2);background:var(--surface-2)}
.pt-t{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--ink)}
.pt-t .ic{color:var(--brand)}
.pt-x .ic{width:15px;height:15px;flex-basis:15px}
.pt-name{padding:9px 14px 0;font-size:12px;line-height:1.4;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-name b{color:var(--ink-2);font-weight:600}
.pt-find{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:0 10px;height:36px;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--rc);color:var(--ink-3);cursor:text;transition:background .25s var(--e),border-color .25s var(--e)}
.pt-find:focus-within{background:var(--surface);border-color:var(--brand)}
.pt-find .inp{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font-size:13px}
.pt-find .inp:focus{background:none}
.pt-n{min-height:4px;padding:4px 14px 0;font-size:11px;color:var(--ink-3)}
.pt-sec{padding:2px 12px 12px}
.pt-sec+.pt-sec{border-top:1px solid var(--rule-2)}
.pt-sec[hidden]{display:none}
.pt-sh{padding:10px 2px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.pt-acts{display:grid;gap:5px}
.pt-acts .btn{width:100%;min-width:0;margin:0;justify-content:flex-start;padding:5px 10px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.pt-acts .btn .ic{width:16px;height:16px;flex-basis:16px}
.pt-rev{display:grid;gap:4px}
.pt-chip{display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;border:1px solid var(--rule);border-radius:var(--rc);background:var(--surface);
  color:var(--ink-2);font:inherit;font-size:12.5px;text-align:start;cursor:pointer;transition:background .25s var(--e),border-color .25s var(--e),color .25s var(--e)}
.pt-chip:hover:not([disabled]){background:var(--surface-2);border-color:var(--ink-3);color:var(--ink)}
.pt-chip[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.pt-chip[disabled]{opacity:.55;cursor:default}
.pt-chip .l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-chip .num{font-size:11px;color:var(--ink-3)}
.pt-chip[aria-pressed="true"] .num{color:var(--brand-ink)}
.pt-clear{justify-self:start;margin-top:2px}
.pt-hint{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.pt-go{display:grid;gap:1px}
.pt-gi{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:0;border-radius:var(--rc);background:none;color:var(--ink-2);font:inherit;
  font-size:12.5px;text-align:start;cursor:pointer;transition:background .25s var(--e),color .25s var(--e)}
.pt-gi:hover{background:var(--surface-2);color:var(--ink)}
.pt-gi .ic{width:15px;height:15px;flex-basis:15px}
.pt-gi .l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-gi .num{font-size:11px;color:var(--ink-3)}
.pt-gi.sub{padding-inline-start:31px;font-size:12px}
.pt-gi[aria-current="true"]{background:var(--brand-soft);color:var(--brand-ink);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
.pt-gi[aria-current="true"] .num{color:var(--brand-ink)}

/* the handle that brings the tools back (hidden by him, or no room to dock them) - on the page's left edge */
.pt-tab{position:fixed;z-index:30;top:50%;inset-inline-start:0;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 6px;border:1px solid var(--rule);border-inline-start:0;border-radius:0 var(--r) var(--r) 0;background:var(--surface);color:var(--brand-ink);
  box-shadow:var(--lift-2);cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  transition:background .25s var(--e),color .25s var(--e)}
.pt-tab:hover{background:var(--brand-soft)}
.pt-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pt-tab span{writing-mode:vertical-rl;transform:rotate(180deg)}
.pt-tab .ic{width:16px;height:16px;flex-basis:16px}
@media (max-width:820px){.pt-tab{inset-inline-start:0;padding:10px 2px;font-size:9px}.pt-tab .ic{display:none}}   /* a phone: a slim edge, over the page's 16 px margin */
@media (min-width:821px){html.rail-off .pt-tab{inset-inline-start:0}}

/* the drawer */
html.pt-open .pt{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(300px,86vw);z-index:61}
html.pt-open .pt-in{position:static;height:100%;max-height:none;border-radius:0 var(--r) var(--r) 0;border-block:0;box-shadow:var(--lift-2)}
@media (max-width:820px){html.pt-open .pt{inset-inline-start:0}}
@media (min-width:821px){html.rail-off.pt-open .pt{inset-inline-start:0}}
.pt-scrim{position:fixed;inset:0;z-index:60;background:rgba(7,19,34,.34)}

/* where a jump lands: one soft pulse, so the eye finds it (a unit row is display:contents - its cells carry the pulse) */
@keyframes pt-ring{0%,40%{box-shadow:0 0 0 3px var(--brand)}100%{box-shadow:0 0 0 3px transparent}}
@keyframes pt-fill{0%,45%{background-color:var(--brand-soft)}100%{background-color:transparent}}
.pt-flash{animation:pt-ring 1.6s var(--e) 1}
.ws-unit.pt-flash{animation:none}
.ws-unit.pt-flash>*{animation:pt-fill 1.8s var(--e) 1}
@media (prefers-reduced-motion:reduce){.pt-flash,.ws-unit.pt-flash>*{animation:none}}

@media print{
  .pt,.pt-tab,.pt-scrim,.pt-railhide,.pt-railshow{display:none!important}
  html.pt-dock #view{padding-inline-start:28px}
}

/* ⭐ THE GO-TO LIST MOVES (owner 2026-09-29: "زبط هون الانيميشن وزبط هون السيمبل") - one marker slides to the part on screen
   (projtools.js slide), a hovered part's symbol leans in and takes the brand colour, a press sinks it; a sub-part hangs
   off its unit line by a short branch. Nothing moves for reduced motion. */
.pt-go{position:relative}
.pt-ind{position:absolute;inset-inline:0;top:0;height:0;border-radius:var(--rc);background:var(--brand-soft);box-shadow:inset 2px 0 0 var(--brand);
  opacity:0;pointer-events:none;transition:transform .38s var(--e),height .38s var(--e),opacity .2s var(--e)}
.pt-ind.still{transition:none}
.pt-go.has-ind .pt-gi{position:relative;z-index:1}
.pt-go.has-ind .pt-gi[aria-current="true"],.pt-go.has-ind .pt-gi[aria-current="true"]:hover{background:transparent;box-shadow:none}
.pt-gi{transition:background .25s var(--e),color .25s var(--e),transform .18s var(--e2)}
.pt-gi .ic{transition:transform .35s var(--e2),color .25s var(--e)}
.pt-gi:hover .ic{transform:translateX(2px) scale(1.08);color:var(--brand)}
.pt-gi:active{transform:scale(.98)}
.pt-gi.sub{position:relative}
.pt-gi.sub::before{content:"";position:absolute;inset-inline-start:15px;top:50%;width:8px;height:1.5px;border-radius:1px;background:currentColor;opacity:.35}
/* ⭐ EACH KIND OF MACHINE ITS OWN SYMBOL (owner 2026-10-03): a machine's line carries its symbol where the dash was - one step
   in from the part's own symbol, its name one step further */
.pt-gi.sub.has-ic{padding-inline-start:15px}
.pt-gi.sub.has-ic::before{content:none}
@media (prefers-reduced-motion:reduce){.pt-ind,.pt-gi,.pt-gi .ic{transition:none}.pt-gi:hover .ic,.pt-gi:active{transform:none}}

/* ⭐ THE MACHINES HANG UNDER "PROJECT HVAC UNITS" (owner 2026-10-04, his picture of the Go-to list: "زبط هاي بينهم انها مع بعض
   وانه الي تحتها sub items") - each machine one step in, a rail from the parent down its machines and a tick to each
   (the last one closes the rail), its symbol and name smaller and quieter than the parent's */
.pt-gi.sub,.pt-gi.sub.has-ic{position:relative;padding-inline-start:34px;font-size:12px;color:var(--ink-3)}
.pt-gi.sub::before,.pt-gi.sub.has-ic::before{content:"";position:absolute;inset-inline-start:15px;top:0;bottom:0;width:1.5px;height:auto;border-radius:1px;background:var(--rule);opacity:1}
.pt-gi.sub::after{content:"";position:absolute;inset-inline-start:15px;top:50%;width:12px;height:1.5px;border-radius:1px;background:var(--rule)}
.pt-gi.sub:not(:has(+ .pt-gi.sub))::before{bottom:50%}
.pt-gi.sub .ic{width:14px;height:14px;flex-basis:14px;opacity:.85}
.pt-gi.sub:hover,.pt-gi.sub[aria-current="true"]{color:var(--ink)}
.pt-gi.sub:hover::after,.pt-gi.sub[aria-current="true"]::after{background:var(--brand)}
.pt-gi:has(+ .pt-gi.sub){color:var(--ink);font-weight:600}