/* yo-controls.css — Yamama «arrow & control token sweep» (task eb5aaf36, 2026-10-25).
   One designed look for every arrow-like native control in the suite: number fields lose the grey browser spin
   triangles and get a slim brand chevron stepper (drawn here, driven by yo-controls.js: click, long-press repeat,
   wheel while focused, keyboard; step/min/max respected). Selects get one brand caret; date/time pickers a brand icon.
   Logical properties keep the stepper and caret on the inline-end side in Arabic (left) and English (right).
   No DOM writes: the stepper is a background, the script only listens. Rollback: files/qa-oct23/office-arrows-rollback.sh */
:root{--yoc-ink:#6a5cf0;--yoc-hov:rgba(106,92,240,.10);--yoc-step:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-step-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%23c9c4e8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24'%3E%3Crect width='18' height='24' rx='6' fill='rgba%28106,92,240,.12%29'/%3E%3C/svg%3E");--yoc-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.75 6 7.75l3-3'/%3E%3C/svg%3E");--yoc-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");--yoc-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not(.light){--yoc-hov:rgba(179,169,255,.14);--yoc-step:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-step-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%235f5a85' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24'%3E%3Crect width='18' height='24' rx='6' fill='rgba%28179,169,255,.18%29'/%3E%3C/svg%3E");--yoc-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.75 6 7.75l3-3'/%3E%3C/svg%3E");--yoc-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");--yoc-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}}
:root.dark,html.dark,html[data-theme=dark],html.yo-dark,body.dark{--yoc-hov:rgba(179,169,255,.14);--yoc-step:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-step-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%235f5a85' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24'%3E%3Crect width='18' height='24' rx='6' fill='rgba%28179,169,255,.18%29'/%3E%3C/svg%3E");--yoc-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.75 6 7.75l3-3'/%3E%3C/svg%3E");--yoc-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");--yoc-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b3a9ff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
:root.light{--yoc-hov:rgba(106,92,240,.10);--yoc-step:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-step-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none' stroke='%23c9c4e8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8 6 5l3 3'/%3E%3Cpath d='M3 12l3 3 3-3'/%3E%3C/svg%3E");--yoc-pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24'%3E%3Crect width='18' height='24' rx='6' fill='rgba%28106,92,240,.12%29'/%3E%3C/svg%3E");--yoc-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.75 6 7.75l3-3'/%3E%3C/svg%3E");--yoc-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");--yoc-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236a5cf0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}

/* 1 · number fields: no native spin triangles anywhere */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none!important;appearance:none!important;margin:0!important;display:none!important}
input[type=number]{-moz-appearance:textfield!important;appearance:textfield!important}
/* the brand stepper: two slim chevrons on the inline-end side, a soft lavender pill on hover */
input[type=number]:not([readonly]):not(:disabled):not(.yo-nostep){
  background-image:var(--yoc-step),var(--yoc-pill)!important;
  background-repeat:no-repeat!important;
  background-size:12px 20px,0 0!important;
  background-position:right 5px center,right 2px center!important;
  padding-inline-end:22px!important;
}
input[type=number]:dir(rtl):not([readonly]):not(:disabled):not(.yo-nostep){background-position:left 5px center,left 2px center!important}
/* disabled fields keep a faded stepper so every number field reads the same, even before it can be used */
input[type=number]:disabled:not(.yo-nostep){background-image:var(--yoc-step-off)!important;background-repeat:no-repeat!important;background-size:12px 20px!important;background-position:right 5px center!important;padding-inline-end:22px!important}
input[type=number]:disabled:dir(rtl):not(.yo-nostep){background-position:left 5px center!important}
input[type=number].yoc-hot:not([readonly]):not(:disabled){background-size:12px 20px,18px min(24px,calc(100% - 6px))!important;cursor:pointer}
input[type=number]{font-variant-numeric:tabular-nums}

/* 2 · selects: a native select (grey system caret) gets the brand caret; yo-controls.js marks it .yoc-sel.
   Selects the apps already designed (appearance:none + their own caret) are left exactly as they are. */
select.yoc-sel{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background-image:var(--yoc-caret)!important;background-repeat:no-repeat!important;background-size:12px 12px!important;
  background-position:right 9px center!important;padding-inline-end:28px!important}
select.yoc-sel:dir(rtl){background-position:left 9px center!important}
select::-ms-expand{display:none}

/* 3 · date / time pickers: brand calendar and clock icons instead of the grey glyphs */
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator{background:var(--yoc-cal) center/16px 16px no-repeat;color:transparent;opacity:.9;cursor:pointer;border-radius:6px;padding:3px;width:16px;height:16px}
input[type=time]::-webkit-calendar-picker-indicator{background:var(--yoc-clock) center/16px 16px no-repeat;color:transparent;opacity:.9;cursor:pointer;border-radius:6px;padding:3px;width:16px;height:16px}
input::-webkit-calendar-picker-indicator:hover{background-color:var(--yoc-hov);opacity:1}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not(.light) :is(input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]){color-scheme:dark}}
:is(html.dark,html[data-theme=dark],html.yo-dark,body.dark) :is(input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]){color-scheme:dark}

/* 4 · the shared chevron/arrow glyph (yo-controls.js YOC.svg) — mirrors itself in Arabic */
.yoc-ico{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex:none}
[dir=rtl] .yoc-ico.yoc-flip{transform:scaleX(-1)}
details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}

/* W15 5c56c3f4: phone touch targets >=44px */
@media (max-width:760px){
button.chip,.yt-tchip,a.ymc-all,a.btn.sm,button.btn.sm,.y-toast button,.y-toast a,button.x,#agHome,#agLang,.seg button{min-height:44px}
a.brand{min-height:44px;display:inline-flex;align-items:center}
a.ymc-all,a.btn.sm{display:inline-flex;align-items:center;justify-content:center}
.yodlg-x,.sibtn{min-width:44px;min-height:44px}
}

/* W15 5c56c3f4 */
.cnote{margin:6px 0 2px;padding:10px 12px;border-radius:10px;background:#fff7e0;color:#5b4300;font-size:13.5px;line-height:1.6}.cnote a{color:#3b2fa0;font-weight:600;text-decoration:underline;display:inline-block;min-height:44px;line-height:44px}

/* w23 sign-in CTA — owner 2026-10-27 06:52 «ما هذا التصميم الضعيف للزر»: confident brand primary on every host, ar/en, light/dark. Logic untouched. */
:root:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2){background:linear-gradient(135deg,#6d4af2 0%,#4b2fc4 100%)!important;background-color:#5a3ae0!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:12px!important;min-height:40px!important;height:auto!important;padding:0 16px!important;gap:8px!important;font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif!important;font-weight:600!important;font-size:14px!important;line-height:1!important;letter-spacing:0!important;opacity:1!important;box-shadow:0 1px 2px rgba(42,31,110,.20),0 6px 14px -6px rgba(75,47,196,.55)!important;transition:filter .15s ease,box-shadow .15s ease,transform .08s ease!important;cursor:pointer}
:root:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2) :is(.nm,span){color:#fff!important;font-weight:600!important}
:root:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2) svg{color:#fff!important;stroke:currentColor!important;width:18px!important;height:18px!important;flex:none}
:root[dir=rtl]:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2) svg{transform:scaleX(-1)!important}
:root:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2):hover{filter:brightness(1.09) saturate(1.05)!important;box-shadow:0 2px 4px rgba(42,31,110,.22),0 10px 20px -8px rgba(75,47,196,.65)!important}
:root:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2):active{transform:translateY(1px)!important;filter:brightness(.94)!important;box-shadow:0 1px 2px rgba(42,31,110,.25)!important}
:root:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2):focus-visible{outline:2px solid #fff!important;outline-offset:-4px!important;box-shadow:0 0 0 3px #a996ff,0 6px 14px -6px rgba(75,47,196,.55)!important}
@media (pointer:coarse){:root:root:root :is(button,a).acct.acct.acct:is([aria-label="تسجيل الدخول"],[aria-label="Sign in"]):not(:has(.av)):not(#_y1):not(#_y2){min-height:44px!important}}