/* PETRA KSA AI Assistant - THE TIME LOG (web/static/timelog.js; owner 2026-10-02: "الإفورت بدي تستخدم فكرة جيرا تيكت",
   "زي خط تشارت انه انت لازم تفلل اللوك تايم تاعك", "بقدر اشوف الاكتيفيتي تاعته في كل يوم ... وانه عبى الوقت تاعه او ما عبى").
   His tokens only. The wide pieces (the team grid, the shares table) scroll inside their own box on a phone - the page
   itself never scrolls sideways. State classes are tls-* (the board's cards own st-*). */

/* the five colours of the work - the bar's segments, the dots, the legend */
.tl-seg{display:block;flex:0 0 auto;height:100%}
.tl-seg.g0{background:var(--brand)}
.tl-seg.g1{background:color-mix(in srgb,var(--brand) 42%,var(--surface))}
.tl-seg.g2{background:var(--ok)}
.tl-seg.g3{background:var(--warn)}
.tl-seg.g4{background:repeating-linear-gradient(135deg,var(--ink-3) 0 4px,color-mix(in srgb,var(--ink-3) 45%,var(--surface)) 4px 8px)}
.tl-seg.tl-lg{background:var(--brand)}
.tl-seg.tl-ov{background:var(--red)}

/* the line to fill */
.tl-bar{position:relative;display:flex;gap:2px;height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.tl-bar.big{height:24px;border-radius:8px}
.tl-tgt{position:absolute;top:0;bottom:0;width:2px;margin-inline-start:-1px;background:var(--ink)}
.tl-scale{display:flex;justify-content:space-between;margin-top:5px;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tl-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12px;color:var(--ink-2)}
.tl-legend span{display:inline-flex;align-items:center;gap:6px}
.tl-legend .tl-seg{width:12px;height:12px;border-radius:3px}
.tl-cellp .tl-legend{margin-bottom:12px}

/* the page's head and its panels */
.tl-head .tl-tabs{flex:0 0 auto}
.tl-head .pp-date .inp{max-width:150px}
.tl-day,.tl-addp,.tl-linesp,.tl-weekp,.tl-gridp,.tl-cellp,.tl-projp,.tl-actp,.tl-smp,.tl-capp,.tl-shp,.tl-mysh{margin-bottom:12px}
.tl-dh{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;margin-bottom:12px}
.tl-dh>div:first-child{flex:1 1 260px;min-width:0}
.tl-dh h3{margin:0;font-size:17px;line-height:1.3}
.tl-dh>.btn{align-self:flex-start}
.tl-says{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.tl-big{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.tl-big b{font-size:28px;font-weight:700;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.tl-big span{font-size:13px;color:var(--ink-3)}
.tl-day.tls-full .tl-big b,.tl-day.tls-ok .tl-big b,.tl-cellp .tl-big b{color:var(--ink)}
.tl-day.tls-full .tl-says,.tl-day.tls-ok .tl-says{color:var(--ok)}
.tl-day.tls-short .tl-says,.tl-day.tls-empty .tl-says{color:var(--red-ink)}
.tl-why{margin:10px 0 0;font-size:12.5px}
.tl-h4{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 10px;font-size:14px;font-weight:650;color:var(--ink)}
.tl-h4 .ic{width:16px;height:16px;flex:0 0 16px}
.tl-h4 .muted{font-size:12.5px;font-weight:400}
.tl-h4 .btn{margin-inline-start:auto}
.tl-none{margin:0}

/* logging: one row on a desktop, two on a tablet, one on a phone */
.tl-add{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(92px,.8fr) minmax(0,1.4fr) minmax(0,2.4fr) auto;gap:8px;align-items:end}
.tl-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.tl-f .inp{width:100%;min-width:0}
.tl-go{white-space:nowrap}
.tl-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tl-eb{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:flex-end;justify-content:flex-end}

/* the day's lines */
.tl-lines{list-style:none;margin:0;padding:0}
.tl-ln{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--rule)}
.tl-ln:first-child{border-top:0;padding-top:2px}
.tl-ln.ed{display:block;padding:10px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2)}
.tl-dot{flex:0 0 10px;width:10px;height:10px;margin-top:5px;border-radius:50%}
.tl-lm{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0}
.tl-lm b{font-weight:600;overflow-wrap:anywhere}
.tl-lm .muted{font-size:12.5px}
.tl-note{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.tl-lt{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-la{display:inline-flex;flex:0 0 auto;gap:2px;margin-top:-3px}

/* the week: a day a box, filling */
.tl-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.tl-wd{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.tl-wd:hover:not(:disabled),.tl-wd:focus-visible{border-color:var(--brand)}
.tl-wd:disabled{cursor:default;opacity:.55}
.tl-wd.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.tl-wdn{font-size:12px;font-weight:650;color:var(--ink-2)}
.tl-wdd{font-size:11px;color:var(--ink-3)}
.tl-wdb{display:block;width:100%;height:6px;margin:5px 0 3px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.tl-wdb i{display:block;height:100%;background:var(--brand)}
.tl-wd b{font-size:13px;font-variant-numeric:tabular-nums}
.tl-wd.tls-full .tl-wdb i,.tl-wd.tls-ok .tl-wdb i{background:var(--ok)}
.tl-wd.tls-short .tl-wdb i{background:var(--warn)}
.tl-wd.tls-empty{border-color:color-mix(in srgb,var(--red) 45%,var(--rule))}
.tl-wd.tls-empty b{color:var(--red-ink)}
.tl-wd.tls-off b,.tl-wd.tls-before b{color:var(--ink-3)}

/* the keys of the states */
.tl-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0;font-size:12px;color:var(--ink-2)}
.tl-weekp .tl-keys{margin-bottom:0}
.tl-keys span{display:inline-flex;align-items:center;gap:6px}
.tl-k{display:inline-block;flex:0 0 12px;width:12px;height:12px;border-radius:3px;background:var(--surface-2)}
.tl-k.tls-full,.tl-c.tls-full{background:var(--ok);color:var(--on-brand)}
.tl-k.tls-ok,.tl-c.tls-ok{background:var(--ok-soft);color:var(--ok)}
.tl-k.tls-short,.tl-c.tls-short{background:var(--warn-soft);color:var(--warn)}
.tl-k.tls-empty,.tl-c.tls-empty{background:var(--red-soft);color:var(--red-ink)}
.tl-k.tls-open,.tl-c.tls-open{background:var(--brand-soft);color:var(--brand-ink)}
.tl-k.tls-noacct,.tl-c.tls-noacct{background:repeating-linear-gradient(135deg,var(--surface-2) 0 4px,transparent 4px 8px)}

/* his screen: a person a row, a day a cell */
.pp-hg.tl-hg{grid-template-columns:210px repeat(var(--n),minmax(66px,1fr)) 104px;min-width:calc(314px + var(--n) * 66px)}
.pp-hg.tl-hg.mo{grid-template-columns:190px repeat(var(--n),minmax(32px,1fr)) 104px;min-width:calc(294px + var(--n) * 32px)}
.tl-who{min-width:0}
.tl-whot{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tl-whot b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-who .tl-whot small{margin:0;padding:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-c{margin:2px;min-width:0;min-height:34px;padding:0 4px;border:0;border-radius:6px;background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.tl-hg.mo .tl-c{font-size:11px;padding:0}
.tl-c.tls-off,.tl-c.tls-future,.tl-c.tls-before{background:transparent}
.tl-c.tls-extra,.tl-c.tls-free{background:var(--surface-3);color:var(--ink)}
.tl-c.on{outline:2px solid var(--brand);outline-offset:-2px}
.tl-c:hover:not(:disabled),.tl-c:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tl-c:disabled{cursor:default}
.tl-hg .pp-sum{flex-direction:column;align-items:flex-end;gap:0;line-height:1.25}
.tl-hg .pp-sum small{font-size:11px;font-weight:400;color:var(--ink-3)}

/* where the time went, and the shares - a bar a row */
.tl-rank{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.tl-rank li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(70px,2fr) auto;align-items:center;gap:10px}
.tl-rn{display:flex;flex-direction:column;min-width:0;font-size:13px;overflow-wrap:anywhere}
.tl-rn .tl-dot{display:inline-block;margin:0 6px 0 0;vertical-align:-1px}
.tl-rn small{font-size:11.5px;color:var(--ink-3)}
.tl-rnt{display:block;min-width:0}
.tl-rank b{min-width:64px;white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums;text-align:end}
.tl-rank b small{font-weight:400;color:var(--ink-3)}
.tl-rb{display:block;height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.tl-rb.big{height:16px;margin:10px 0 4px;border-radius:8px}
.tl-rb i{display:block;height:100%;background:var(--brand)}
.tls-near .tl-rb i,.tl-rb.tls-near i{background:var(--warn)}
.tls-used .tl-rb i,.tl-rb.tls-used i{background:var(--red)}
li.tls-used .tl-rn small,tr.tls-used td:last-child span:last-child{color:var(--red-ink);font-weight:600}

/* the team's week, and every share */
.tl-cap{margin:0;padding:0;list-style:none}
.tl-cap li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:7px 0;border-top:1px dashed var(--rule);font-size:13.5px}
.tl-cap li:first-child{border-top:0}
.tl-cap li.minus span{color:var(--ink-2)}
.tl-cap li.eq{border-top:1px solid var(--ink-3);font-weight:650}
.tl-cap b{white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-ld{display:inline-block;width:64px;margin:0 4px;padding-block:2px}
.tl-sht{min-width:780px}
.tl-sht .num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-sht td{vertical-align:middle}
.tl-tier{width:auto;padding-block:3px}
.tl-ex{width:78px;padding-block:3px;text-align:end}
.tl-shb{min-width:150px;white-space:nowrap}
.tl-shb .tl-rb{display:inline-block;width:84px;margin-inline-end:8px;vertical-align:middle}
.tl-mysh h3{margin:0 0 6px;font-size:17px}
.tl-mysh .tl-rank{margin-top:14px}

/* the ticket: Time tracking, the Jira way */
.tl-tt .tl-tth{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tl-tt h5{display:flex;align-items:center;gap:6px;margin:0}
.tl-tt h5 .ic{width:16px;height:16px}
.tl-tth .btn{margin-inline-start:auto}
.tl-tt-bar{height:10px}
.tl-tts{margin:7px 0 0;font-size:13px;color:var(--ink-2)}
.tl-tts b{color:var(--ink);font-variant-numeric:tabular-nums}
.tl-tts b.tl-red,.tl-red{color:var(--red-ink)}
.tl-by{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.tl-by>span{display:inline-flex;align-items:center;gap:6px}
.tl-by b{font-variant-numeric:tabular-nums;color:var(--ink)}
.tl-sew{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.tl-sew .ic{width:14px;height:14px;flex:0 0 14px}
.tl-sew.tls-near{color:var(--warn)}
.tl-sew.tls-used{color:var(--red-ink);font-weight:600}
.tl-tkf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;padding:10px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2)}
.tl-tkf .tl-fn,.tl-tkf .tl-eb{grid-column:1/-1}
.bd-lk.tl-wk{display:inline-flex;align-items:center;gap:4px;background:var(--brand-soft);color:var(--brand-ink)}
.bd-lk.tl-wk .ic{width:12px;height:12px}
.bd-tabs.bd-acts{flex-wrap:wrap;gap:0;margin:4px 0 10px}
.bd-tabs.bd-acts button{padding:6px 7px;font-size:12.5px}
.bd-tabs.bd-acts .bd-fn{font-size:11px}
.tl-lxs{display:inline-flex;gap:2px;margin-inline-start:auto}
.tl-lxs .bd-lx{margin-inline-start:0}
.bd-lt .tl-wa{font-weight:600;color:var(--ink)}
.bd-acth{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 8px;font-size:12.5px}

/* the board's bar: his day, filling - and each card's logged time */
.btn.bdb-tl{--ac:color-mix(in oklch,var(--warn) 72%,var(--brand));--ac-soft:color-mix(in oklab,var(--warn-soft) 72%,var(--brand-soft))}
.btn.bdb-tl.full{--ac:var(--ok);--ac-soft:var(--ok-soft)}
.tl-bbm{display:inline-block;flex:0 0 44px;width:44px;height:6px;border-radius:3px;background:color-mix(in srgb,currentColor 22%,transparent);overflow:hidden}
.tl-bbm i{display:block;height:100%;background:currentColor}
.bd-n.tl-cb small{margin-inline-start:1px;color:var(--ink-3)}
.bd-n.tl-cb.over{color:var(--red-ink)}
.bd-n.tl-cb.used{padding:0 7px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-weight:600}

/* a sales engineer's week, at the head of his board */
.tl-sb{display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:10px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.tl-sb>.ic{width:20px;height:20px;flex:0 0 20px;color:var(--brand-ink)}
.tl-sb>div{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.tl-sb span{font-size:12.5px;color:var(--ink-2)}
.tl-sb>.tl-rb{flex:0 0 140px}
.tl-sb.tls-near{border-color:var(--warn)}
.tl-sb.tls-used{border-color:var(--red);background:var(--red-soft)}
.tl-sb.tls-used>.ic,.tl-sb.tls-used span{color:var(--red-ink)}

@media (max-width:980px){
  .tl-add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tl-add .tl-fp,.tl-add .tl-fn{grid-column:1/-1}
  .tl-add .tl-go,.tl-add .tl-eb{grid-column:1/-1;justify-self:end}
}
@media (max-width:760px){
  .tl-week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pp-hg.tl-hg{grid-template-columns:132px repeat(var(--n),minmax(58px,1fr)) 78px;min-width:calc(210px + var(--n) * 58px)}
  .pp-hg.tl-hg.mo{grid-template-columns:132px repeat(var(--n),minmax(30px,1fr)) 78px;min-width:calc(210px + var(--n) * 30px)}
  .tl-hg .tl-whot small{display:none}
  .tl-tkf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tl-sb{flex-wrap:wrap}
  .tl-sb>.tl-rb{flex:1 1 100%}
  .tl-head .pp-date .inp{max-width:none}
}
@media (max-width:480px){
  .tl-add{grid-template-columns:minmax(0,1fr)}
  .tl-add .tl-go{justify-self:stretch}
  .tl-big b{font-size:24px}
  .tl-rank li{grid-template-columns:minmax(0,1fr) auto}
  .tl-rank li .tl-rb{grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:no-preference){
  .tl-seg,.tl-wdb i,.tl-rb i,.tl-bbm i{transition:width .45s var(--e)}
  .tl-c,.tl-wd{transition:outline-color .15s var(--e),border-color .15s var(--e)}
}

/* ⭐ THE SECOND ROUND (owner 2026-10-03: "الهدف الاساسي عندي انه انا اقدر احدد طلبات السيلز اليومية والاسبوعية والشهرية" ·
   "داشبورد احترافي مرتب ... زي تشارت او تايم لاين على كاليندر" · "اقدر احط انا اذا اجازات الناس" · "من جوا البروجكت نفسه بقدر
   انا اعمل تايم لوج"). The sales engineers' dashboard (a card each - his day, week and month - and one opened), the
   team's calendar (a day's hours and what they went on), the Leave tab, the project page's own panel. His tokens only. */

/* leave: the day's state and the calendar's cells */
.tl-k.tl-ok{background:var(--brand)}
.tl-k.tls-leave,.tl-c.tls-leave,.tl-c.lv{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ok) 24%,var(--surface)) 0 4px,var(--surface-2) 4px 8px);color:var(--ok)}
.tl-c.lv.part{background:var(--surface-2);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ok) 60%,transparent)}
.tl-c.tls-full.lv.part,.tl-c.tls-ok.lv.part{background:var(--ok-soft)}
.tl-wd.tls-leave{border-style:dashed}
.tl-wd.tls-leave b{color:var(--ok)}
.tl-day.tls-leave .tl-says{color:var(--ok)}

/* the team's calendar: the day's hours, and a bar of what they went on */
.tl-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.tl-cv{line-height:1.15}
.tl-cbar{display:flex;gap:1px;width:calc(100% - 10px);height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 16%,transparent);overflow:hidden}
.tl-c.tls-full .tl-cbar{background:color-mix(in srgb,var(--on-brand) 30%,transparent)}
button.tl-who{width:100%}
.tl-who.on b,.tl-who:hover b,.tl-who:focus-visible b{color:var(--brand-ink)}
.tl-who:hover b,.tl-who:focus-visible b{text-decoration:underline}
.tl-cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.tl-cols2.in{gap:18px;margin:4px 0 14px}
.tl-cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:14px}
.tl-serp,.tl-delp,.tl-ppp,.tl-sdp,.tl-lvp,.tl-lvwk,.tl-lvlp,.tl-enfp{margin-bottom:12px}
.tl-svc{display:flex;flex-wrap:wrap;gap:8px}
.tl-svcc{display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;border:1px solid var(--rule);border-radius:999px;background:var(--surface-2);font-size:12.5px;color:var(--ink-2)}
.tl-svcc b{font-size:15px;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.tl-pph{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-pph .bd-av{width:32px;height:32px;flex-basis:32px;font-size:12px}
.tl-pph .muted{font-size:13px;font-weight:400}
.tl-pdays{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.tl-pday{padding:8px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
.tl-pdh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font-size:13px}
.tl-pday .tl-lines{margin-top:4px}

/* the sales engineers' dashboard: a card each */
.tl-sfb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px}
.tl-sfb .seg button b{margin-inline-start:2px;font-variant-numeric:tabular-nums}
.tl-sfk{margin:0}
.tl-sfk .ic{width:13px;height:13px}
.tl-ses{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-bottom:12px}
.tl-ses.one{grid-template-columns:minmax(0,560px)}
.tl-se{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 14px 12px 17px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:var(--lift);color:var(--ink);font:inherit;text-align:start;cursor:pointer;overflow:hidden;
  transition:border-color .2s var(--e),box-shadow .25s var(--e),transform .2s var(--e2)}
.tl-se::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--brand)}
.tl-se.tls-near::before{background:var(--warn)}
.tl-se.tls-used::before{background:var(--red)}
.tl-se:hover,.tl-se:focus-visible{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--lift),var(--lift-2)}
.tl-se.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 32%,transparent),var(--lift)}
.tl-se:active{transform:translateY(0)}
.tl-seh{display:flex;align-items:center;gap:10px;min-width:0}
.tl-seh .bd-av{width:34px;height:34px;flex-basis:34px;font-size:12px}
.tl-sen{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.tl-sen b{overflow:hidden;font-size:14.5px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.tl-sen small{font-size:11.5px;color:var(--ink-3)}
.tl-tierb{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11.5px;font-weight:700}
.tl-tierb.t-top{background:var(--brand-soft);color:var(--brand-ink)}
.tl-tierb.t-low{background:var(--warn-soft);color:var(--warn)}
.tl-sel3{display:flex;flex-direction:column;gap:6px}
.tl-slr{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px}
.tl-slr>i{display:inline-flex;align-items:center;gap:3px;font-style:normal;color:var(--ink-3)}
.tl-slr>i .ic{width:11px;height:11px;flex:0 0 11px}
.tl-slr.cur>i{color:var(--ink);font-weight:650}
.tl-slr .tl-rb{height:8px}
.tl-slr.none .tl-rb{opacity:.5}
.tl-slr b{font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-slr b small{font-weight:400;color:var(--ink-3)}
.tl-slr.tls-used b{color:var(--red-ink)}
.tl-sef{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink-2)}
.tl-sef>span{display:inline-flex;align-items:center;gap:5px}
.tl-sef .ic{width:13px;height:13px;flex:0 0 13px;color:var(--ink-3)}
.tl-see{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--ink-2)}
.tl-see .bd-avs{margin-inline-start:0}
.tl-seet{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-flags{display:flex;flex-wrap:wrap;gap:6px}
.tl-flag{padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11.5px;font-weight:600}
.tl-flag.bad{background:var(--red-soft);color:var(--red-ink)}
.tl-flag.warn{background:var(--warn-soft);color:var(--warn)}
.tl-hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px}
.tl-hint .ic{width:16px;height:16px;flex:0 0 16px}

/* one sales engineer, opened */
.tl-sdp{border-color:color-mix(in srgb,var(--brand) 40%,var(--rule))}
.tl-sdp,.tl-ppp,.tl-cellp{scroll-margin-top:72px}
.tl-sdp .tl-tier{margin-inline-start:auto}
.tl-lims3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.tl-lim{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--surface-2)}
.tl-lim.tls-near{border-color:var(--warn)}
.tl-lim.tls-used{border-color:var(--red);background:color-mix(in srgb,var(--red-soft) 55%,var(--surface))}
.tl-lim.none{justify-content:center}
.tl-lim.none p{margin:0;font-size:12.5px}
.tl-limh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px}
.tl-limk{font-size:12.5px;font-weight:650;color:var(--ink-2)}
.tl-lime{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:var(--surface);color:var(--ink-3);font-size:11px}
.tl-lime.on{background:var(--brand-soft);color:var(--brand-ink)}
.tl-lime .ic{width:11px;height:11px;flex:0 0 11px}
.tl-lim .tl-big b{font-size:24px}
.tl-lim .tl-rb.big{margin:4px 0 2px}
.tl-limf,.tl-lims{margin:0;font-size:12px;color:var(--ink-2)}
.tl-lim.tls-used .tl-lims{color:var(--red-ink);font-weight:600}
.tl-limx{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--ink-3)}
.tl-limx .inp{width:84px;padding-block:3px;text-align:end}
.tl-dbars{display:flex;align-items:flex-end;gap:6px;height:96px;margin:0 0 30px;padding-top:6px;border-bottom:1px solid var(--rule)}
.tl-dbars.mo{gap:3px}
.tl-db{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:flex-end;min-width:10px;height:100%}
.tl-db i{display:block;width:70%;max-width:34px;min-height:2px;border-radius:4px 4px 0 0;background:var(--brand)}
.tl-db.off i{background:var(--ink-3)}
.tl-db.td i{background:var(--brand-ink)}
.tl-db small{position:absolute;top:100%;margin-top:4px;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.tl-dbars.mo .tl-db small{font-size:9.5px}
.tl-tbl{min-width:640px;margin-bottom:14px}
.tl-tbl td{vertical-align:middle}
.tl-tbl .num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-tbl .tl-wt{max-width:340px;color:var(--ink-2);overflow-wrap:anywhere}
.tl-tbl .tl-dot{display:inline-block;margin:0 6px 0 0;vertical-align:-1px}
.tl-tbl tr.tl-adm td{color:var(--ink-3)}
.tl-plink{padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.tl-plink:hover,.tl-plink:focus-visible{color:var(--brand-ink);text-decoration:underline}
.tl-jobs{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:0;list-style:none;font-size:13px}
.tl-jobs li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 10px;border:1px solid var(--rule);border-radius:8px}
.tl-jobs li.bad{border-color:color-mix(in srgb,var(--red) 40%,var(--rule))}
.tl-jst{margin-inline-start:auto;font-size:11.5px;color:var(--ink-3)}
.tl-jobs li.bad .tl-jst{color:var(--red-ink)}
.tl-mt{margin-top:14px}

/* which limit stops the work - a switch each */
.tl-enf{display:flex;flex-wrap:wrap;gap:12px 28px;margin-bottom:8px}
.tl-sw{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.tl-sw input{position:absolute;width:1px;height:1px;opacity:0}
.tl-swk{position:relative;flex:0 0 36px;width:36px;height:20px;border-radius:999px;background:var(--surface-3);transition:background .2s var(--e)}
.tl-swk::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:var(--lift);transition:transform .2s var(--e2)}
.tl-sw input:checked+.tl-swk{background:var(--brand)}
.tl-sw input:checked+.tl-swk::after{transform:translateX(16px)}
[dir=rtl] .tl-sw input:checked+.tl-swk::after{transform:translateX(-16px)}
.tl-sw input:focus-visible+.tl-swk{outline:2px solid var(--brand);outline-offset:2px}
.tl-sw>span:last-child{display:flex;flex-direction:column;font-size:13px}
.tl-sw small{font-size:11.5px;color:var(--ink-3)}

/* the ticket's line of his three limits */
.tl-sew3{flex-wrap:wrap;gap:4px 12px}
.tl-sew3>span{display:inline-flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums}
.tl-sew3>span i{font-style:normal;color:var(--ink-3)}
.tl-sew3>span small{color:var(--ink-3)}
.tl-sew3>span.tls-near{color:var(--warn)}
.tl-sew3>span.tls-used{color:var(--red-ink);font-weight:650}

/* leave: the form, who is off day by day, the list */
.tl-lvf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto auto;gap:8px;align-items:end}
.tl-lvf .tl-fn{grid-column:1/-2}
.tl-lvf .tl-go{grid-column:-2/-1}
.tl-lvf .seg button{padding-block:6px}
.tl-lvdays{display:grid;grid-template-columns:repeat(12,minmax(84px,1fr));gap:6px;min-width:1040px}
.tl-lvd{display:flex;flex-direction:column;gap:4px;min-height:84px;padding:8px;border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
.tl-lvd.td{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.tl-lvd.past{opacity:.6}
.tl-lvd b{font-size:12px}
.tl-lvd small{font-size:11px;color:var(--ink-3)}
.tl-lvc,.tl-lvk{overflow:hidden;padding:2px 7px;border-radius:6px;font-size:11.5px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.tl-lvk{flex:0 0 auto;min-width:112px;border-radius:999px;text-align:center}
.tl-lvi{align-items:center}
.k-annual.tl-lvc,.k-annual .tl-lvk{background:var(--brand-soft);color:var(--brand-ink)}
.k-sick.tl-lvc,.k-sick .tl-lvk{background:var(--red-soft);color:var(--red-ink)}
.k-emergency.tl-lvc,.k-emergency .tl-lvk{background:var(--warn-soft);color:var(--warn)}
.k-holiday.tl-lvc,.k-holiday .tl-lvk{background:var(--ok-soft);color:var(--ok)}
.k-unpaid.tl-lvc,.k-unpaid .tl-lvk,.k-other.tl-lvc,.k-other .tl-lvk{background:var(--surface-3);color:var(--ink-2)}

/* the project page: its time, and his work on it ready to log */
.tlp .tlp-lg{font-variant-numeric:tabular-nums}
.tlp .tlp-n{padding:1px 8px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:11.5px;font-weight:700}
.tlp-top{margin:4px 0 2px}
.tlp-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 8px;font-size:13.5px;font-weight:650;color:var(--ink)}
.tlp-h .ic{width:15px;height:15px;flex:0 0 15px;color:var(--brand-ink)}
.tlp-h .muted{font-size:12px;font-weight:400}
.tlp-sug{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tlp-s{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:start;gap:10px;padding:10px 12px;border:1px solid var(--rule);border-inline-start:3px solid var(--brand);border-radius:10px;background:var(--surface)}
.tlp-sd{display:flex;flex-direction:column;gap:6px;min-width:0}
.tlp-sd b{font-size:13px}
.tlp-refs{display:flex;flex-wrap:wrap;gap:4px}
.tlp-ref{max-width:100%;overflow:hidden;padding:1px 6px;border-radius:6px;background:var(--brand-soft);color:var(--brand-ink);font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.tlp-ref.tk{background:var(--ok-soft);color:var(--ok)}
.tlp-ref.bad{background:var(--red-soft);color:var(--red-ink)}
.tlp-sf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2.2fr) minmax(86px,.7fr) auto;gap:8px;align-items:end}
.tlp-add{display:grid;grid-template-columns:minmax(124px,.9fr) minmax(0,1.2fr) minmax(0,2fr) minmax(86px,.7fr) auto;gap:8px;align-items:end;padding:10px 12px;border:1px dashed var(--rule);border-radius:10px}
.tlp-lines .tl-lm b .muted{font-size:12px;font-weight:400}
.tlp .tl-by,.tlp .tl-sew{margin-top:6px}

@media (max-width:980px){
  .tl-lvf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tl-lvf .tl-fn,.tl-lvf .tl-go{grid-column:1/-1}
  .tl-lvf .tl-go{justify-self:end}
  .tlp-sf{grid-template-columns:minmax(0,1fr) minmax(86px,.45fr)}
  .tlp-sf .tl-fn,.tlp-sf .tl-eb{grid-column:1/-1}
  .tlp-sf .tl-eb{justify-self:end}
  .tlp-add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tlp-add .tl-fn,.tlp-add .tl-eb{grid-column:1/-1}
  .tlp-add .tl-eb{justify-self:end}
}
@media (max-width:760px){
  .tl-cols2,.tl-cols3,.tl-lims3{grid-template-columns:minmax(0,1fr)}
  .tl-ses,.tl-ses.one{grid-template-columns:minmax(0,1fr)}
  .tlp-s{grid-template-columns:minmax(0,1fr)}
  .tl-dbars{gap:3px}
}
@media (max-width:480px){
  .tl-lvf,.tlp-add{grid-template-columns:minmax(0,1fr)}
  .tl-slr{grid-template-columns:52px minmax(0,1fr) auto}
  .tl-lvk{min-width:0}
  .tl-lvi{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .tl-se,.tl-swk,.tl-swk::after{transition:none}
  .tl-se:hover,.tl-se:focus-visible,.tl-se:active{transform:none}
}

/* ⭐ THE THIRD ROUND (owner 2026-10-03 17:20: "قائمة التايم لوج هذا كلها بدها فيجواليزيشن تتضبط تتعدل ... اعملها انيميشن ضبط
   الالوان ضبط كل اشي" · "ما في داعي واحد وواحد ونص وربع خلص عدد الساعات انا بقدر اغيرها" · "ريبورت اسبوعي تفصيلي ... ون
   كليك" · "أحمد منصور اشتغل عليه في المشروع الفلاني ساعتين على ... لازم تكون التفاصيل موجوده"). His hours a week instead of
   tiers, what was done for each sales engineer, the report in one click, and the whole page in colour and motion. His
   tokens only; the motion plays once when a tab, a period or a date opens (.tl-anim), never on the minute's reload. */

/* colour: the headings carry their icon in a soft brand chip; the bars fill in a brand gradient */
.tl-h4>.ic:first-child{box-sizing:content-box;width:14px;height:14px;flex:0 0 14px;padding:5px;border-radius:8px;background:var(--brand-soft);color:var(--brand-ink)}
.tl-rb i,.tl-wdb i{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 78%,var(--surface)),var(--brand))}
.tls-near .tl-rb i,.tl-rb.tls-near i{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 70%,var(--surface)),var(--warn))}
.tls-used .tl-rb i,.tl-rb.tls-used i{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 70%,var(--surface)),var(--red))}
.tl-wd.tls-full .tl-wdb i,.tl-wd.tls-ok .tl-wdb i{background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 70%,var(--surface)),var(--ok))}
.tl-db i{background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 62%,var(--surface)))}
.tl-kpis .kpi{position:relative;overflow:hidden;transition:transform .2s var(--e2),box-shadow .25s var(--e)}
.tl-kpis .kpi::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 35%,var(--surface)))}
.tl-kpis .kpi:hover{transform:translateY(-2px);box-shadow:var(--lift),var(--lift-2)}
.tl-kpis .kpi-n{color:var(--brand-ink)}
.tl-lim{background:linear-gradient(160deg,var(--surface) 0%,var(--surface-2) 100%)}
.tl-lim.tls-ok{border-color:color-mix(in srgb,var(--brand) 28%,var(--rule))}
.tl-lim.tls-near{background:linear-gradient(160deg,var(--surface) 0%,color-mix(in srgb,var(--warn-soft) 70%,var(--surface)) 100%)}
.tl-se .bd-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent)}
.tl-se.tls-used .bd-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--red) 40%,transparent)}

/* his hours a week for a sales engineer - written (brand) or sharing the rest (plain) */
.tl-hrs{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.tl-hrs .inp{width:118px;padding-block:3px;text-align:end;font-variant-numeric:tabular-nums}
.tl-hrs.set .inp{border-color:color-mix(in srgb,var(--brand) 55%,var(--rule));background:var(--brand-soft);color:var(--brand-ink);font-weight:650}
.tl-sdp .tl-hrs{margin-inline-start:auto}
.tl-tierb small{margin-inline-start:1px;font-weight:500;opacity:.75}
.tl-tierb.t-set{background:var(--brand-soft);color:var(--brand-ink)}
.tl-plan{margin-top:12px}
.tl-plb{display:flex;height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.tl-plb i{display:block;height:100%}
.tl-plb i.g,.tl-k.g{background:var(--brand)}
.tl-plb i.r,.tl-k.r{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--brand) 62%,transparent) 0 5px,color-mix(in srgb,var(--brand) 32%,transparent) 5px 10px)}
.tl-sht .tl-hrs>span{display:none}
.tl-pll{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:12px;color:var(--ink-2)}
.tl-pll>span{display:inline-flex;align-items:center;gap:6px}
.tl-pll b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* what was done for him: a card an engineer, a block a project, the kinds of work and the requests as chips */
.tl-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:0 0 16px}
.tl-wkc{min-width:0;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);box-shadow:var(--lift)}
.tl-wkh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tl-wkh .bd-av{width:28px;height:28px;flex-basis:28px;font-size:11px}
.tl-wkh>b{flex:1 1 auto;min-width:0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.tl-wkt{flex:0 0 auto;font-size:12.5px;font-weight:650;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.tl-nolog{color:var(--warn);font-weight:600}
.tl-wkp{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tl-wkp>li{padding:8px 10px;border-radius:9px;background:var(--surface-2)}
.tl-wkpn{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px}
.tl-wkpn>b{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.tl-wka{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tl-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:11.5px}
.tl-chip b{color:var(--ink);font-variant-numeric:tabular-nums}
.tl-chip.rq{border-color:color-mix(in srgb,var(--brand) 35%,var(--rule));background:var(--brand-soft);color:var(--brand-ink)}
.tl-chip.rq.bad{border-color:color-mix(in srgb,var(--red) 40%,var(--rule));background:var(--red-soft);color:var(--red-ink)}
.tl-wkn{display:flex;flex-direction:column;gap:3px;margin:6px 0 0;padding:0;list-style:none;font-size:12px;color:var(--ink);overflow-wrap:anywhere}

/* the report in one click */
.tl-repb .ic,.tl-rep summary .ic{width:14px;height:14px;flex:0 0 14px}
.tl-rep{position:relative}
.tl-rep>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer}
.tl-rep>summary::-webkit-details-marker{display:none}
.tl-rep:not([open]) .tl-repm{display:none}
.tl-repm{position:fixed;z-index:60;display:flex;flex-direction:column;gap:12px;width:min(420px,calc(100vw - 32px));max-height:min(70vh,560px);padding:12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:var(--lift),var(--lift-2);overflow:auto}
.tl-repg{display:flex;flex-direction:column;gap:4px}
.tl-repg>b{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.tl-repb2{margin-top:4px;font-size:11.5px;color:var(--ink-3)}
.tl-rep2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.tl-rep3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.tl-repi{display:flex;flex-direction:column;min-width:0;padding:7px 10px;border:1px solid var(--rule);border-radius:9px;background:var(--surface-2);color:var(--ink);font-size:13px;text-decoration:none;overflow-wrap:anywhere;transition:border-color .15s var(--e),background .15s var(--e),transform .15s var(--e2)}
.tl-repi small{font-size:11px;color:var(--ink-3)}
.tl-repi:hover,.tl-repi:focus-visible{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);transform:translateY(-1px)}

@media (max-width:480px){
  .tl-rep2,.tl-rep3,.tl-work{grid-template-columns:minmax(0,1fr)}
  .tl-hrs .inp{width:96px}
  .tl-sfb .seg{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .tl-sfb .seg button{flex:0 0 auto;white-space:nowrap}
}

/* ⭐ the sales engineers' timeline (owner 2026-10-03: "زي خريطة تايم لاين للسيلز ... يوم السبت شو اشتغلنا له مين اشتغل له
   تسكات كم ساعة"): a row a sales engineer, a cell a day - darker = more hours; dashed = work done, no hours logged yet */
.tl-svw{display:flex;margin:0 0 12px}
.tl-svw .seg button{display:inline-flex;align-items:center;gap:6px}
.tl-svw .seg .ic{width:14px;height:14px;flex:0 0 14px}
.tl-tlp{margin-bottom:12px}
.pp-hg.tl-tg{grid-template-columns:200px repeat(var(--n),minmax(92px,1fr)) 84px;min-width:calc(284px + var(--n) * 92px);row-gap:4px}
.pp-hg.tl-tg.mo{grid-template-columns:180px repeat(var(--n),minmax(34px,1fr)) 72px;min-width:calc(252px + var(--n) * 34px);row-gap:3px}
.tl-tc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:66px;margin:0 2px;padding:4px 2px;border:1px solid transparent;border-radius:9px;
  background:color-mix(in srgb,var(--brand) calc(var(--h,0) * 62% + 8%),var(--surface-2));color:var(--ink);font:inherit;font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:transform .15s var(--e2),border-color .15s var(--e),box-shadow .2s var(--e)}
.tl-tg.mo .tl-tc{min-height:34px;margin:0 1px;padding:2px 0;border-radius:6px;font-size:11px}
.tl-tc b{font-weight:650;white-space:nowrap}
.tl-tc small{font-size:10.5px;color:var(--ink-2)}
.tl-tc .bd-avs{display:inline-flex;margin:0}
.tl-tc .bd-av{width:18px;height:18px;flex-basis:18px;margin-inline-start:-4px;font-size:8px;box-shadow:0 0 0 1.5px var(--surface)}
.tl-tc .bd-av:first-child{margin-inline-start:0}
.tl-more{font-style:normal;font-size:10px;color:var(--ink-2);margin-inline-start:3px}
.tl-tc.nil{background:transparent;border:1px dashed color-mix(in srgb,var(--rule) 70%,transparent);cursor:default}
.tl-tc.off.nil{background:repeating-linear-gradient(135deg,var(--surface-2) 0 4px,transparent 4px 8px);border-color:transparent}
.tl-tc.nolog{background:var(--surface);border:1.5px dashed color-mix(in srgb,var(--warn) 65%,var(--rule))}
.tl-tc.nolog .tl-nolog{font-size:11px}
button.tl-tc:hover,button.tl-tc:focus-visible{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--lift)}
.tl-tc.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 40%,transparent)}
.tl-tbr{grid-column:1/-1;padding:12px 4px 2px;font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule)}
.tl-tbr{display:flex;align-items:baseline;gap:10px}
.tl-tbr small{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.tl-tbe{grid-column:1/-1;padding:2px 4px 6px;font-size:12px;color:var(--ink-3)}
.tl-tbe .tl-plink{color:var(--ink-2);font-size:12px}
/* ⛔ .tl-scroll had NO rule (found 2026-10-03 on a phone): the team calendar, the shares table and every line table were
   CUT by the panel instead of scrolling inside their own box, as the head of this file promises */
.tl-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
/* swiping through the days on a phone keeps the names (and the branch lines) in view */
.tl-tg .pp-who{position:sticky;left:0;z-index:2;align-self:stretch;display:flex;align-items:center;background:var(--surface)}
.tl-tg .tl-tbe,.tl-tg .tl-tbr{position:sticky;left:0;max-width:calc(100vw - 64px)}
.tl-ttot .pp-who b{color:var(--ink-2)}
.tl-ttc{padding:6px 0;border-top:1px solid var(--ink-3);text-align:center;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tl-ttot .pp-sum{border-top:1px solid var(--ink-3);padding-top:6px}
.tl-k.tl-kh1{background:color-mix(in srgb,var(--brand) 24%,var(--surface-2))}
.tl-k.tl-kh2{background:color-mix(in srgb,var(--brand) 70%,var(--surface-2))}
.tl-k.tl-kn{background:transparent;border:1.5px dashed color-mix(in srgb,var(--warn) 65%,var(--rule))}
/* inside one sales engineer: a day under the other */
.tl-dl{display:flex;flex-direction:column;gap:0;margin:0 0 16px;padding:0;list-style:none}
.tl-dld{position:relative;padding:0 0 12px 22px;border-inline-start:2px solid color-mix(in srgb,var(--brand) 30%,var(--rule));margin-inline-start:6px}
.tl-dld::before{content:"";position:absolute;inset-inline-start:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)}
.tl-dld.td::before{background:var(--brand)}
.tl-dld:last-child{border-color:transparent}
.tl-dlh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px;font-size:13.5px}
.tl-dli{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.tl-dli>li{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:9px;background:var(--surface-2)}
.tl-dle{display:flex;align-items:center;gap:8px;min-width:0}
.tl-dle .bd-av{width:24px;height:24px;flex-basis:24px;font-size:10px}
.tl-dle>b{flex:1 1 auto;min-width:0;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.tl-chip .tl-dot{display:inline-block;margin:0;width:8px;height:8px;flex:0 0 8px}
@media (max-width:760px){
  .pp-hg.tl-tg{grid-template-columns:124px repeat(var(--n),minmax(78px,1fr)) 62px;min-width:calc(186px + var(--n) * 78px)}
  .pp-hg.tl-tg.mo{grid-template-columns:116px repeat(var(--n),minmax(30px,1fr)) 56px;min-width:calc(172px + var(--n) * 30px)}
  .tl-tg .tl-whot small{display:none}
}

/* motion - once, when a view opens */
@keyframes tl-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tl-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tl-up{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tl-fade{from{opacity:0}to{opacity:1}}
@keyframes tl-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 45%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~*{animation:tl-rise .42s var(--e) backwards}
  .tl-anim~*:nth-child(3){animation-delay:.05s}
  .tl-anim~*:nth-child(4){animation-delay:.1s}
  .tl-anim~*:nth-child(5){animation-delay:.15s}
  .tl-anim~*:nth-child(6){animation-delay:.2s}
  .tl-anim~*:nth-child(n+7){animation-delay:.25s}
  .tl-anim~.tl-kpis .kpi{animation:tl-rise .4s var(--e) backwards}
  .tl-anim~.tl-kpis .kpi:nth-child(2){animation-delay:.06s}
  .tl-anim~.tl-kpis .kpi:nth-child(3){animation-delay:.12s}
  .tl-anim~.tl-kpis .kpi:nth-child(4){animation-delay:.18s}
  .tl-anim~.tl-kpis .kpi:nth-child(5){animation-delay:.24s}
  .tl-anim~.tl-ses .tl-se{animation:tl-rise .4s var(--e) backwards}
  .tl-anim~.tl-ses .tl-se:nth-child(2){animation-delay:.04s}
  .tl-anim~.tl-ses .tl-se:nth-child(3){animation-delay:.08s}
  .tl-anim~.tl-ses .tl-se:nth-child(4){animation-delay:.12s}
  .tl-anim~.tl-ses .tl-se:nth-child(5){animation-delay:.16s}
  .tl-anim~.tl-ses .tl-se:nth-child(6){animation-delay:.2s}
  .tl-anim~.tl-ses .tl-se:nth-child(n+7){animation-delay:.24s}
  .tl-anim~* .tl-rb i,.tl-anim~* .tl-wdb i,.tl-anim~* .tl-plb i,.tl-anim~* .tl-bar .tl-seg{transform-origin:left center;animation:tl-grow .7s var(--e) .2s backwards}
  [dir=rtl] .tl-anim~* .tl-rb i,[dir=rtl] .tl-anim~* .tl-wdb i,[dir=rtl] .tl-anim~* .tl-plb i,[dir=rtl] .tl-anim~* .tl-bar .tl-seg{transform-origin:right center}
  .tl-anim~* .tl-db i{transform-origin:bottom center;animation:tl-up .6s var(--e) .2s backwards}
  .tl-anim~* .tl-c{animation:tl-fade .5s var(--e) .15s backwards}
  .tl-anim~* .tl-tc,.tl-tlp.tl-in .tl-tc{animation:tl-fade .5s var(--e) .15s backwards}
  .tl-sdp.tl-pop{animation:tl-rise .38s var(--e) backwards}
  .tl-sdp.tl-pop .tl-rb i{transform-origin:left center;animation:tl-grow .6s var(--e) .12s backwards}
  .tl-sdp.tl-pop .tl-db i{transform-origin:bottom center;animation:tl-up .6s var(--e) .12s backwards}
  .tl-sdp.tl-pop .tl-wkc{animation:tl-rise .4s var(--e) backwards;animation-delay:calc(.08s + var(--i,0) * .05s)}
  .tl-se.tls-used .tl-flag.bad,.tl-lim.tls-used .tl-lime.on{animation:tl-ring 1.6s var(--e) .6s 2}
  .tl-repm{animation:tl-rise .2s var(--e) backwards}
  .tl-hrs .inp{transition:border-color .2s var(--e),background .2s var(--e)}
}
@media (prefers-reduced-motion:reduce){
  .tl-kpis .kpi,.tl-repi{transition:none}
  .tl-kpis .kpi:hover,.tl-repi:hover{transform:none}
}

/* ⭐ THE SALES BOARD, THE WINDOW, LOGGING MADE EASY (owner 2026-10-03 20:35: "الفيجواليزيشن سيء جدا ... easy to understand
   easy to access ... تلت لينات تيم جدة تيم رياض تيم دمام ... على شكل كاردات ... زي كان بان بورد" · "تسجيل التايم لوج بدي
   اياه يكون افضل" · "شوف كيف الحرف واي اتش مشلف ... سنتر الدائره"). His tokens only. */

/* the avatar's letters sit in the middle of its circle wherever it is put (a row's span{display:inline-flex} pushed them
   to the left in the ticket's Time tracking) */
.bd-av.bd-av{display:inline-grid;place-items:center;justify-content:center;align-content:center;text-align:center;line-height:1;padding:0}

/* three lanes - Jeddah, Riyadh, Dammam - a card a sales engineer */
.tl-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px;align-items:start}
.tl-lane{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:1px solid var(--rule);border-radius:calc(var(--r) + 4px);background:var(--surface-2)}
.tl-lnh{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.tl-lnt{display:flex;flex-direction:column;min-width:0}
.tl-lnt b{font-size:16px;font-weight:700;color:var(--ink)}
.tl-lnt small,.tl-lnv small{font-size:11.5px;color:var(--ink-3)}
.tl-lnv{display:flex;flex-direction:column;align-items:flex-end;text-align:end}
.tl-lnv b{font-size:16px;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.tl-rb.tl-lnb{height:6px;margin-bottom:4px}
.tl-lnc{display:flex;flex-direction:column;gap:8px}
.tl-bc{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;padding:12px 12px 10px 15px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:var(--lift);color:var(--ink);font:inherit;text-align:start;cursor:pointer;overflow:hidden;
  transition:transform .18s var(--e2),box-shadow .25s var(--e),border-color .2s var(--e)}
.tl-bc::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--brand)}
.tl-bc.tls-near::before{background:var(--warn)}
.tl-bc.tls-used::before{background:var(--red)}
.tl-bc.idle::before{background:var(--rule)}
.tl-bc:hover,.tl-bc:focus-visible{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--lift),var(--lift-2)}
.tl-bc:active{transform:translateY(-1px)}
.tl-bch{display:flex;align-items:center;gap:10px;min-width:0}
.tl-bch .bd-av{width:34px;height:34px;flex:0 0 34px;font-size:12px}
.tl-bcn{display:flex;flex-direction:column;min-width:0}
.tl-bcn b{overflow:hidden;font-size:14px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.tl-bcn small{font-size:11.5px;color:var(--ink-3)}
.tl-bc.tls-used .tl-bcn small{color:var(--red-ink);font-weight:600}
.tl-bc.tls-near .tl-bcn small{color:var(--warn);font-weight:600}
.tl-bcv{display:flex;align-items:baseline;gap:6px}
.tl-bcv b{font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tl-bcv span{font-size:12.5px;color:var(--ink-3)}
.tl-bc.idle .tl-bcv b{color:var(--ink-3)}
.tl-bc .tl-rb{height:7px}
.tl-bcf{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}
.tl-bcf .bd-avs{margin:0}
.tl-bcf .bd-av{width:22px;height:22px;flex-basis:22px;font-size:9px}
.tl-bct{margin-inline-start:auto;padding:1px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:11px;font-weight:600;white-space:nowrap}

/* the folded settings under the board */
.tl-set{margin:0 0 12px}
.tl-set>summary{display:flex;align-items:center;gap:10px;padding:12px 16px;list-style:none;cursor:pointer;margin-bottom:12px}
.tl-set>summary::-webkit-details-marker{display:none}
.tl-set>summary .ic{width:16px;height:16px;flex:0 0 16px;color:var(--brand-ink)}
.tl-set>summary .ic:last-child{margin-inline-start:auto;color:var(--ink-3);transition:transform .2s var(--e)}
.tl-set[open]>summary .ic:last-child{transform:rotate(180deg)}
.tl-set>summary .muted{font-size:12.5px}

/* one sales engineer in a window */
.askc-in.tl-seo-in{width:min(900px,calc(100vw - 32px));max-width:min(900px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.tl-seoh{align-items:center}
.tl-seoh>.bd-av{width:46px;height:46px;flex:0 0 46px;font-size:15px}
.tl-seoh .bd-dx{flex-wrap:wrap;justify-content:flex-end}
.tl-seobar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 18px;border-bottom:1px solid var(--rule-2)}
.tl-seob{padding:14px 18px 20px;overflow:auto;min-height:0}
.tl-seow{display:flex;align-items:center;gap:10px;padding:30px 0;justify-content:center;color:var(--ink-3)}
.tl-spin{width:18px;height:18px;border:2px solid var(--rule);border-top-color:var(--brand);border-radius:50%;animation:tl-spin .8s linear infinite}
@keyframes tl-spin{to{transform:rotate(360deg)}}
.tl-sst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.tl-ss{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--surface-2)}
.tl-ss small{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.tl-ss b{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tl-ss.b{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 16%,var(--surface)),var(--surface-2))}
.tl-ss.b b{color:var(--brand-ink)}
.tl-ss.g b{color:var(--ok)}
.tl-ss.r b{color:var(--red-ink)}
.tl-ss .muted{font-size:12px}
.tl-sdays{display:flex;align-items:flex-end;gap:8px;height:130px;margin:0 0 30px;padding-top:4px;border-bottom:1px solid var(--rule)}
.tl-sdays.mo{gap:3px}
.tl-sd{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:flex-end;min-width:8px;height:100%}
.tl-sd i{display:block;width:72%;max-width:44px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 60%,var(--surface)))}
.tl-sd.nolog i{background:transparent;border:1.5px dashed color-mix(in srgb,var(--warn) 70%,var(--rule));border-bottom:0}
.tl-sd b{font-size:11px;font-weight:650;color:var(--ink-2);margin-bottom:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-sd small{position:absolute;top:100%;margin-top:5px;font-size:11px;color:var(--ink-3)}
.tl-sd.off small{opacity:.55}
/* a whole day away - the word on the empty day (owner 2026-11-11: «لازم يبين هون انه معطل») */
.tl-sdaway{display:inline-block;font-style:normal;font-size:10.5px;font-weight:650;color:var(--warn-ink,var(--ink-2));background:color-mix(in srgb,var(--warn) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 45%,var(--rule));border-radius:6px;padding:2px 6px;white-space:nowrap}
.tl-sd.td small{color:var(--brand-ink);font-weight:700}
.tl-sdays.mo .tl-sd small{font-size:9.5px}
.tl-swho{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:16px}
.tl-swe{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
.tl-swe .bd-av{width:30px;height:30px;flex:0 0 30px;font-size:11px}
.tl-swe>span{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.tl-swe b{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.tl-swe small{overflow:hidden;font-size:11px;color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap}
.tl-swe em{font-style:normal;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.tl-spj{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.tl-spj li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:8px;background:var(--surface-2);font-size:13px}

/* logging made easy: one tap for how long, one for the kind of work */
.tl-lf{display:flex;flex-direction:column;gap:12px}
.tl-tkf.tl-lf{display:flex}
.tl-lfr{display:flex;flex-direction:column;gap:6px;min-width:0}
.tl-lft{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tl-lfi{width:110px;font-size:15px;font-weight:650;text-align:center;font-variant-numeric:tabular-nums}
.tl-tq,.tl-ap{display:flex;flex-wrap:wrap;gap:6px}
.tl-tqb,.tl-apb{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .15s var(--e),border-color .15s var(--e),color .15s var(--e),box-shadow .2s var(--e)}
.tl-tqb:hover,.tl-apb:hover{border-color:var(--brand);color:var(--ink)}
.tl-tqb[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:var(--on-brand);box-shadow:0 2px 10px color-mix(in srgb,var(--brand) 35%,transparent)}
.tl-apb .tl-dot{display:inline-block;width:9px;height:9px;flex:0 0 9px;margin:0}
.tl-apb[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);box-shadow:0 0 0 1px var(--brand) inset}
.tl-lf2{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:8px}
.tl-lff{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px dashed var(--rule)}
.tl-lfs{display:inline-flex;align-items:center;gap:6px;margin-inline-end:auto;font-size:13px;color:var(--ink-2)}
.tl-lfs .ic{width:15px;height:15px;flex:0 0 15px;color:var(--brand-ink)}
.tl-lfs b{color:var(--ink);font-variant-numeric:tabular-nums}
.tl-tkf.tl-lf{padding:12px;border-radius:12px;background:var(--surface-2)}

@media (max-width:900px){
  .tl-lanes{grid-template-columns:minmax(0,1fr)}
  .tl-sst{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tl-sst .tl-ss:first-child{grid-column:1/-1}
}
@media (max-width:480px){
  .tl-lf2{grid-template-columns:minmax(0,1fr)}
  .tl-seoh .bd-dx{width:100%}
  .tl-seob{padding:12px 14px 18px}
  .tl-sdays{gap:4px}
  .tl-seot{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .tl-seot button{flex:0 0 auto;white-space:nowrap}
}
@keyframes tl-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tl-bar-up{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~.tl-lanes .tl-lane{animation:tl-rise .42s var(--e) backwards}
  .tl-anim~.tl-lanes .tl-lane:nth-child(2){animation-delay:.08s}
  .tl-anim~.tl-lanes .tl-lane:nth-child(3){animation-delay:.16s}
  .tl-anim~.tl-lanes .tl-bc{animation:tl-rise .4s var(--e) backwards;animation-delay:calc(.15s + var(--i,0) * .05s)}
  .tl-anim~.tl-lanes .tl-rb i{transform-origin:left center;animation:tl-grow .8s var(--e) .35s backwards}
  .tl-seo.tl-in{animation:tl-fade .25s var(--e) backwards}
  .tl-seo.tl-in .tl-seo-in{animation:tl-pop .35s var(--e) backwards}
  .tl-seob .tl-ss{animation:tl-rise .35s var(--e) backwards}
  .tl-seob .tl-ss:nth-child(2){animation-delay:.05s}
  .tl-seob .tl-ss:nth-child(3){animation-delay:.1s}
  .tl-seob .tl-ss .tl-rb i{transform-origin:left center;animation:tl-grow .7s var(--e) .15s backwards}
  .tl-seob .tl-sd i{transform-origin:bottom center;animation:tl-bar-up .6s var(--e) backwards}
  .tl-seob .tl-sd:nth-child(2) i{animation-delay:.04s}
  .tl-seob .tl-sd:nth-child(3) i{animation-delay:.08s}
  .tl-seob .tl-sd:nth-child(4) i{animation-delay:.12s}
  .tl-seob .tl-sd:nth-child(5) i{animation-delay:.16s}
  .tl-seob .tl-sd:nth-child(6) i{animation-delay:.2s}
  .tl-seob .tl-sd:nth-child(n+7) i{animation-delay:.24s}
  .tl-seob .tl-swe,.tl-seob .tl-dld{animation:tl-rise .4s var(--e) .1s backwards}
  .tl-lf{animation:tl-rise .3s var(--e) backwards}
  .tl-lfs{transition:color .2s var(--e)}
}
@media (prefers-reduced-motion:reduce){
  .tl-bc,.tl-tqb,.tl-apb{transition:none}
  .tl-bc:hover,.tl-bc:focus-visible,.tl-bc:active{transform:none}
  .tl-spin{animation:none}
}

/* ⭐ THE TICKET'S ACTIVITY AS A TIMELINE (owner 2026-10-03, his picture of the Activity column: "اللوج تايم هيستوري ... مش
   كتير ممتازة ... بدي اياها فيجوالايز مرتبة متكتكة احترافية ... انا بقدر افهمها") - a rail with a dot a line (its colour
   is its kind), a day heading over each day's lines, a work log as a small card (the hours, the kind, what was done,
   who), the change / take-off buttons only on hover (always on a touch screen). */
.bd-log{position:relative;gap:4px}
.bd-log::before{content:"";position:absolute;top:4px;bottom:4px;inset-inline-start:7px;width:2px;border-radius:2px;background:var(--rule)}
.bd-log>.bd-lday{position:relative;z-index:1;margin:8px 0 2px;padding:0;list-style:none}
.bd-log>.bd-lday:first-child{margin-top:0}
.bd-log>.bd-lday span{display:inline-block;padding:2px 10px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.bd-log>.bd-li{position:relative;margin-inline-start:0;padding:6px 8px 6px 24px;border:0;border-radius:10px;transition:background .15s var(--e)}
.bd-log>.bd-li::before{content:"";position:absolute;inset-inline-start:2px;top:11px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:2px solid var(--ink-3);background:var(--surface-2)}
.bd-log>.bd-li:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.bd-log>.bd-li.k-comments::before{border-color:var(--warn);background:var(--warn)}
.bd-log>.bd-li.k-submittal::before{border-color:var(--brand);background:var(--brand)}
.bd-log>.bd-li.k-offer::before{border-color:var(--ok);background:var(--ok)}
.bd-log>.bd-li.k-request::before{border-color:var(--brand-ink);background:var(--brand-soft)}
.bd-log>.bd-li.k-event::before,.bd-log>.bd-li.k-wlog::before{top:10px;inset-inline-start:4px;width:8px;height:8px;border-width:2px;border-color:var(--rule-2);background:var(--surface-2)}
.bd-log>.bd-li.k-event,.bd-log>.bd-li.k-wlog{padding-block:3px}
.bd-log .bd-ld{display:none}
.bd-log .bd-lh{gap:6px;min-height:22px}
.bd-log .bd-lk{font-size:12.5px}
.bd-log .bd-lh .muted{font-size:11.5px}
.bd-log .bd-lt{font-size:12.5px;line-height:1.45}
.bd-log .bd-li.k-event .bd-lt,.bd-log .bd-li.k-wlog .bd-lt{font-size:11.5px}
/* a work log: a small card on the rail */
.bd-log>.bd-li.tl-wl{display:flex;flex-direction:column;gap:5px;margin:2px 0;padding:9px 10px 9px 28px;border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift)}
.bd-log>.bd-li.tl-wl::before{inset-inline-start:2px;top:13px;border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.bd-log>.bd-li.tl-wl:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--rule));background:var(--surface)}
.tl-wlh{display:flex;align-items:center;gap:8px;min-width:0}
.tl-wlt{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:2px 9px;border-radius:999px;background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.tl-wlt .ic{width:12px;height:12px;flex:0 0 12px}
.tl-wla{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.tl-wla .tl-dot{display:inline-block;width:8px;height:8px;flex:0 0 8px;margin:0}
.tl-wlx{display:inline-flex;gap:2px;margin-inline-start:auto;flex:0 0 auto}
.tl-wlx .bd-lx{width:26px;height:26px;margin:0;padding:0;justify-content:center}
.tl-wln{font-size:12.5px;line-height:1.45;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.tl-wlm{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)}
.tl-wlm .bd-av{width:18px;height:18px;flex:0 0 18px;font-size:8px;border-width:1px}
/* change / take off: on hover or keyboard focus where a mouse is; always there on a touch screen */
@media (hover:hover){
  .bd-log .bd-li .bd-lx,.bd-log .bd-li .tl-wlx{opacity:0;transition:opacity .15s var(--e)}
  .bd-log .bd-li:hover .bd-lx,.bd-log .bd-li:focus-within .bd-lx,.bd-log .bd-li:hover .tl-wlx,.bd-log .bd-li:focus-within .tl-wlx{opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  #bdDlg.bd-in .bd-log>li{animation:tl-rise .35s var(--e) .2s backwards}
  .bd-log>.bd-li.tl-wl{transition:border-color .15s var(--e),transform .15s var(--e2)}
  .bd-log>.bd-li.tl-wl:hover{transform:translateX(2px)}
}
.tl-swe em{white-space:nowrap}
/* ⭐ THE TIME LOG'S BAR, TIDIED (owner 2026-10-04, his picture of it: «زبط الكبسات والالوان والانيميشن»). Measured first:
   the open tab had NO look at all - the tabs carry aria-selected and only aria-pressed was ever styled, so nothing said
   which page was open. Now each tab has its own icon and colour (My time blue, Team violet, Sales engineers amber, Leave
   teal) and the open one is filled with it; the period's open choice is filled blue; the arrows are round and nudge the
   way they go; the date is one field with its icon; Report shines and its arrow drops. The open tab and period pop in
   only when what is shown changed (.tl-anim), never on the minute's quiet reload. His tokens only; the motion reuses
   the Projects bar's (wsj-shine, wsj-tick) and the board's (bdb-drop). */
.tl-head{gap:10px 12px}
.tl-head .seg button{height:32px;padding:0 13px;font-size:12.5px;font-weight:600;
  transition:background-color .2s var(--e),color .2s var(--e),box-shadow .2s var(--e)}
.tl-head .tl-tabs button{--ac:var(--brand);--ac-soft:var(--brand-soft)}
.tl-head .tl-tabs [data-tltab="team"]{--ac:color-mix(in oklch,var(--brand) 60%,var(--red));--ac-soft:color-mix(in oklab,var(--brand-soft) 60%,var(--red-soft))}
.tl-head .tl-tabs [data-tltab="sales"]{--ac:var(--warn);--ac-soft:var(--warn-soft)}
.tl-head .tl-tabs [data-tltab="leave"]{--ac:color-mix(in oklch,var(--ok),var(--brand));--ac-soft:color-mix(in oklab,var(--ok-soft),var(--brand-soft))}
.tl-head .tl-tabs button .ic{color:var(--ac)}
.tl-head .tl-tabs button:hover:not([aria-selected="true"]){background:var(--ac-soft);color:var(--ac)}
.tl-head .tl-tabs button[aria-selected="true"]{background:var(--ac);color:var(--on-brand)}
.tl-head .tl-tabs button[aria-selected="true"] .ic{color:currentColor}
.tl-head .tl-per button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.tl-head .tl-per button:hover:not([aria-pressed="true"]){background:var(--brand-soft);color:var(--brand-ink)}
.tl-head .pp-nav{gap:8px}
.tl-head .pp-nav .btn{width:32px;height:32px;padding:0;justify-content:center;border-radius:50%;font-size:18px;font-weight:700;color:var(--brand)}
.tl-head .pp-nav .btn:hover:not([disabled]){background:var(--brand-soft);border-color:var(--brand)}
.tl-head .pp-nav .btn[disabled]{opacity:.35;cursor:default}
.tl-head .pp-nav b{font-size:15px;font-weight:700}
.tl-head [data-tlnow]{height:32px;color:var(--brand);font-weight:600}
.tl-head [data-tlnow]:hover{background:var(--brand-soft);border-color:var(--brand)}
.tl-head .pp-date{height:32px;padding:0 2px 0 10px;border:1px solid var(--rule);border-radius:var(--rc);background:var(--surface);color:var(--brand);
  transition:border-color .2s var(--e),box-shadow .2s var(--e)}
.tl-head .pp-date:hover{border-color:var(--brand)}
.tl-head .pp-date:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.tl-head .pp-date .inp{height:30px;border:0;background:transparent;box-shadow:none;padding-block:0}
.tl-head .tl-rep summary.btn,.tl-head .tl-repb{position:relative;overflow:hidden;isolation:isolate;height:32px;padding:0 14px;font-weight:600}
.tl-head .tl-rep summary.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)}   /* the bell's own shine */
@media (prefers-reduced-motion: no-preference){
  .tl-head .tl-tabs [data-tltab="mine"]:hover .ic{animation:wsj-tick .7s var(--e)}
  .tl-head .tl-tabs [data-tltab="team"]:hover .ic{animation:tlh-hop .55s var(--e)}
  .tl-head .tl-tabs [data-tltab="sales"]:hover .ic{animation:tlh-flip .7s var(--e)}
  .tl-head .tl-tabs [data-tltab="leave"]:hover .ic{animation:tlh-spin .8s var(--e)}
  .tl-head .pp-nav [data-tlstep="-1"]:hover:not([disabled]){animation:tlh-left .5s var(--e)}
  .tl-head .pp-nav [data-tlstep="1"]:hover:not([disabled]){animation:tlh-right .5s var(--e)}
  .tl-head .tl-rep summary.btn:is(:hover,:focus-visible)::after{animation:wsj-shine .8s var(--e)}
  .tl-head :is(.tl-rep summary.btn,.tl-repb):is(:hover,:focus-visible) .ic{animation:bdb-drop .7s var(--e)}
  .tl-anim~.tl-head .tl-tabs [aria-selected="true"],.tl-anim~.tl-head .tl-per [aria-pressed="true"]{animation:tlh-pop .5s var(--e) backwards}
}
@keyframes tlh-hop{40%{transform:translateY(-3px) scale(1.12)}}
@keyframes tlh-flip{50%{transform:rotateY(180deg) scale(1.08)}}
@keyframes tlh-spin{to{transform:rotate(90deg)}}
@keyframes tlh-left{40%{transform:translateX(-3px)}}
@keyframes tlh-right{40%{transform:translateX(3px)}}
@keyframes tlh-pop{0%{transform:scale(.88);opacity:.5}60%{transform:scale(1.04)}}
/* a phone: a tab that is not open shows its coloured icon only, so the row fits */
@media (max-width:480px){
  .tl-head .tl-tabs button:not([aria-selected="true"]) span{display:none}
  .tl-head .tl-tabs button:not([aria-selected="true"]){padding:0 11px}
}
/* ⭐ THE KINDS OF WORK IN CATEGORIES (owner 2026-10-04: «كاتيجورايزيشن بحيث انه الواحد بيقدر يحطها ... وتكون الامور
   واضحه») - one row a category (Offer & price, Submittal & compliance, Drawings & details, Project, comments & specs,
   Meetings, calls & site, Support & other), its name on the left, its kinds as the same pills; a phone stacks them */
.tl-ap{display:grid;gap:8px}
.tl-apc{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 12px;align-items:start;padding-top:8px;border-top:1px dashed var(--rule)}
.tl-apc:first-child{border-top:0;padding-top:0}
.tl-apt{padding-top:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tl-apr{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
@media (max-width:600px){.tl-apc{grid-template-columns:minmax(0,1fr);gap:6px}.tl-apt{padding-top:0}}
/* ⭐ MY TIME BY DAY, WEEK AND MONTH (owner 2026-10-04: «ويكلي مانثلي وديلي ... ايام الاسبوع ... زي تيكتس ... خط انت قديش
   انجزت ... فور اور من اصل سيفن») - the week a ticket a day, the month a calendar; a picked day is ringed in brand; the
   line fills green when the day is filled, amber when short; his tokens only */
.tlm-kp{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tlm-kpi{display:inline-flex;align-items:baseline;gap:6px;padding:5px 11px;border-radius:999px;background:var(--surface-2);font-size:12.5px;color:var(--ink-2)}
.tlm-kpi b{font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.tlm-kpi.tls-full{background:var(--ok-soft)}.tlm-kpi.tls-full b{color:var(--ok)}
.tlm-kpi.tls-short{background:var(--warn-soft)}.tlm-kpi.tls-short b{color:var(--warn)}
.tlm-kpi.tls-empty{background:var(--red-soft)}.tlm-kpi.tls-empty b{color:var(--red-ink)}
.tlm-kpi.tls-leave{background:var(--brand-soft)}.tlm-kpi.tls-leave b{color:var(--brand-ink)}
.tlm-bar{display:block;width:100%;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.tlm-bar i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .4s var(--e)}
.tls-full>.tlm-bar i,.tls-ok>.tlm-bar i{background:var(--ok)}
.tls-short>.tlm-bar i{background:var(--warn)}
/* the week: a ticket a day */
.tlm-tks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.tlm-tk{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 12px 10px;border:1px solid var(--rule);border-top:4px solid var(--rule-2,var(--rule));border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.tlm-tk:hover:not(.fut),.tlm-tk:focus-visible{border-color:var(--brand);box-shadow:var(--lift);transform:translateY(-2px);outline:0}
.tlm-tk.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset,var(--lift)}
.tlm-tk.fut{cursor:default;opacity:.55;background:var(--surface-2)}
.tlm-tk.tls-full,.tlm-tk.tls-ok{border-top-color:var(--ok)}
.tlm-tk.tls-short{border-top-color:var(--warn)}
.tlm-tk.tls-empty{border-top-color:var(--red)}
.tlm-tk.tls-open{border-top-color:var(--brand)}
.tlm-tk.tls-leave{border-top-color:var(--brand-ink)}
.tlm-tk.tls-off,.tlm-tk.tls-extra{background:var(--surface-2)}
.tlm-tkh{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.tlm-tkd{display:flex;flex-direction:column;line-height:1.2}
.tlm-tkd b{font-size:14px}
.tlm-tkd small{font-size:11.5px;color:var(--ink-3)}
.tlm-st{flex:0 0 auto;padding:2px 7px;border-radius:999px;font-size:10.5px;font-style:normal;font-weight:650;background:var(--surface-2);color:var(--ink-2)}
.tls-full .tlm-st,.tls-ok .tlm-st{background:var(--ok-soft);color:var(--ok)}
.tls-short .tlm-st{background:var(--warn-soft);color:var(--warn)}
.tls-empty .tlm-st{background:var(--red-soft);color:var(--red-ink)}
.tls-open .tlm-st,.tls-leave .tlm-st{background:var(--brand-soft);color:var(--brand-ink)}
.tlm-tkn{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.tlm-tkn b{font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tlm-tkn small{font-size:12px;color:var(--ink-3)}
.tlm-ls{display:flex;flex-direction:column;gap:6px;margin:2px 0 0;padding:8px 0 0;border-top:1px dashed var(--rule);list-style:none}
.tlm-ls li{display:flex;align-items:flex-start;gap:6px;min-width:0;font-size:12px}
.tlm-ls .tl-dot{flex:0 0 8px;width:8px;height:8px;margin-top:4px}
.tlm-ls span{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:0 4px;min-width:0;overflow-wrap:anywhere}
.tlm-ls span small{flex:1 0 100%;color:var(--ink-3)}
.tlm-ls em{flex:0 0 auto;font-style:normal;font-weight:650;font-variant-numeric:tabular-nums}
.tlm-ls .tlm-more{color:var(--brand-ink);font-weight:600}
.tlm-none{margin:2px 0 0;padding-top:8px;border-top:1px dashed var(--rule);font-size:12px;color:var(--ink-3)}
.tlm-log{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:auto;padding:6px 8px;border:1px dashed var(--brand);border-radius:8px;background:transparent;color:var(--brand-ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.tlm-log .ic{width:13px;height:13px}
.tlm-log:hover,.tlm-log:focus-visible{background:var(--brand);border-style:solid;color:var(--on-brand)}
/* the month: a calendar, Saturday first */
.tlm-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.tlm-mh{padding:0 4px 2px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tlm-mc{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:68px;padding:7px 8px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tlm-mc.nil{border:0;background:transparent;cursor:default}
.tlm-mc[aria-disabled]{cursor:default;opacity:.5;background:var(--surface-2)}
.tlm-mc:hover:not(.nil):not([aria-disabled]),.tlm-mc:focus-visible{border-color:var(--brand);outline:0}
.tlm-mc.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}
.tlm-mc.now .tlm-md{background:var(--brand);color:var(--on-brand)}
.tlm-md{align-self:flex-start;min-width:22px;padding:1px 5px;border-radius:6px;font-size:12px;font-weight:700;text-align:center;color:var(--ink-2)}
.tlm-mc b{font-size:13px;font-variant-numeric:tabular-nums;min-height:1.2em}
.tlm-mc .tlm-bar{margin-top:auto}
.tlm-mc.tls-empty{border-color:color-mix(in srgb,var(--red) 45%,var(--rule))}
.tlm-mc.tls-empty b{color:var(--red-ink)}
.tlm-mc.tls-off,.tlm-mc.tls-extra{background:var(--surface-2)}
.tlm-mc.tls-leave{background:var(--brand-soft)}
.tlm-mp .tl-keys{margin-bottom:0}
/* the form: the day it logs on, the project or a sales engineer */
.tlm-fh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin-bottom:10px}
.tlm-fh .tl-h4{margin:0}
.tlm-fhd{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.tlm-fhd b{color:var(--ink);font-variant-numeric:tabular-nums}
.tlm-fhd .tlm-bar{width:110px}
.tlm-f2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px;align-items:start}
.tlm-fwv{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 2px;font-size:13px;font-weight:600;color:var(--ink-2)}
.tlm-fwv .ic{width:15px;height:15px;color:var(--warn)}
.tl-add.tlm-ed{grid-template-columns:minmax(0,2fr) minmax(92px,.7fr) minmax(0,2.2fr) minmax(0,1.4fr)}
.tlm-ed .tlm-efa,.tlm-ed .tl-eb{grid-column:1/-1}
.tlm-ed .tl-eb{justify-self:end}
.tl-lfr .fld small,.tl-f .fld small{font-weight:400;text-transform:none;letter-spacing:0}
@media (max-width:1180px){.tlm-tks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){
  .tlm-tks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tlm-f2,.tl-add.tlm-ed{grid-template-columns:minmax(0,1fr)}
  .tlm-cal{gap:3px}
  .tlm-mc{min-height:52px;padding:5px 4px;border-radius:8px}
  .tlm-mc b{font-size:11px}
  .tlm-mh{padding:0 2px;font-size:10px;letter-spacing:0;text-align:center}
}
@media (max-width:380px){.tlm-tk{padding:10px 9px 8px}.tlm-tkn b{font-size:17px}}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~* .tlm-tk,.tl-anim~* .tlm-mc:not(.nil){animation:tl-rise .4s var(--e) backwards;animation-delay:calc(var(--i,0) * 35ms)}
  .tl-anim~* .tlm-bar i{transform-origin:left center;animation:tl-grow .7s var(--e) .25s backwards}
}
@media (prefers-reduced-motion:reduce){.tlm-tk,.tlm-bar i{transition:none}.tlm-tk:hover:not(.fut){transform:none}}
/* ⭐ THE TIME LOG'S OWN DROP LIST (owner 2026-10-04: «مش مرتبه ولا ملونه ولا فيها انيميشن») - the button reads like the
   picked row; the list opens under it in the form's flow (nothing clips it, a phone too), groups headed, codes in brand
   chips, the sales engineer with his amber mark, a used-up week in red, the picked row ringed with a check */
.tldd{position:relative;min-width:0}
.tldd-b{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:6px 36px 6px 10px;text-align:start;cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
.tldd-b:hover{border-color:var(--brand)}
.tldd.open .tldd-b{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.tldd-ch{position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s var(--e),margin .2s}
.tldd.open .tldd-ch{transform:rotate(225deg);margin-top:-2px;border-color:var(--brand)}
.tldd-b .tldd-x,.tldd-b .tldd-u{display:none}
.tldd-c{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:2px 7px;border-radius:6px;background:var(--brand-soft);color:var(--brand-ink);font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tldd-c.gen{min-width:0;padding:3px;background:var(--surface-2);color:var(--ink-2)}
.tldd-c .ic{width:14px;height:14px}
.tldd-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.tldd-s{flex:0 1 auto;display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:var(--ink-2)}
.tldd-s .ic{flex:0 0 13px;width:13px;height:13px;color:var(--warn)}
.tldd-s.on{flex:0 0 auto}
.tldd-x{flex:0 0 auto;font-size:11.5px;color:var(--ink-3)}
.tldd-u{flex:0 0 auto;padding:1px 7px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-size:10.5px;font-weight:700}
.tldd-p{margin-top:6px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);box-shadow:var(--lift-2,var(--lift));overflow:hidden;transform-origin:top center}
.tldd-sh{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.tldd-sh .ic{flex:0 0 15px;width:15px;height:15px;color:var(--ink-3)}
.tldd-q{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;outline:0}
.tldd-l{max-height:320px;overflow-y:auto;padding:6px;overscroll-behavior:contain}
.tldd-g+.tldd-g{margin-top:4px;padding-top:4px;border-top:1px dashed var(--rule)}
.tldd-gl{display:flex;align-items:center;gap:6px;padding:6px 8px 4px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.tldd-gl.mine{color:var(--brand-ink)}
.tldd-gl small{padding:0 6px;border-radius:999px;background:var(--surface-2);font-size:10px;letter-spacing:0;color:var(--ink-3)}
.tldd-i{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:6px 30px 6px 8px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:13px;text-align:start;cursor:pointer;transition:background .12s,transform .12s}
.tldd-i:hover,.tldd-i:focus-visible{background:var(--brand-soft);outline:0}
.tldd-i:hover .tldd-c,.tldd-i:focus-visible .tldd-c{background:var(--brand);color:var(--on-brand)}
.tldd-i[aria-selected="true"]{background:color-mix(in srgb,var(--brand) 10%,transparent);box-shadow:inset 3px 0 0 var(--brand)}
.tldd-ok{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--brand);font-weight:800}
.tldd-i.gen .tldd-n{font-weight:650}
.tldd-no{margin:6px 8px 8px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:600px){.tldd-l{max-height:55vh}.tldd-x{display:none}.tldd-i{flex-wrap:wrap;row-gap:2px}.tldd-i .tldd-s{flex:1 0 100%;max-width:none;padding-inline-start:62px;white-space:normal}.tldd-i .tldd-s.on{flex:0 0 auto;padding:0}.tldd-b .tldd-s{display:none}}
@media (prefers-reduced-motion:no-preference){
  .tldd-p{animation:tldd-open .24s var(--e) backwards}
  .tldd-i{animation:tldd-in .28s var(--e) backwards;animation-delay:calc(var(--i,0) * 18ms + 40ms)}
  .tldd-i:active{transform:scale(.985)}
}
@keyframes tldd-open{from{opacity:0;transform:translateY(-6px) scaleY(.94)}to{opacity:1;transform:none}}
@keyframes tldd-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
/* ⭐ THE DASHBOARDS AS TICKETS (owner 2026-10-04: «عجبتني التكيتات ... سوي زيها لل my team ... وزبط الداش بورد كامل») -
   My team: a ticket an engineer (.tlt-*, on My time's .tlm-tk); the sales board's cards take the same look: the state
   on top as a coloured edge and a chip, his days as little bars, his last work. His tokens only. */
.tlm-tk.tls-idle{border-top-color:var(--rule)}
.tlm-tk.tls-admin{border-top-color:var(--brand-ink)}
.tls-idle .tlm-st,.tlm-st.tls-idle{background:var(--surface-2);color:var(--ink-3)}
.tlm-st.tls-full{background:var(--ok-soft);color:var(--ok)}
.tlm-st.tls-short{background:var(--warn-soft);color:var(--warn)}
.tlm-st.tls-empty{background:var(--red-soft);color:var(--red-ink)}
.tlm-kpi.tls-open{background:var(--brand-soft)}.tlm-kpi.tls-open b{color:var(--brand-ink)}
.tlt-tks{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
button.tlt-tk{font:inherit;text-align:start;width:100%}
.tlt-tk>span{display:flex}
.tlt-who{display:flex;align-items:center;gap:8px;min-width:0}
.tlt-who .bd-av{width:32px;height:32px;flex:0 0 32px;font-size:11px}
.tlt-who .tlm-tkd{min-width:0}
.tlt-who .tlm-tkd b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlt-ds{display:flex;flex-wrap:wrap;gap:4px}
.tlt-d{display:block;width:18px;height:10px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--rule)}
.tlt-ds.mo .tlt-d{width:9px;height:9px;border-radius:2px}
.tlt-d.tls-full{background:var(--ok)}
.tlt-d.tls-ok{background:color-mix(in srgb,var(--ok) 55%,var(--surface-2))}
.tlt-d.tls-short{background:var(--warn)}
.tlt-d.tls-empty{background:var(--red)}
.tlt-d.tls-open{background:var(--brand)}
.tlt-d.tls-leave{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.tlt-d.tls-future,.tlt-d.tls-before,.tlt-d.tls-noacct{background:repeating-linear-gradient(135deg,var(--surface-2) 0 3px,transparent 3px 6px)}
.tlt-ps{display:flex;flex-wrap:wrap;gap:5px;padding-top:8px;border-top:1px dashed var(--rule)}
.tlt-p{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:999px;background:var(--surface-2);font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tlt-p b{color:var(--brand-ink);font-weight:700}
.tlt-for{align-items:center;gap:5px;min-width:0;font-size:12px;color:var(--ink-2)}
.tlt-for .ic{flex:0 0 13px;width:13px;height:13px;color:var(--warn)}
.tlt-go{margin-top:auto;justify-content:flex-end;font-size:12px;font-weight:650;color:var(--brand-ink);opacity:.75;transition:opacity .15s,transform .15s}
.tlt-tk:hover .tlt-go,.tlt-tk:focus-visible .tlt-go{opacity:1;transform:translateX(3px)}
.tlt-wait{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;font-size:12.5px;color:var(--ink-3)}
.tlt-wait .ic{width:14px;height:14px}
.tlh-sum .tlm-kp{margin-top:14px}
/* the sales board: its cards as tickets */
.tl-bc{padding:12px 12px 10px;border-top:4px solid var(--ok)}
.tl-bc::before{display:none}
.tl-bc.tls-near{border-top-color:var(--warn)}
.tl-bc.tls-used{border-top-color:var(--red)}
.tl-bc.idle{border-top-color:var(--rule)}
.tl-bch{justify-content:flex-start}
.tl-bch .tlm-st{margin-inline-start:auto;align-self:flex-start}
.tl-bc.tls-used .tl-bcn small,.tl-bc.tls-near .tl-bcn small{color:var(--ink-3);font-weight:400}
.tl-bc.tls-near .tl-rb i{background:var(--warn)}
.tl-bc.tls-used .tl-rb i{background:var(--red)}
.tlb-ds{display:flex;align-items:flex-end;gap:3px;height:28px;padding:2px 0}
.tlb-ds i{flex:1 1 0;min-width:4px;height:100%;border-radius:3px;background:linear-gradient(to top,var(--brand) var(--h,0%),var(--surface-2) var(--h,0%));transform-origin:bottom}
.tl-bc.tls-near .tlb-ds i{background:linear-gradient(to top,var(--warn) var(--h,0%),var(--surface-2) var(--h,0%))}
.tl-bc.tls-used .tlb-ds i{background:linear-gradient(to top,var(--red) var(--h,0%),var(--surface-2) var(--h,0%))}
.tlb-ds i.now{box-shadow:0 0 0 1px var(--brand-ink)}
.tlb-ls{display:flex;flex-direction:column;gap:4px;padding-top:7px;border-top:1px dashed var(--rule)}
.tlb-ls>span{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px}
.tlb-ls .tl-dot{flex:0 0 8px;width:8px;height:8px;margin:0}
.tlb-ls b{flex:0 0 auto;font-weight:700;color:var(--brand-ink)}
.tlb-ls small{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3)}
.tlb-ls em{flex:0 0 auto;font-style:normal;font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:720px){.tlt-tks{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~* .tlt-tk{animation:tl-rise .4s var(--e) backwards;animation-delay:calc(var(--i,0) * 45ms)}
  .tl-anim~* .tlt-d{animation:tl-fade .3s var(--e) backwards;animation-delay:.3s}
  .tl-anim~.tl-lanes .tlb-ds i{animation:tl-up .6s var(--e) .4s backwards}
}
/* ⭐ LEAVE, ASKED FOR AND ANSWERED + THE LEAVE CALENDAR (owner 2026-10-04: «يقدموا الليف ... سيك ليف بيزنس ليف ... سنوية او
   مغادرة بالساعات», «بدي تعمل كالندر فيها يبين كل التفاصيل») - the kinds as cards in their colours, the state of each
   request as a chip, a month calendar (waiting = dashed chips), a day opens every detail. His tokens only. */
.k-business.tl-lvc,.k-business .tl-lvk,.tlv-k.k-business .tlv-ki{background:color-mix(in srgb,var(--brand) 18%,var(--surface));color:var(--brand-ink)}
.k-departure.tl-lvc,.k-departure .tl-lvk,.tlv-k.k-departure .tlv-ki{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn)}
.tlv-k.k-annual .tlv-ki{background:var(--brand-soft);color:var(--brand-ink)}
.tlv-k.k-sick .tlv-ki{background:var(--red-soft);color:var(--red-ink)}
.tlv-k.k-emergency .tlv-ki{background:var(--warn-soft);color:var(--warn)}
.tlv-k.k-holiday .tlv-ki{background:var(--ok-soft);color:var(--ok)}
.tlv-k.k-unpaid .tlv-ki,.tlv-k.k-other .tlv-ki{background:var(--surface-3);color:var(--ink-2)}
.tl-lvk{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.tl-lvk .ic{width:13px;height:13px;flex:0 0 13px}
.tlv-ks{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin-bottom:14px}
.tlv-k{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.tlv-ki{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px}
.tlv-ki .ic{width:17px;height:17px}
.tlv-k b{font-size:13.5px;font-weight:650}
.tlv-k small{font-size:11.5px;line-height:1.3;color:var(--ink-3)}
.tlv-k:hover,.tlv-k:focus-visible{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--lift);outline:0}
.tlv-k[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset,var(--lift)}
.tlv-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.tlv-f .tl-fn{grid-column:1/-1}
.tlv-f .tlv-hq{grid-column:span 2}
.tlv-fp .tl-lff{margin-top:12px}
.tlv-st{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700;vertical-align:1px}
.tlv-st.s-pending{background:var(--warn-soft);color:var(--warn)}
.tlv-st.s-approved{background:var(--ok-soft);color:var(--ok)}
.tlv-st.s-rejected{background:var(--red-soft);color:var(--red-ink)}
.tl-lvi.s-rejected .tl-lm b,.tl-lvi.s-rejected .tl-lvk{opacity:.6}
.tl-lvi.s-rejected .tl-lm>b{text-decoration:line-through;text-decoration-color:var(--red)}
.tl-lvi.s-rejected .tl-lm>b .tlv-st{display:inline-block;text-decoration:none}
.tlv-why{display:flex;align-items:center;gap:5px;color:var(--red-ink)}
.tlv-why .ic{width:13px;height:13px}
.tl-lvi .tl-la{flex-wrap:wrap;justify-content:flex-end;gap:4px}
.tlv-ok{background:var(--ok);border-color:var(--ok);color:var(--on-brand)}
.tlv-ok .ic{width:13px;height:13px}
.tlv-no{color:var(--red-ink)}
.tlv-rj{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.tlv-rj .inp{width:220px;max-width:100%;min-height:30px}
.tlv-wp{border-color:color-mix(in srgb,var(--warn) 45%,var(--rule));box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 25%,transparent) inset}
.tlv-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--warn);color:var(--on-brand);font-size:11px;font-weight:700}
/* the calendar */
.tlv-ch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.tlv-ch .tl-h4{margin:0;flex:1 1 260px}
.tlv-c{min-height:86px}
.tlv-c.has{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.tlv-cs{display:flex;flex-direction:column;gap:3px;min-width:0}
.tlv-cs .tl-lvc{display:block;padding:1px 6px;font-size:11px}
.tl-lvc.pend{background:transparent;box-shadow:inset 0 0 0 1px currentColor;border-style:dashed}
.tl-lvc.pend:not([class*="k-"]){color:var(--warn)}
.tlv-more{font-size:11px;font-weight:700;color:var(--brand-ink)}
.tlv-key{display:inline-block;width:14px;height:10px;padding:0;border-radius:3px}
.tlv-day{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule)}
@media (max-width:720px){
  .tlv-ks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tlv-k{grid-template-columns:28px minmax(0,1fr);padding:8px 9px}
  .tlv-ki{width:28px;height:28px}
  .tlv-k small{display:none}
  .tlv-f .tlv-hq{grid-column:1/-1}
  .tlv-c{min-height:56px}
  .tlv-cs .tl-lvc{padding:0 3px;font-size:9.5px}
  .tlv-rj .inp{width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~* .tlv-k{animation:tl-rise .35s var(--e) backwards}
  .tl-anim~* .tlv-c{animation:tl-fade .3s var(--e) backwards;animation-delay:calc(var(--i,0) * 12ms)}
  .tlv-day{animation:tl-rise .3s var(--e) backwards}
}
/* each kind of leave its own clear colour (measured too faint on the dark theme, 2026-10-04): a stripe and a tint */
.k-annual{--k:var(--brand)}.k-sick{--k:var(--red)}.k-business{--k:color-mix(in srgb,var(--brand) 45%,var(--ok))}.k-departure{--k:var(--warn)}
.k-emergency{--k:color-mix(in srgb,var(--warn) 50%,var(--red))}.k-holiday{--k:var(--ok)}.k-unpaid,.k-other{--k:var(--ink-3)}
.tlv-cs .tl-lvc{background:color-mix(in srgb,var(--k,var(--brand)) 24%,var(--surface));color:var(--ink);box-shadow:inset 3px 0 0 var(--k,var(--brand))}
.tlv-cs .tl-lvc.pend{background:color-mix(in srgb,var(--k,var(--warn)) 8%,transparent);outline:1px dashed var(--k,var(--warn));outline-offset:-1px}
.tl-lvc.tlv-key{background:var(--k,var(--brand));box-shadow:none}
.tl-lvc.tlv-key.pend{background:transparent;outline:1px dashed var(--warn);outline-offset:-1px;box-shadow:none}
.tl-lvi .tl-lvk{min-width:150px;box-shadow:inset 3px 0 0 var(--k,var(--brand))}
@media (max-width:720px){.tl-lvi .tl-lvk{min-width:0}}
/* Jordan's public holidays on the leave calendar, the new kinds, the month in words (owner 2026-10-04 17:35) */
.k-personal{--k:color-mix(in srgb,var(--brand) 40%,var(--red))}.k-paternity{--k:color-mix(in srgb,var(--ok) 60%,var(--brand))}
.k-personal.tl-lvc,.k-personal .tl-lvk,.tlv-k.k-personal .tlv-ki,.k-paternity.tl-lvc,.k-paternity .tl-lvk,.tlv-k.k-paternity .tlv-ki{background:color-mix(in srgb,var(--k) 20%,var(--surface));color:var(--ink)}
.tlv-hol{display:flex;align-items:center;gap:4px;min-width:0;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok);font-size:10.5px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tlv-hol .ic{flex:0 0 11px;width:11px;height:11px}
.tlv-hol.on{background:var(--ok);color:var(--on-brand)}
.tlv-c:has(.tlv-hol){background:color-mix(in srgb,var(--ok) 6%,var(--surface))}
.tlv-key.tlv-holk{background:var(--ok)}
.tlv-say{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule)}
.tlv-says{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.tlv-says li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:10px;background:var(--surface-2);font-size:13px;color:var(--ink-2)}
.tlv-says li>span:nth-child(2){flex:1 1 260px;min-width:0}
.tlv-says li b{color:var(--ink);font-weight:650}
.tlv-says .tl-lvc{min-width:78px;text-align:center;box-shadow:inset 3px 0 0 var(--k,var(--brand));background:color-mix(in srgb,var(--k,var(--brand)) 22%,var(--surface));color:var(--ink)}
.tlv-says .tl-lvc.pend{background:transparent;outline:1px dashed var(--k,var(--warn));outline-offset:-1px}
.tlv-says .tlv-hol{min-width:78px;justify-content:center}
.tlv-says li.s-rejected{opacity:.6}
.tlv-says li.s-rejected>span:nth-child(2){text-decoration:line-through}
.tlv-says .tlv-st{margin:0}
@media (max-width:720px){.tlv-hol{font-size:9px;padding:1px 3px}.tlv-hol .ic{display:none}}
.tl-lvc.tlv-key.tlv-key{background:var(--k,var(--brand));box-shadow:none}
.tl-lvc.tlv-key.tlv-key.pend{background:transparent;outline:1px dashed var(--warn);outline-offset:-1px}
/* ⭐ THE WORK CALENDAR (owner 2026-10-04: «هذا غايب هذا داوم هذا اللي اشتغله», «بلشي») - Daily tickets (.tlw-tk on
   .tlm-tk), the Weekly grid (.tlw-g: an engineer a row), the Monthly calendar (.tlw-mc); a day's word in colour:
   in green, part leave teal, away brand, nothing logged red, not in yet amber. His tokens only. */
.tl-head .tl-tabs [data-tltab="cal"]{--ac:color-mix(in oklch,var(--brand) 55%,var(--ok));--ac-soft:color-mix(in oklab,var(--brand-soft) 55%,var(--ok-soft))}
.tlw-tk.w-in,.tlw-tk.w-part{border-top-color:var(--ok)}
.tlw-tk.w-away{border-top-color:var(--brand)}
.tlw-tk.w-nothing{border-top-color:var(--red)}
.tlw-tk.w-open{border-top-color:var(--warn)}
.tlw-tk.w-off,.tlw-tk.w-holiday,.tlw-tk.w-ahead{border-top-color:var(--rule);background:var(--surface-2)}
.tlw-tk{cursor:default}
.tlw-tk:hover{transform:none}
.tlw-tk>span{display:flex}
.tlw-st.w-in,.tlw-st.w-part{background:var(--ok-soft);color:var(--ok)}
.tlw-st.w-away{background:var(--brand-soft);color:var(--brand-ink)}
.tlw-st.w-nothing{background:var(--red-soft);color:var(--red-ink)}
.tlw-st.w-open{background:var(--warn-soft);color:var(--warn)}
.tlw-tk.w-nothing>.tlm-bar i{background:var(--red)}
.tlw-tk.w-in>.tlm-bar i,.tlw-tk.w-part>.tlm-bar i{background:var(--ok)}
.tlw-aw{flex-wrap:wrap;gap:4px}
.tlw-aw .tl-lvc{display:inline-flex;align-items:center;gap:4px;white-space:normal;box-shadow:inset 3px 0 0 var(--k,var(--brand));background:color-mix(in srgb,var(--k,var(--brand)) 20%,var(--surface));color:var(--ink)}
.tlw-aw .tl-lvc .ic{width:12px;height:12px}
.tlw-aw .tl-lvc.pend{background:transparent;outline:1px dashed var(--k,var(--warn));outline-offset:-1px}
.tlw-seen{align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.tlw-seen .ic{flex:0 0 13px;width:13px;height:13px;color:var(--ok)}
.tlw-seen b{font-variant-numeric:tabular-nums;color:var(--ink)}
.tlw-seen.none{color:var(--ink-3)}.tlw-seen.none .ic{color:var(--ink-3)}
.tlw-jobs,.tlw-dues{flex-wrap:wrap;gap:4px}
.tlw-job{padding:2px 7px;border-radius:999px;background:var(--surface-2);font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tlw-job.s-done{background:var(--ok-soft);color:var(--ok)}
.tlw-job.s-failed{background:var(--red-soft);color:var(--red-ink)}
.tlw-job.s-running,.tlw-job.s-queued{background:var(--brand-soft);color:var(--brand-ink)}
.tlw-due{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:7px;background:var(--warn-soft);color:var(--ink);font-size:11.5px}
.tlw-due .ic{width:12px;height:12px;color:var(--warn)}
.tlw-due.t-late,.tlw-due.t-overdue{background:var(--red-soft)}
.tlw-due.t-late .ic,.tlw-due.t-overdue .ic{color:var(--red)}
.tlw-due.t-done{background:var(--ok-soft)}
.tlw-plan{align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3)}
.tlw-plan .ic{width:12px;height:12px}
.tlw-holb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--ok) 12%,var(--surface));color:var(--ink-2);font-size:13px}
.tlw-holb .ic{width:15px;height:15px;color:var(--ok)}
.tlw-holb b{color:var(--ok)}
.tlw-tks{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tlw-pri{flex:0 0 auto;min-width:86px;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:700;text-align:center}
.tlw-pri.p-urgent{background:var(--red-soft);color:var(--red-ink)}
.tlw-pri.p-important{background:var(--warn-soft);color:var(--warn)}
.tlw-pri.p-low{color:var(--ink-3)}
/* the week: an engineer a row, a day a column */
.tlw-g{display:grid;grid-template-columns:190px repeat(var(--n),minmax(104px,1fr));gap:6px;min-width:calc(190px + var(--n) * 110px);align-items:stretch}
.tlw-corner{display:block}
.tlw-hd{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s}
.tlw-hd:hover,.tlw-hd:focus-visible{border-color:var(--brand);outline:0}
.tlw-hd.now{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.tlw-hd.off{opacity:.65}
.tlw-hd b{font-size:12.5px}
.tlw-hd small,.tlw-hds{font-size:11px;color:var(--ink-3)}
.tlw-hd .tlv-hol{max-width:100%}
.tlw-hdd{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:650;color:var(--warn)}
.tlw-hdd .ic{width:11px;height:11px}
.tlw-who{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 2px}
.tlw-who .bd-av{width:28px;height:28px;flex:0 0 28px;font-size:10px}
.tlw-who>span{display:flex;flex-direction:column;min-width:0}
.tlw-who b{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.tlw-who small{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tlw-c{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;min-height:74px;padding:6px 7px;border:1px solid var(--rule);border-top:3px solid var(--rule);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tlw-c:disabled{cursor:default}
.tlw-c:hover:not(:disabled),.tlw-c:focus-visible{border-color:var(--brand);outline:0}
.tlw-c.on{box-shadow:0 0 0 2px var(--brand) inset}
.tlw-c.w-in,.tlw-c.w-part{border-top-color:var(--ok)}
.tlw-c.w-away{border-top-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.tlw-c.w-nothing{border-top-color:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--surface))}
.tlw-c.w-open{border-top-color:var(--warn)}
.tlw-c.w-off,.tlw-c.w-holiday,.tlw-c.w-ahead{background:var(--surface-2)}
.tlw-cv{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.tlw-c.w-nothing .tlw-cv{color:var(--red-ink);font-size:11.5px}
.tlw-c.w-off .tlw-cv,.tlw-c.w-holiday .tlw-cv{color:var(--ink-3);font-size:11.5px;font-weight:600}
.tlw-cs{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tlw-c .tl-lvc{max-width:100%;padding:1px 6px;font-size:10.5px;box-shadow:inset 3px 0 0 var(--k,var(--brand));background:color-mix(in srgb,var(--k,var(--brand)) 22%,var(--surface));color:var(--ink)}
.tlw-c .tl-lvc.pend{background:transparent;outline:1px dashed var(--k,var(--warn));outline-offset:-1px}
.tlw-ch{display:inline-flex;align-items:center;gap:4px;max-width:100%;overflow:hidden;font-size:11px;font-weight:650;color:var(--brand-ink);white-space:nowrap;text-overflow:ellipsis}
.tlw-ch .tl-dot{flex:0 0 7px;width:7px;height:7px;margin:0}
.tlw-more{font-size:10.5px;color:var(--ink-3)}
.tlw-cd{display:inline-flex;align-items:center;gap:3px;margin-top:auto;font-size:10.5px;font-weight:700;color:var(--warn)}
.tlw-cd .ic{width:11px;height:11px}
.tlw-k.w-in{background:var(--ok)}.tlw-k.w-part{background:color-mix(in srgb,var(--ok) 50%,var(--brand))}.tlw-k.w-away{background:var(--brand)}
.tlw-k.w-nothing{background:var(--red)}.tlw-k.w-open{background:var(--warn)}
.tlw-selp .tlw-tk{max-width:560px}
.tlw-selh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px}
.tlw-selh .tl-h4{flex:1 1 240px;margin:0}
/* the month */
.tlw-mc{min-height:92px}
.tlw-mt{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.tlw-mt b{font-size:12.5px}
.tlw-mt small{font-size:10.5px;color:var(--ink-3)}
@media (max-width:720px){
  .tlw-tks{grid-template-columns:minmax(0,1fr)}
  .tlw-g{grid-template-columns:130px repeat(var(--n),minmax(86px,1fr));min-width:calc(130px + var(--n) * 90px)}
  .tlw-mc{min-height:58px}
  .tlw-mt small,.tlw-mc .tlw-cd{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~* .tlw-tk{animation:tl-rise .4s var(--e) backwards;animation-delay:calc(var(--i,0) * 40ms)}
  .tl-anim~* .tlw-c,.tl-anim~* .tlw-hd{animation:tl-fade .35s var(--e) backwards}
  .tl-anim~* .tlw-mc:not(.nil){animation:tl-fade .3s var(--e) backwards;animation-delay:calc(var(--i,0) * 12ms)}
  .tlw-selp{animation:tl-rise .3s var(--e) backwards}
}
.tlw-cv.nohrs{font-size:11px;color:var(--red-ink)}
.tlw-tk.w-in .tlm-none{color:var(--red-ink)}
.tlw-tk>.tlw-seen{display:block;line-height:1.45}
.tlw-seen .ic{vertical-align:-2px;margin-inline-end:5px}
.tlw-who,.tlw-corner{position:sticky;left:0;z-index:2;background:var(--surface)}
.tlw-corner{align-self:stretch}
.tlw-c.w-free,.tlw-tk.w-free{background:var(--surface-2)}
.tlw-tk.w-free{border-top-color:var(--rule)}
/* a day off for everyone by hand (owner 2026-10-04: «اليوبيل الفضي ... ثلج ... تأخير دوام ... مانيوال») - its kinds as
   pills under the cards; a late start / early finish (some hours) in amber wherever a day shows it */
.tlv-hps{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;padding:10px;border:1px dashed var(--rule);border-radius:12px;background:var(--surface-2)}
.tlv-hp{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--rule);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.tlv-hp b{font-size:13px}
.tlv-hp small{font-size:11.5px;color:var(--ink-3)}
.tlv-hp:hover,.tlv-hp:focus-visible{border-color:var(--ok);outline:0}
.tlv-hp[aria-pressed="true"]{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok) inset}
.tlv-hol.part{background:var(--warn-soft);color:var(--warn)}
.tlv-hol.on.part{background:var(--warn);color:var(--on-brand)}
.tlw-holb.part{background:var(--warn-soft)}
.tlw-holb.part b,.tlw-holb.part .ic{color:var(--warn)}
.tlw-tk.w-holiday{border-top-color:var(--ok)}
.tlw-st.w-holiday{background:var(--ok-soft);color:var(--ok)}
.tlw-c.w-holiday{border-top-color:var(--ok)}
/* ⭐ ONE ENGINEER IN A WINDOW (owner 2026-10-04, his picture of Diya's window) - the sales engineer's window (.tl-seo) with
   his projects as rows that open (.tl-enop), each day in full as the work calendar's tickets */
.tl-eno .tl-sd.w-nothing small{color:var(--red-ink);font-weight:700}
.tl-eno .tl-sd.w-away small{color:var(--brand-ink);font-weight:700}
.tl-eno .tl-sd.w-holiday small{color:var(--ok);font-weight:700}
.tl-enoc2{margin-bottom:6px}
.tl-enops{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.tl-enop{border:1px solid var(--rule);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.tl-enop.on{border-color:var(--brand);box-shadow:var(--lift)}
.tl-enop.nolog{border-style:dashed}
.tl-enoph{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:100%;padding:10px 38px 10px 12px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.tl-enoph:hover,.tl-enoph:focus-visible{background:var(--brand-soft);outline:0}
.tl-enopt{display:flex;flex:1 1 220px;flex-direction:column;min-width:0}
.tl-enopt b{overflow:hidden;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}
.tl-enopt small{font-size:11.5px;color:var(--ink-3)}
.tl-enopk{display:flex;flex-wrap:wrap;gap:4px}
.tl-enoa{padding:2px 8px;border-radius:999px;background:var(--surface-2);font-size:11px;color:var(--ink-2)}
.tl-enoa b{color:var(--ink);font-variant-numeric:tabular-nums}
.tl-enoa.r{background:var(--brand-soft);color:var(--brand-ink)}
.tl-enoph em{flex:0 0 auto;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.tl-enoph em.nolog{color:var(--warn);font-size:12px}
.tl-enop.on .tldd-ch{transform:rotate(225deg);margin-top:-2px;border-color:var(--brand)}
.tl-enob{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:4px 12px 12px;border-top:1px dashed var(--rule)}
.tl-enob .tl-lines{width:100%}
.tl-enoc{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:8px 0 0;font-size:12.5px;color:var(--ink-2)}
.tl-enoc .ic{width:14px;height:14px;color:var(--brand-ink)}
.tl-enost.t-late,.tl-enost.t-overdue{color:var(--red-ink);font-weight:700}
.tl-enost.t-on_track{color:var(--ok);font-weight:700}
.tl-enod{margin-bottom:14px}
.tlw-open{display:flex;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.tlw-open:hover b,.tlw-open:focus-visible b{color:var(--brand-ink);text-decoration:underline}
.tlw-who[data-tlwwho]{cursor:pointer}
.tlw-who[data-tlwwho]:hover b{color:var(--brand-ink);text-decoration:underline}
@media (prefers-reduced-motion:no-preference){.tl-enop.on .tl-enob{animation:tl-rise .25s var(--e) backwards}}
@media (max-width:600px){.tl-eno .tl-seot{display:flex;flex-wrap:wrap;max-width:100%}.tl-eno .tl-seot button{flex:1 1 auto}}
/* ⭐ THE WORK SUGGESTS ITS LINE (owner 2026-10-04: «بتصير تضوي ... سجستشن ... استيميشن ... معتدل») - "Your work, not logged
   yet" in My time, the estimate beside each time box, and the time log lighting up wherever work waits: the board's button
   and the project page's pill glow softly (his tokens; still when the motion is reduced) */
.tl-tlgp{border-color:color-mix(in srgb,var(--warn) 40%,var(--rule));box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 18%,transparent) inset}
.tl-tlg .tlp-sd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tl-tlgn{font-size:12.5px;color:var(--ink-2)}
.tl-tlgf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.tl-tlgk{display:inline-flex;align-items:center;gap:6px;min-width:150px;font-size:12.5px;font-weight:650}
.tl-tlgk .tl-dot{margin:0}
.tl-tlgf .tl-ft{width:110px}
.tlp-est{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:11.5px;font-weight:650;white-space:nowrap}
.tlp-est .ic{width:12px;height:12px}
.tl-bbn{margin-inline-start:6px;padding:1px 7px;border-radius:999px;background:var(--warn);color:var(--on-brand);font-size:10.5px;font-style:normal;font-weight:700;white-space:nowrap}
.bdb-tl.glow{border-color:var(--warn)}
@keyframes tl-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 45%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--warn) 0%,transparent),0 0 14px color-mix(in srgb,var(--warn) 35%,transparent)}}
@media (prefers-reduced-motion:no-preference){
  .bdb-tl.glow,.plk-tl:has(.plk-why){animation:tl-glow 2.4s ease-in-out infinite}
}
.plk-tl:has(.plk-why){border-color:var(--warn)}
.plk-tl .plk-why{background:var(--warn);color:var(--on-brand)}
@media (max-width:600px){.tl-tlgk{min-width:0;flex:1 1 100%}}
.tlp-s.tl-tlg{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.tl-tlg .tlp-sd{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 8px;text-align:start;min-width:0}
.tl-tlg .tlp-refs{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0}
.tl-tlg .tlp-sd b{font-size:12.5px}
/* ⭐ THE PROJECTS & TEAM DASHBOARD (owner 2026-10-04, phase 2) - conflicts red / amber, the 10-day load, project tickets
   coloured by the forecast (overdue red, late amber, on track green, no deadline grey) */
.tl-head .tl-tabs [data-tltab="proj"]{--ac:color-mix(in oklch,var(--brand) 55%,var(--warn));--ac-soft:color-mix(in oklab,var(--brand-soft) 55%,var(--warn-soft))}
.tl-head .tl-pdf{flex-wrap:wrap}
.tlpd-cp{border-color:color-mix(in srgb,var(--red) 35%,var(--rule))}
.tlpd-cp.ok{border-color:color-mix(in srgb,var(--ok) 40%,var(--rule))}
.tlpd-none{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;color:var(--ok)}
.tlpd-none .ic{width:18px;height:18px}
.tlpd-cl{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tlpd-c{display:flex;gap:10px;padding:10px 12px;border:1px solid var(--rule);border-inline-start:4px solid var(--warn);border-radius:10px;background:var(--surface)}
.tlpd-c.s-high{border-inline-start-color:var(--red);background:color-mix(in srgb,var(--red) 5%,var(--surface))}
.tlpd-ci{flex:0 0 32px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--warn-soft);color:var(--warn)}
.s-high .tlpd-ci{background:var(--red-soft);color:var(--red-ink)}
.tlpd-ci .ic{width:16px;height:16px}
.tlpd-cb{display:flex;flex:1 1 auto;flex-direction:column;gap:4px;min-width:0;font-size:13px;color:var(--ink-2)}
.tlpd-cb>b{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.s-high .tlpd-cb>b{color:var(--red-ink)}
.tlpd-cx{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tlpd-av{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 2px;border:1px solid var(--rule);border-radius:999px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.tlpd-av .bd-av{width:22px;height:22px;flex:0 0 22px;font-size:9px}
.tlpd-av:hover,.tlpd-av:focus-visible{border-color:var(--brand);outline:0}
.tlpd-pj{padding:2px 9px;border:1px solid var(--rule);border-radius:7px;background:var(--brand-soft);color:var(--brand-ink);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.tlpd-pj:hover,.tlpd-pj:focus-visible{background:var(--brand);color:var(--on-brand);outline:0}
.tlpd-ll{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.tlpd-ll li{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) auto;align-items:center;gap:10px}
.tlpd-ll li.over .tl-rb i{background:var(--red)}
.tlpd-ll li.over>b{color:var(--red-ink)}
.tlpd-ll li>b{font-variant-numeric:tabular-nums;white-space:nowrap}
.tlpd-ll li>b small{font-weight:400;color:var(--ink-3)}
.tlpd-lw{display:flex;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.tlpd-lw .bd-av{width:28px;height:28px;flex:0 0 28px;font-size:10px}
.tlpd-lw>span{display:flex;flex-direction:column;min-width:0}
.tlpd-lw b{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.tlpd-lw small{font-size:11px;color:var(--ink-3)}
.tlpd-lw:hover b{color:var(--brand-ink);text-decoration:underline}
.tlpd-tks{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tlpd-tk{cursor:default}
.tlpd-tk:hover{transform:none}
.tlpd-tk>span{display:flex}
.tlpd-tk.t-overdue{border-top-color:var(--red)}
.tlpd-tk.t-late{border-top-color:var(--warn)}
.tlpd-tk.t-on_track,.tlpd-tk.t-done{border-top-color:var(--ok)}
.tlpd-tk.t-no_effort,.tlpd-tk.t-unassigned{border-top-color:var(--brand)}
.tlpd-tk .tlm-tkd b{white-space:normal;overflow-wrap:anywhere}
.tlpd-dates{flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-3)}
.tlpd-dates b{color:var(--ink);font-variant-numeric:tabular-nums}
.tlpd-dates .due b{color:var(--brand-ink)}
.t-overdue .tlpd-dates .due b,.t-late .tlpd-dates .due b{color:var(--red-ink)}
.tlpd-st{flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11.5px;color:var(--ink-3)}
.tlpd-sts{padding:2px 8px;border-radius:999px;background:var(--surface-2);font-style:normal;font-weight:700;color:var(--ink-2)}
.tlpd-sts.t-overdue{background:var(--red-soft);color:var(--red-ink)}
.tlpd-sts.t-late{background:var(--warn-soft);color:var(--warn)}
.tlpd-sts.t-on_track,.tlpd-sts.t-done{background:var(--ok-soft);color:var(--ok)}
.tlpd-cfb{display:inline-flex;align-items:center;gap:3px;margin-inline-start:auto;padding:2px 8px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-style:normal;font-weight:700}
.tlpd-cfb .ic{width:12px;height:12px}
.tlpd-bars{flex-direction:column;gap:6px}
.tlpd-bar{display:flex;flex-direction:column;gap:3px}
.tlpd-bar small{font-size:11px;color:var(--ink-3)}
.tlpd-bar .tlm-bar.over i{background:var(--red)}
.tlpd-whos{flex-wrap:wrap;gap:5px;align-items:center}
.tlpd-nob{padding:2px 9px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-size:11.5px;font-weight:700}
.tlpd-lb{padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:600}
.tlpd-last{align-items:flex-start;gap:6px;padding-top:6px;border-top:1px dashed var(--rule);font-size:12px;color:var(--ink-2)}
.tlpd-last .ic{flex:0 0 13px;width:13px;height:13px;margin-top:2px;color:var(--ink-3)}
.tlpd-last>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tlpd-last small{color:var(--ink-3)}
.tlpd-go{justify-content:flex-end;margin-top:auto}
@media (max-width:720px){
  .tlpd-tks{grid-template-columns:minmax(0,1fr)}
  .tlpd-ll li{grid-template-columns:minmax(0,1fr) auto}
  .tlpd-ll li .tl-rb{grid-column:1/-1;grid-row:2}
}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~* .tlpd-c{animation:tl-rise .35s var(--e) backwards;animation-delay:calc(var(--i,0) * 40ms)}
  .tl-anim~* .tlpd-tk{animation:tl-rise .4s var(--e) backwards;animation-delay:calc(var(--i,0) * 30ms)}
}

/* a day of the team's calendar reads "9h / 6h 30m" (owner 2026-10-04) - the target smaller and quieter */
.tl-cof{margin-inline-start:4px;font-size:11px;font-weight:400;color:inherit;opacity:.75}

/* My time, the week: a line is changed from its card and dragged to another day (owner 2026-10-04) */
.tlm-ls li.tlm-mv{margin:0 -4px;padding:2px 4px;border-radius:6px;cursor:grab;transition:background .15s var(--e)}
.tlm-ls li.tlm-mv:hover{background:var(--surface-3)}
.tlm-ls li.tlm-drag{opacity:.45}
.tlm-tk.tlm-dropon{outline:2px dashed var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.tlm-ls li.tlm-mv{transition:none}}

/* My time, the week: "+N more" opens the card's list; the drag moves softly (owner 2026-10-04) */
.tlm-ls .tlm-mb{padding:2px 0;border:0;background:none;color:var(--brand-ink);font:inherit;font-weight:600;cursor:pointer}
.tlm-ls .tlm-mb:hover{text-decoration:underline}
.tlm-ls li.tlm-mv{transition:background .15s var(--e),opacity .2s var(--e),transform .2s var(--e)}
.tlm-ls li.tlm-drag{opacity:.35;transform:scale(.96)}
.tlm-tk{transition:transform .2s var(--e),box-shadow .2s var(--e),outline-color .2s var(--e),background .2s var(--e)}
.tlm-dragging .tlm-tk.tlm-can{outline:1px dashed var(--rule-2);outline-offset:2px}
.tlm-tk.tlm-dropon{outline:2px dashed var(--brand);outline-offset:2px;transform:translateY(-3px);box-shadow:var(--lift-2)}
.tlm-ls li.tlm-landed{animation:tlm-land .9s var(--e) both}
@keyframes tlm-land{0%{opacity:0;transform:translateY(-10px) scale(.96);background:var(--surface-3)}
  45%{opacity:1;transform:none;background:var(--surface-3)}100%{background:transparent}}
@media (prefers-reduced-motion: reduce){
  .tlm-ls li.tlm-mv,.tlm-tk{transition:none}
  .tlm-ls li.tlm-landed{animation:none}
  .tlm-tk.tlm-dropon{transform:none}
}

/* ⭐ the sales engineer's window: his tasks (owner 2026-10-04) */
.tl-stk{display:flex;flex-direction:column;gap:8px;margin:0 0 6px;padding:0;list-style:none}
.tl-stki{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--rule);border-inline-start:3px solid var(--ink-3);border-radius:10px;background:var(--surface-2)}
.tl-stki.p-in_progress{border-inline-start-color:var(--brand)}
.tl-stki.p-completed{border-inline-start-color:var(--ok);opacity:.85}
.tl-stkh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.tl-stkh .tl-plink{flex:1 1 auto;min-width:0;text-align:start}
.tl-stkn{padding:1px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:11.5px;font-weight:700}
.tl-stks{padding:1px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);color:var(--ink-2);font-size:11.5px}
.tl-stkm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12.5px;color:var(--ink-2)}
.tl-stkm>span{display:inline-flex;align-items:center;gap:4px}
.tl-stkm svg{width:14px;height:14px}
.tl-stkl{display:flex;flex-direction:column;gap:3px;margin:2px 0 0;padding:0;list-style:none;font-size:12.5px}
.tl-stkl li{display:flex;align-items:center;gap:6px}
.tl-stkl li>span{flex:1 1 auto;min-width:0}
.tl-stkl li em{font-style:normal;color:var(--ink-3)}
.tl-stkl li small{color:var(--ink-2);white-space:nowrap}
.tl-stkl li.tl-dn>span{text-decoration:line-through;color:var(--ink-3)}
.tl-stkl svg{width:14px;height:14px;flex:none}

/* ⭐ NO FRIDAY, AND A DAY OFF SAYS "OUT OF OFFICE" ON ITS CARD (owner 2026-10-04: "يوم الجمعة لازم ما يبين ... سيك ليف ...
   ينكتب هون عليها ... out of office") - the week is six cards, the month six columns; a whole day of leave is a quiet
   hatched card with its kind; some hours of leave a line on the card */
.tlm-tks{grid-template-columns:repeat(6,minmax(0,1fr))}
.tlm-cal{grid-template-columns:repeat(6,minmax(0,1fr))}
.tlm-tk.tlm-ooo{cursor:default;border-top-color:var(--brand-ink);background:repeating-linear-gradient(135deg,var(--surface) 0 9px,color-mix(in srgb,var(--brand) 7%,var(--surface)) 9px 18px)}
.tlm-tk.tlm-ooo.hol{border-top-color:var(--ok);background:repeating-linear-gradient(135deg,var(--surface) 0 9px,color-mix(in srgb,var(--ok) 8%,var(--surface)) 9px 18px)}
.tlm-tk.tlm-ooo:hover{transform:none;box-shadow:none}
.tlm-ooo .tlm-st{background:var(--brand-soft);color:var(--brand-ink)}
.tlm-ooo.hol .tlm-st{background:var(--ok-soft);color:var(--ok)}
.tlm-oob{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:10px 6px;text-align:center}
.tlm-oob .ic{width:28px;height:28px;flex:0 0 28px;color:var(--brand-ink);opacity:.85}
.tlm-ooo.hol .tlm-oob .ic{color:var(--ok)}
.tlm-oob b{font-size:15px;font-weight:700;color:var(--ink)}
.tlm-oob small{font-size:11.5px;color:var(--ink-3)}
.tlm-lv{display:flex;align-items:center;gap:6px;margin:0;padding:5px 8px;border-radius:8px;background:var(--brand-soft);color:var(--brand-ink);font-size:11.5px;font-weight:600}
.tlm-lv .ic{width:13px;height:13px;flex:0 0 13px}
.tlm-mc.tlm-ooo{background:repeating-linear-gradient(135deg,var(--surface) 0 6px,color-mix(in srgb,var(--brand) 9%,var(--surface)) 6px 12px)}
.tlm-mc.tlm-ooo b{font-size:11px;color:var(--brand-ink)}
@media (max-width:1180px){.tlm-tks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.tlm-tks{grid-template-columns:repeat(2,minmax(0,1fr))}.tlm-oob{min-height:96px}}

/* ⭐ THE PERSON WINDOW'S HEAD, POLISHED AND MOVING (owner 2026-10-04, on Mohammad Mansour's window: «زبط بالله هاي وعمل
   لها انيميشن ... خليها احسن»). The period bar showed NO chosen period (aria-selected, which .seg never drew): now a brand
   pill that SLIDES from the period before to the one picked (timelog.js tlSegPill sets --sx/--sy/--sw/--sh; until it does,
   the chosen tab is filled). The face sits in a brand ring that pops in once, the role is an eyebrow, the date a chip that
   slides in with each period, the close turns, Report lifts, a new period's figures rise in. Calm under reduced motion. */
.tl-seoh>.bd-av{box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px color-mix(in srgb,var(--brand) 70%,transparent)}
.tl-seoh .bd-dt>.muted{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.tl-seoh .bd-dt h3{margin-top:2px}
.tl-seoh .bd-dx .btn,.tl-seoh .tl-rep>summary{transition:transform .15s var(--e2),box-shadow .2s var(--e),background .2s var(--e)}
.tl-seoh .bd-dx .btn:hover,.tl-seoh .tl-rep>summary:hover{transform:translateY(-1px);box-shadow:var(--lift)}
.tl-seoh .bd-dx .btn.ghost .ic{transition:transform .25s var(--e2)}
.tl-seoh .bd-dx .btn.ghost:hover .ic{transform:rotate(90deg)}
.tl-seot{position:relative;isolation:isolate;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2)}
.tl-seot::before{content:"";position:absolute;z-index:-1;top:0;left:0;width:var(--sw,0);height:var(--sh,0);transform:translate(var(--sx,0),var(--sy,0));border-radius:999px;background:var(--brand);box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent);transition:transform .38s var(--e2),width .38s var(--e2)}
.tl-seot button{position:relative;border:0;border-radius:999px;background:transparent;transition:color .2s var(--e)}
.tl-seot button:hover:not([aria-selected="true"]){color:var(--ink)}
.tl-seot button[aria-selected="true"]{color:var(--on-brand,#fff);font-weight:600}
.tl-seot:not([style*="--sw"]) button[aria-selected="true"]{background:var(--brand)}
.tl-seod{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:12px;white-space:nowrap}
.tl-seod .ic{width:13px;height:13px;flex:0 0 13px;color:var(--brand-ink)}
@keyframes tl-face{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes tl-slide{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .tl-seo.tl-in .tl-seoh>.bd-av{animation:tl-face .55s var(--e2) .08s backwards}
  .tl-seo.tl-in .tl-seoh .bd-dt{animation:tl-rise .4s var(--e) .12s backwards}
  .tl-seo.tl-in .tl-seod,.tl-seo.tl-swap .tl-seod{animation:tl-slide .35s var(--e) backwards}
  .tl-seo.tl-swap .tl-seob>*{animation:tl-rise .35s var(--e) backwards}
  .tl-seo.tl-swap .tl-seob>:nth-child(2){animation-delay:.04s}
  .tl-seo.tl-swap .tl-seob>:nth-child(3){animation-delay:.08s}
  .tl-seo.tl-swap .tl-seob>:nth-child(n+4){animation-delay:.12s}
}
@media (prefers-reduced-motion:reduce){.tl-seot::before{transition:none}}
@media (max-width:600px){.tl-seot{border-radius:14px}}                 /* the bar wraps on a phone: a rounded box, not an oval */
/* ⭐ a request chip never leaves its card; the window's days one column on a phone (owner 2026-10-04, his ring) */
.tlw-jobs{display:flex;max-width:100%;min-width:0}
.tlw-job{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.tl-enod.tlw-tks{grid-template-columns:minmax(0,1fr)}}

/* ⭐ THE LEAVE CALENDAR BY HAND (owner 2026-10-05: «صفحة interactive بحيث انه تكون في drag and drop ... التيم تاعي بشوفوا
   اجازات بعض»): a chip that moves shows a grab hand and lifts while dragged; the day under it opens up; a colleague's
   leave is a quiet outlined chip; a range picked by the mouse is tinted; the form says who else is off */
.tlv-cal .tlv-c{user-select:none}
.tl-lvc.mv{cursor:grab}
.tl-lvc.mv:active{cursor:grabbing}
.tl-lvc.mate{background:transparent !important;border:1px dashed color-mix(in srgb,var(--ink-3) 55%,transparent);color:var(--ink-2)}
i.tl-lvc.mate{display:inline-block}
.tlv-k[draggable="true"]{cursor:grab}
.tlv-drag{opacity:.45;transform:scale(.97)}
.tlv-dragging .tlv-cal .tlv-c{outline:1px dashed color-mix(in srgb,var(--brand) 35%,transparent);outline-offset:-2px}
.tlv-cal .tlv-c.tlv-dropon{outline:2px solid var(--brand);outline-offset:-2px;background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.tlv-cal .tlv-c.tlv-rng{background:color-mix(in srgb,var(--brand) 12%,var(--surface));outline:1px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:-1px}
.tlv-also{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--warn-soft,color-mix(in srgb,#d97706 12%,var(--surface)));color:var(--ink);font-size:12.5px}
.tlv-also .ic{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--warn,#b45309)}
.tlv-also small{color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.tl-lvc.mv,.tlv-cal .tlv-c{transition:background .15s var(--e),outline-color .15s var(--e),opacity .15s var(--e),transform .15s var(--e)}}
/* ⭐ MY TIME, THE WEEK IN COLOUR AND MOTION (owner 2026-10-05, his picture of Weekly, Saturday and Sunday ringed: «زبطها
   الوان وانيميشن»). His own days are 'free' (an administrator has no day to fill), so the tickets carried no colour: one
   blue line each, and nothing said a day had time on it. Now a day's line is drawn in the kinds' colours (.tlm-kb - a
   segment a category, the legend's order), a day with time takes the brand edge, today says so with a live dot, and a
   judged day's hours take its state's colour. The motion plays when the week opens (.tl-anim), never on the minute's
   reload: the tickets deal in one after another, each line fills from the left once its ticket has landed, then its
   entries follow, dot by dot. Scoped to My time's week (.tlm-wp) - the other ticket families keep theirs. His tokens only. */
.tlm-kb{display:block;width:100%;height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden;transition:transform .2s var(--e)}
.tlm-fill{display:flex;gap:2px;width:100%;height:100%}
.tlm-fill .tl-seg:first-child{border-radius:4px 0 0 4px}
.tlm-fill .tl-seg:last-child{border-radius:0 4px 4px 0}
.tlm-fill .tl-seg:only-child{border-radius:4px}
.tlm-wp .tlm-tk.tls-free:has(.tlm-ls),.tlm-wp .tlm-tk.tls-free.now{border-top-color:var(--brand)}
.tlm-wp .tlm-tk.tls-full .tlm-tkn b,.tlm-wp .tlm-tk.tls-ok .tlm-tkn b{color:var(--ok)}
.tlm-wp .tlm-tk.tls-short .tlm-tkn b{color:var(--warn)}
.tlm-wp .tlm-tk.tls-empty .tlm-tkn b{color:var(--red-ink)}
.tlm-wp .tlm-st.tlm-now{display:inline-flex;align-items:center;gap:5px;background:var(--brand-soft);color:var(--brand-ink)}
.tlm-wp .tlm-st.tlm-now::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.tlm-wp .tlm-tk:hover .tlm-kb,.tlm-wp .tlm-tk:focus-visible .tlm-kb{transform:scaleY(1.45)}
.tlm-wp .tlm-log .ic{transition:transform .25s var(--e)}
.tlm-wp .tlm-log:hover .ic,.tlm-wp .tlm-log:focus-visible .ic{transform:rotate(90deg)}
@keyframes tlm-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tlm-wipe-r{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes tlm-dot{0%{transform:scale(0)}70%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes tlm-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:no-preference){
  .tl-anim~.tlm-wp .tlm-tk{animation:tl-rise .5s var(--e) backwards;animation-delay:calc(var(--i,0) * 70ms)}
  .tl-anim~.tlm-wp .tlm-fill{animation:tlm-wipe .8s var(--e) backwards;animation-delay:calc(.28s + var(--i,0) * 70ms)}
  [dir=rtl] .tl-anim~.tlm-wp .tlm-fill{animation-name:tlm-wipe-r}
  .tl-anim~.tlm-wp .tlm-ls li{animation:tl-fade .35s var(--e) backwards;animation-delay:calc(.5s + var(--i,0) * 70ms + var(--j,0) * 60ms)}
  .tl-anim~.tlm-wp .tlm-ls .tl-dot{animation:tlm-dot .45s var(--e) backwards;animation-delay:calc(.55s + var(--i,0) * 70ms + var(--j,0) * 60ms)}
  .tl-anim~.tlm-wp .tlm-ls li.tlm-more{animation-delay:calc(.74s + var(--i,0) * 70ms)}
  .tlm-wp .tlm-st.tlm-now::before{animation:tlm-live 2.4s ease-out infinite}
}
@media (prefers-reduced-motion:reduce){
  .tl-anim~.tlm-wp .tlm-tk,.tl-anim~.tlm-wp .tlm-fill,.tl-anim~.tlm-wp .tlm-ls li,.tl-anim~.tlm-wp .tlm-ls .tl-dot,.tlm-wp .tlm-st.tlm-now::before{animation:none}
  .tlm-kb,.tlm-wp .tlm-log .ic{transition:none}
  .tlm-wp .tlm-tk:hover .tlm-kb,.tlm-wp .tlm-log:hover .ic{transform:none}
}

/* ⭐ THE KINDS ON TOP (owner 2026-10-05: «بحيث تكون فوق ولما تنسحب ببين الداتا اللي بدك تحطها») - closed: the kinds and a
   word; a kind dropped on a day of the calendar (or picked) opens the fields under them */
.tlv-hint{display:flex;align-items:center;gap:6px;margin:-4px 0 0;font-size:12px;color:var(--ink-3)}
.tlv-hint .ic{width:14px;height:14px;flex:0 0 14px}
@media (prefers-reduced-motion:no-preference){.tlv-f.tlv-in{animation:tl-rise .3s var(--e) both}}
/* ⭐ THE TEAM'S CALENDAR - NO FRIDAY, WHO IS OFF, AND THE PLAN TO DRAG (owner 2026-10-05, his picture: «شيل الجمعه ... اذا في
   اجازات يبين اذا في حدا معطل ... بلانينج على هذا البورد ويكون drag and drop»). A day ahead shows the plan's projects as chips
   (the board's own tag colours) and the hours still free; a chip drags onto another engineer's row; "To plan" holds the
   projects nobody is on yet. The drag is manage.js's - .mg-dropon marks the row it would land on (the row is
   display:contents, so its cells carry the mark). Leave: "Off" + its kind, a request still waiting dashed. His tokens only. */
.tl-gridp .tl-c.tl-pc{align-items:stretch;justify-content:flex-start;gap:3px;min-height:40px;padding:4px;white-space:normal;cursor:default}
.tl-gridp .tl-c.tl-pc:not(.lv){background:var(--surface-2)}
.tl-gridp .tl-c.tl-pc.lv{align-items:center;justify-content:center}
.tl-pbs{display:flex;flex-wrap:wrap;gap:3px;min-width:0}
.tl-pb{display:inline-flex;align-items:center;gap:3px;padding:0 5px;font-size:10.5px;line-height:18px;cursor:grab;transition:transform .15s var(--e),box-shadow .15s var(--e)}
.tl-pb b{font-weight:700}
.tl-pb:hover{transform:translateY(-1px);box-shadow:var(--lift)}
.tl-pb.late{box-shadow:inset 0 0 0 1.5px var(--red)}
.tl-pmore,.tl-pf{font-size:10.5px;color:var(--ink-3);text-align:center}
.tl-pf.full{color:var(--warn);font-weight:650}
.tl-lvk{font-size:10.5px;line-height:1.2;color:var(--ok);text-align:center;white-space:normal}
.tl-c.lvp{outline:1.5px dashed color-mix(in srgb,var(--ok) 70%,transparent);outline-offset:-2px}
.tl-offs,.tl-plan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 10px;padding:8px 10px;border-radius:10px;background:var(--surface-2);font-size:12px}
.tl-offs .ic,.tl-plan .ic{width:15px;height:15px;color:var(--brand)}
.tl-off{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ink)}
.tl-off.w{background:transparent;outline:1.5px dashed color-mix(in srgb,var(--ok) 70%,transparent);outline-offset:-1.5px}
.tl-plan>small{flex:1 1 100%}
.tl-gridp .pp-hr.mg-dropon>*{background:var(--brand-soft)}
.tl-gridp .pp-hr.mg-dropon>.tl-c{outline:2px dashed var(--brand);outline-offset:-2px}
.tl-gridp .mg-dragged{opacity:.4}
/* on a phone a day's column holds "6h 30m / 6h 30m" (73 px) and the plan's chips - at 58 px they ran into the next day
   (uiAudit 375 px, 2026-10-05); the grid scrolls sideways there anyway */
@media (max-width:760px){.pp-hg.tl-hg:not(.mo){grid-template-columns:132px repeat(var(--n),minmax(96px,1fr)) 78px;min-width:calc(210px + var(--n) * 96px)}}
@media (prefers-reduced-motion:reduce){.tl-pb{transition:none}.tl-pb:hover{transform:none}}

/* ⭐ THE LEAVE WRITTEN IN ITS DAY (owner 2026-10-05, his crosses through the fields under the kinds and his arrow into
   Monday: «الديتيلز بتبين جوا ... التيكت تاعت اليوم ... اسم المهندس زي ال assign تكون زي دائرة صغيرة»). Each leave in a day is
   a round of initials (the board's .bd-av colours) ringed in its kind's colour - dashed while it waits, faint for a
   colleague's - a departure's hours beside it; the card opens inside the day, over its neighbours, its top edge in the
   kind's colour; the days it covers are tinted. On a phone the card sits at the foot of the screen. app.js-free:
   timelog.js tlLvEd / tlLvCal. */
.tlv-lvs{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.tlv-lv{display:inline-flex;align-items:center;gap:2px;border-radius:999px;outline:0}
.tlv-lv.mv{cursor:pointer}
.tlv-lv .tlv-av{width:24px;height:24px;flex:0 0 24px;border:2px solid var(--surface);box-shadow:0 0 0 2px var(--k,var(--brand));font-size:9.5px}
.tlv-lv.pend .tlv-av{box-shadow:none;outline:2px dashed var(--k,var(--warn));outline-offset:0}
.tlv-lv.mate .tlv-av{opacity:.55;box-shadow:0 0 0 1px var(--ink-3)}
.tlv-lv.on .tlv-av,.tlv-lv:focus-visible .tlv-av{box-shadow:0 0 0 2px var(--k,var(--brand)),0 0 0 5px color-mix(in srgb,var(--k,var(--brand)) 28%,transparent)}
.tlv-lv small{font-size:10px;font-weight:650;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tlv-c.tlv-span{background:color-mix(in srgb,var(--brand) 9%,var(--surface));outline:1px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:-1px}
.tlv-c.tlv-edc{position:relative;z-index:6}
.tlv-ed{position:absolute;top:26px;left:-1px;z-index:7;display:flex;flex-direction:column;gap:8px;width:256px;padding:10px 11px 11px;
  border:1px solid var(--rule-2);border-top:3px solid var(--k,var(--brand));border-radius:12px;background:var(--surface);
  box-shadow:var(--lift-2);color:var(--ink);cursor:default;text-align:start;user-select:text}
.tlv-edc.r .tlv-ed{left:auto;right:-1px}
.tlv-edh{display:flex;align-items:center;gap:6px;min-width:0}
.tlv-edk{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px}
.tlv-edk .ic{width:16px;height:16px;flex:0 0 16px;color:var(--k,var(--brand))}
.tlv-edx{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;margin-inline-start:auto;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.tlv-edx:hover,.tlv-edx:focus-visible{background:var(--surface-2);color:var(--ink)}
.tlv-edx .ic{width:14px;height:14px}
.tlv-eds{font-size:12px;color:var(--ink-3)}
.tlv-who{display:flex;flex-direction:column;gap:5px}
.tlv-avs{display:flex;flex-wrap:wrap;gap:5px}
.tlv-ed .tlv-av{width:28px;height:28px;flex:0 0 28px;padding:0;border:2px solid var(--surface);font:700 10px/1 var(--sans);cursor:pointer}
.tlv-ed .tlv-av.on{box-shadow:0 0 0 2px var(--brand)}
.tlv-ed .tlv-av:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tlv-whon{font-size:12px;font-weight:650}
.tlv-edq{display:flex;flex-wrap:wrap;gap:4px}
.tlv-edn{height:30px;font-size:12.5px}
.tlv-edt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.tlv-edt .inp{height:30px;width:auto}
.tlv-eda{display:flex;align-items:flex-start;gap:5px;margin:0;font-size:11.5px;color:var(--warn)}
.tlv-eda .ic{width:13px;height:13px;flex:0 0 13px;margin-top:1px}
.tlv-edf{display:flex;justify-content:flex-end;gap:6px}
/* a phone's day is 50 px wide: the card takes the calendar's whole width, right under that day's top */
@media (max-width:760px){
  .tlv-cal{position:relative}
  .tlv-cal .tlv-c.tlv-edc{position:static}
  .tlv-cal .tlv-c.tlv-edc .tlv-ed{left:0;right:0;width:auto;top:auto}
}
@media (prefers-reduced-motion:no-preference){
  .tlv-ed{animation:tlv-ed-in .24s var(--e)}
  .tlv-lv .tlv-av,.tlv-ed .tlv-av{transition:transform .18s var(--e),box-shadow .2s var(--e)}
  .tlv-lv.mv:hover .tlv-av,.tlv-ed .tlv-av:hover{transform:translateY(-1px) scale(1.06)}
}
@keyframes tlv-ed-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
/* ⭐ BREEZY'S READ COMES OUT OF BREEZY (owner 2026-10-05, his two pictures - Projects and the sales engineers' page - each
   read circled with an arrow to the round button: «بدي تكون هاي تطلع من منطقة البريزي ... I can support you with this»,
   «same here»). The read is no longer a block on the page (manage.js mgRead): it is pinned above the round button and
   opens OUT of it - a tap on the word beside him (mgSay) - and closes with its X or Esc; while it has something to fix he
   glows (html.mg-bzon, on .asst-fab::before - the button itself is never transformed). While a project is dragged the
   open read fades and lets the drop through. It opens just above him wherever he stands - he rises over the footer
   (app.js fabAboveFoot) - with the height left above him: manage.js mgSayPlace sets --bz-at and --bz-room. His tokens only. */
.mg-bz.mg-bzpop{position:fixed;z-index:60;inset-inline-end:24px;inset-block-end:var(--bz-at,92px);width:min(560px,calc(100vw - 48px));max-height:min(68vh,620px,var(--bz-room,100vh));margin:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--rule);box-shadow:var(--lift-2);transform-origin:100% 100%;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.55);transition:opacity .2s var(--e),transform .34s var(--e),visibility 0s linear .34s}
[dir=rtl] .mg-bz.mg-bzpop{transform-origin:0 100%}
.mg-bz.mg-bzpop.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s var(--e),transform .34s var(--e),visibility 0s}
.mg-bzhd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mg-bzcl{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer;transition:background .15s var(--e),color .15s var(--e)}
.mg-bzcl:hover,.mg-bzcl:focus-visible{background:var(--surface-2);color:var(--ink);outline:0}
.mg-bzcl .ic{width:16px;height:16px}
#view.mg-dragging .mg-bz.mg-bzpop.open{opacity:.22;pointer-events:none}
.mg-say[hidden]{display:none}
.mg-say b{display:block;color:var(--brand-ink)}
.mg-say small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3)}
/* the light around him and the word's arrow are box-shadows - paint only: a box drawn outside him made the round button
   and the word measure wider than themselves (uiAudit +7 / +8, b7964a 14:38) */
html.mg-bzon .asst-fab::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 45%,transparent),0 0 24px 8px color-mix(in srgb,var(--brand) 40%,transparent)}
@keyframes mgBzGlow{0%,100%{opacity:.5;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent),0 0 14px 4px color-mix(in srgb,var(--brand) 30%,transparent)}50%{opacity:1;box-shadow:0 0 0 7px color-mix(in srgb,var(--brand) 50%,transparent),0 0 30px 10px color-mix(in srgb,var(--brand) 45%,transparent)}}
.mg-say::after{right:0;width:0;height:0;margin-top:0;background:none;border:0;box-shadow:0 0 0 6px var(--surface),1px -1px 0 6px var(--rule)}
@media (prefers-reduced-motion:no-preference){html.mg-bzon .asst-fab::before{animation:mgBzGlow 2.4s ease-in-out infinite}}
@media (prefers-reduced-motion:reduce){.mg-bz.mg-bzpop,.mg-bz.mg-bzpop.open{transition:none}html.mg-bzon .asst-fab::before{animation:none}}
@media (max-width:520px){.mg-bz.mg-bzpop{inset-inline-end:12px;inset-block-end:var(--bz-at,80px);width:calc(100vw - 24px);max-height:min(62vh,var(--bz-room,100vh))}}
/* ⭐ the calendar inside Team and Sales engineers (owner 2026-10-05) - the sales engineer it shows, beside the switch */
.tl-svw{flex-wrap:wrap;align-items:center;gap:8px 14px}
.tl-cse{display:flex;align-items:center;gap:8px}
.tl-cse .fld{margin:0;white-space:nowrap}
.tl-cse .inp{min-width:200px;max-width:100%}
@media (max-width:520px){.tl-cse{flex:1 1 100%}.tl-cse .inp{flex:1;min-width:0}}

/* ⭐ ONE PLACE FOR EACH THING (owner 2026-10-05, the Team page: «شوف شو في اشي افضل») - For whom and the kinds of work
   stacked on the left, the projects on the right with who worked on each and what the portal finished on it (the old
   "What the team delivered" and "The sales engineers' week" boxes are gone); a project with requests but no hour logged
   reads 0 in grey. timelog.js tlSeRank / tlProjects. */
.tl-cols2s{align-items:start}
.tl-stk{display:flex;flex-direction:column;min-width:0}
.tl-h4 .tl-h4b{margin-inline-start:auto}
.tl-prk{gap:12px}
.tl-prk li{grid-template-columns:minmax(0,2.4fr) minmax(60px,1.3fr) auto}
.tl-pdl{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px}
.tl-pdl .bd-av{width:22px;height:22px;flex:0 0 22px;font-size:9px}
.tl-pdl .bd-av+.bd-av{margin-inline-start:-6px}
.tl-pdl .tl-svcc{padding:1px 8px;gap:4px;font-size:11.5px}
.tl-pdl .tl-svcc b{font-size:12px}
.tl-pdl .bd-av+.tl-svcc{margin-inline-start:4px}
.tl-rank b small{font-weight:500;color:var(--ink-3);white-space:nowrap}

/* ⭐ THE WEEK'S LINES MOVE THE PLANNER'S WAY (owner 2026-10-05: «بدي الأنيميشن زي انيميشن التاسكات زي البلانر») - timelog.js
   tlwLift: the line lifts as a ghost with the board's shadow, its slot opens in the day under the hand, let go it slides in */
.tlm-ls li.tlm-mv{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tlm-ls li.tlw-lifted{display:none}
.tlm-ls li.tlw-press{transform:scale(.97);background:var(--surface-3);transition:transform .2s var(--e),background .2s var(--e)}
.tlm-ls li.tlw-ph{display:block;flex:0 0 auto;margin:0 -4px;border:1px dashed var(--brand);border-radius:6px;
  background:color-mix(in srgb,var(--brand) 7%,transparent)}
.tlm-ls.tlw-tmp{margin-top:2px}
.tlm-ls.tlw-gl{position:fixed;z-index:95;margin:0;padding:4px 6px;border:1px solid var(--rule-2);border-radius:8px;
  background:var(--surface);box-shadow:var(--lift-2),0 14px 32px rgba(7,19,34,.22);pointer-events:none;transform-origin:50% 40%}
.tlm-ls.tlw-gl li{margin:0;padding:0;background:none}
@media (prefers-reduced-motion:no-preference){
  .tlm-ls li.tlw-ph{animation:tlw-open .18s var(--e) both}
  .tlm-ls li.tlw-ph.tlw-held{animation:none}
}
@keyframes tlw-open{from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:none}}

/* ⭐ BREEZY'S READ, EASY ON THE EYES (owner 2026-10-05: «زبط ال color visulaziation and anaimation here deeply 100%» /
   «make it better for eyes» / «and to have better mangment») - one card a line: the sentence full width, its projects and
   its action under it (three side-by-side columns squeezed it to one word a line); colour = meaning, never a hue per code:
   the level's edge, today / tomorrow on the chip; what waits counted on top; the cards come in once when it opens */
.mg-bz.mg-bzpop .mg-bzs{margin:2px 0 10px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.mg-bzk{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.mg-bzk span{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--ink-2)}
.mg-bzk span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.mg-bzk .k-red{background:var(--red-soft);color:var(--red-ink)}.mg-bzk .k-red::before{background:var(--red)}
.mg-bzk .k-warn{background:var(--warn-soft);color:var(--ink)}.mg-bzk .k-warn::before{background:var(--warn)}
.mg-bzk .k-info{background:var(--brand-soft);color:var(--brand-ink)}
.mg-bzk .k-ok{background:var(--ok-soft);color:var(--ink)}.mg-bzk .k-ok::before{background:var(--ok)}
.mg-bz.mg-bzpop .mg-bzl{gap:8px}
.mg-bz.mg-bzpop .mg-bzl li{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"d t" ". x";align-items:start;gap:8px 10px;padding:10px 12px;border:1px solid var(--rule);border-inline-start:3px solid var(--brand);border-radius:var(--rc);background:var(--surface-2);font-size:13px;line-height:1.5}
.mg-bz.mg-bzpop .mg-bzl li.lv-red{border-inline-start-color:var(--red);background:var(--red-soft)}
.mg-bz.mg-bzpop .mg-bzl li.lv-warn{border-inline-start-color:var(--warn);background:var(--warn-soft)}
.mg-bz.mg-bzpop .mg-bzl li.lv-ok{border-inline-start-color:var(--ok)}
.mg-bz.mg-bzpop .mg-bzd{grid-area:d;margin-top:6px}
.mg-bz.mg-bzpop .mg-bzt{grid-area:t;min-width:0;color:var(--ink);text-wrap:pretty}
.mg-bz.mg-bzpop .mg-bzx{grid-area:x;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px}
.mg-bz.mg-bzpop .mg-bzx .btn{margin-inline-start:auto}
.mg-bz.mg-bzpop .mg-bzc{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface);color:var(--ink);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;transition:transform .15s var(--e),border-color .15s var(--e)}
.mg-bz.mg-bzpop .mg-bzc:hover{filter:none;border-color:var(--brand);transform:translateY(-1px)}
.mg-bz.mg-bzpop .mg-bzc:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.mg-bz.mg-bzpop .mg-bzw{font-size:10.5px;font-weight:600;opacity:1;color:var(--ink-3)}
.mg-bz.mg-bzpop .mg-bzw.now{padding:0 6px;border-radius:999px;background:var(--red-soft);color:var(--red-ink)}
.mg-bz.mg-bzpop .mg-bzw.soon{padding:0 6px;border-radius:999px;background:var(--warn-soft);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .mg-bz.mg-bzpop.bz-in .mg-bzk span,.mg-bz.mg-bzpop.bz-in .mg-bzl li{animation:mgBzIn .36s var(--e) both;animation-delay:calc(.08s + var(--i,0) * .05s)}
  .mg-bz.mg-bzpop.bz-in .mg-bzl li.lv-red .mg-bzd{animation:mgBzPulse 1.1s var(--e) .45s 2}
}
@keyframes mgBzIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mgBzPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 55%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
@media (max-width:520px){.mg-bz.mg-bzpop .mg-bzx .btn{margin-inline-start:0;width:100%}}

/* ⭐ PROJECT MANAGEMENT ON THE PROJECTS BAR (owner 2026-10-05: «انقل projets هون وسميها project mangement») - its button in
   the bar's brand blue beside Time Log, its icon hops on hover; its page head is its name where the time log's tabs were */
.tl-pmt{display:flex;align-items:center;gap:10px;margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.tl-pmt .ic{box-sizing:border-box;width:30px;height:30px;flex:0 0 30px;padding:6px;border-radius:var(--rc);background:var(--brand);color:var(--on-brand)}
@media (prefers-reduced-motion:no-preference){.ws-jump .btn.bdb-pm:is(:hover,:focus-visible) .ic{animation:bdb-hop .6s var(--e)}}

/* ⭐ the estimate from the ticket's panel on the team's days (owner 2026-10-05: «من هون بقدر اضيف estimation time») - a
   small hours box beside Start on; amber when the ticket has none yet, red when the words are not hours */
.mg-tka .mg-estl input[data-mgest]{width:6.5em;padding:4px 8px;border:1px solid var(--rule-2);border-radius:var(--rc);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums}
.mg-tka .mg-estl.need input[data-mgest]{border-color:var(--warn);background:var(--warn-soft)}
.mg-tka .mg-estl input[data-mgest]:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.mg-tka .mg-estl input[data-mgest].bad{border-color:var(--red);background:var(--red-soft)}
/* ⭐ THE LEAVE CALENDAR IN COLOUR, WITH A WORD (owner 2026-10-05, his picture of it: «make better animations and color for it
   and show a bit details») - each leave's round inside a bar of its kind's colour; a narrow cell keeps the round alone */
.tlv-cs{container-type:inline-size}
.tlv-lvs:has(.tlv-bar){flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:3px}
.tlv-lv.tlv-bar{display:flex;align-items:center;gap:6px;min-width:0;padding:2px 8px 2px 2px;border-radius:4px;background:color-mix(in srgb,var(--k,var(--brand)) 15%,var(--surface));color:var(--ink);transition:transform .18s var(--e),box-shadow .18s var(--e),background .18s var(--e)}
.tlv-lv.tlv-bar.s0{border-start-start-radius:999px;border-end-start-radius:999px}
.tlv-lv.tlv-bar.s1{border-start-end-radius:999px;border-end-end-radius:999px}
.tlv-lv.tlv-bar.s0:not(.s1){box-shadow:inset -1px 0 0 color-mix(in srgb,var(--k,var(--brand)) 25%,transparent)}
.tlv-lvt{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.tlv-lvt b{flex:none;font-size:11.5px;font-weight:650}
.tlv-lvt small{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;color:var(--ink-2)}
.tlv-lvt em{flex:none;padding:0 6px;border-radius:999px;font-style:normal;font-size:9.5px;font-weight:650;color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,var(--surface))}
.tlv-lvh{display:none}
.tlv-lv.tlv-bar.pend{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--k,var(--warn)) 14%,var(--surface)) 0 6px,var(--surface) 6px 12px);outline:1px dashed color-mix(in srgb,var(--k,var(--warn)) 70%,transparent);outline-offset:-1px}
.tlv-lv.tlv-bar.mate{opacity:.7}
.tlv-lv.tlv-bar.mv:hover{transform:translateY(-1px);box-shadow:var(--lift-2)}
.tlv-lv.tlv-bar.on{box-shadow:0 0 0 2px color-mix(in srgb,var(--k,var(--brand)) 55%,transparent)}
.tlv-c.has{transition:background .25s var(--e)}
.tlv-c.has:hover{background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
@container (max-width:150px){
  .tlv-lvs:has(.tlv-bar){flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px}
  .tlv-lv.tlv-bar,.tlv-lv.tlv-bar.pend{padding:0;border-radius:999px;background:none;outline:0;box-shadow:none}
  .tlv-lvt{display:none}
  .tlv-lvh{display:inline}
}
@keyframes tlvBarIn{from{opacity:0;transform:translateX(-10px) scaleX(.9)}to{opacity:1;transform:none}}
@keyframes tlvWait{50%{opacity:.45}}
@media (prefers-reduced-motion:no-preference){
  .tlv-cal.tlv-anim .tlv-lv.tlv-bar{transform-origin:left center;animation:tlvBarIn .45s var(--e) backwards;animation-delay:calc(var(--i,0) * 16ms)}
  .tlv-lvt em{animation:tlvWait 2.4s ease-in-out infinite}
}

/* ⭐ THE LOG TIME FORM IN A SMALLER BOX (owner 2026-10-05: «صندوق اصغر ... ما يخدم مساحه كبيره ... تصير هدول دروب ليست ...
   مالتيبل سيلكشن لل مبيعات») - timelog.js tlLogForm(compact) / tlActDd / tlDdHtml(multi) */
#tlAdd .pad{padding-block:12px}
#tlAdd .tl-lf{gap:8px}
#tlAdd .tl-lfc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px 14px;align-items:end}
#tlAdd .tl-lfr{gap:4px}
#tlAdd .tl-tq{gap:4px}
#tlAdd .tl-tqb{padding:3px 8px;font-size:11.5px}
#tlAdd .tl-lfi{max-width:96px}
.tldd.multi .tldd-b{min-height:38px;height:auto;flex-wrap:wrap;row-gap:4px;padding-block:4px}
.tldd-ms{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.tldd-mc{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:var(--surface-3);color:var(--ink);font-size:11.5px;font-weight:600;white-space:nowrap}
.tl-actdd .tldd-i .tldd-ok{visibility:hidden}
.tl-actdd .tldd-i[aria-pressed="true"]{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.tl-actdd .tldd-i[aria-pressed="true"] .tldd-ok{visibility:visible}
.tl-actdd .tldd-i .tl-dot{flex:none}
@media (max-width:760px){#tlAdd .tl-lfc{grid-template-columns:1fr}}

/* ⭐ THE LEAVE TAG ON A DAY THAT ALSO HAS HOURS (owner 2026-11-14: a sick day with 30m logged showed only the 30m) */
.tl-sd b{display:flex;flex-direction:column;align-items:center;gap:3px}