/* yo-a11y.css — nov6r9 shared accessibility tokens for all 7 Yamama Office apps.
   One file, linked last in every page, so contrast, tap-size and covering fixes live in one place. */
:root{
  --yo-tap:44px;               /* touch target (phones and any coarse pointer) */
  --yo-tap-mouse:24px;         /* WCAG 2.2 AA 2.5.8 minimum with a mouse */
  --yo-ink-on-tint:#3a2ca8;    /* brand text on the lavender tint: 5.4:1 */
  --yo-muted-on-tint:#463f6b;  /* secondary text on the lavender tint: 5.6:1 */
  --yo-muted:#5b5672;          /* secondary text on white/near-white: 6.9:1 */
}
/* 1) contrast — home header text on the lavender gradient */
#y-date,.y-date{color:var(--yo-ink-on-tint)!important}
.yh-sub,.yh-qlab{color:var(--yo-muted-on-tint)!important}
/* «مساحة كل باقة» sat inside a 0.82-opacity line: full-strength link */
.yd-use a{opacity:1;color:var(--yo-ink-on-tint)}
.yd-use span:has(> a){opacity:1!important}

/* 2) covered — decorative icons never take the tap from the control that owns them */
svg[aria-hidden="true"],svg.ic,svg.i,.ic>use{pointer-events:none}

/* 3) tap targets — every touch control meets 44 px */
@media (max-width:700px),(pointer:coarse){
  .acct,button.acct{min-height:var(--yo-tap)!important}
  .btn.sm,button.btn.sm{min-height:var(--yo-tap)!important}
  #fxIn{min-height:var(--yo-tap)!important}
  .yd-use a{display:inline-flex;align-items:center;min-height:var(--yo-tap);padding-inline:6px}
}
/* mouse: split-button arrows were 18–20 px; never under 24 px */
@media (min-width:701px) and (pointer:fine){
  .rdd{min-width:var(--yo-tap-mouse)!important;min-height:var(--yo-tap-mouse)!important}
}

/* 4) buttons never wrap one word per line (the 2FA «ابدأ» button was a tall narrow pill) */
.sibtn{white-space:nowrap}
#tfst{min-width:140px;align-self:flex-start;padding-inline:22px}
@media (max-width:700px),(pointer:coarse){.sibtn{min-height:var(--yo-tap)}}

/* 5) covered — an empty-state panel never sits on top of the controls beside it (Mail «الملخصات / التسجيلات») */
.empty.big{pointer-events:none}
.empty.big a,.empty.big button,.empty.big input{pointer-events:auto}
/* sheets phone header: the title box was a 76×76 square that slid under the next icon button */
@media (max-width:700px){html.yo-touch body #titleIn,#titleIn{height:var(--yo-tap)!important;min-height:var(--yo-tap)!important;min-width:0!important}}

/* ===== nov6r10: layout-geometry fixes for covered controls (safe areas, not hiding) ===== */
:root{
  --yo-fab-safe:88px;          /* desktop assistant launcher: 56 px button + 16 px offset + 16 px air */
  --yo-rail-h:68px;            /* phone bottom app rail (y365.css) */
}
/* 6) sheets phone title — .tmeta is a flex COLUMN, so the touch rule "flex:1 1 76px" became a 76 px HEIGHT
      and min-width 76 pushed the box out of its slot onto the undo button. Title: 44 px tall, as wide as its slot;
      the save status sits in the box's lower band (pointer-events off, so a tap there still edits the title). */
@media (max-width:700px){
  :root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar .tmeta,:root #ed #titlebar .tmeta{flex:1 1 0!important;min-width:56px!important;width:auto!important;position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-self:center!important;overflow:hidden}
  :root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar .tmeta #titleIn,:root #ed #titlebar .tmeta #titleIn{flex:0 0 auto!important;width:100%!important;min-width:0!important;max-width:100%!important;height:var(--yo-tap)!important;min-height:var(--yo-tap)!important;padding:0 6px 11px!important;line-height:32px!important;top:auto!important;position:relative!important;text-overflow:ellipsis}
  :root #ed #titlebar .tmeta #saveSt{position:absolute!important;inset-inline-start:7px;bottom:2px;margin:0!important;font-size:10px!important;line-height:11px!important;height:11px;max-width:calc(100% - 14px);overflow:hidden;white-space:nowrap;pointer-events:none}
}
/* 7) desktop assistant launcher safe area — the floating launcher sits in the inline-end bottom corner, so the
      home column keeps a gutter there instead of sliding its controls (Slides «قائمة») under it. */
@media (min-width:761px){
  html.yoc-on.yoc-desk .hmain{padding-inline-end:max(28px,var(--yo-fab-safe))!important}
}
/* 8) phone home — the page scrolls in the area ABOVE the bottom app rail, so no row or «خيارات» button ever sits
      under «المزيد»; the rail stays where it is. */
@media (max-width:760px){
  html.yt-railv:has(> body.yh-on){height:100%;overflow:hidden}
  html.yt-railv body.yh-on{height:calc(100dvh - var(--yo-rail-h) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  html.yt-railv body.yh-on main{padding-bottom:24px!important}
}
/* 9) mail «اليمامة ميت» filter chips — on desktop they were a hidden-scrollbar strip whose last chips
      («التسجيلات / الملخصات») ran under the reading pane; they now wrap inside the list column. */
.ymm-chips{flex-wrap:wrap!important;overflow-x:visible!important;row-gap:6px}

/* 10) PDF — page-thumbnail options were 30×30 on phones; the page pager reads on a solid backing over the page canvas */
@media (max-width:700px),(pointer:coarse){ .thm{width:var(--yo-tap)!important;height:var(--yo-tap)!important;top:2px!important;inset-inline-end:2px!important} }
#pnav{background:rgb(33,21,61)!important}

/* 11) phone Drive — same cause as the home (8): the list scrolled under the fixed bottom app rail, so the last row's
      «شارك / أعد تسمية / احذف / خيارات» sat under the rail. The page now scrolls in the area above the rail. */
@media (max-width:760px){
  html.yt-railv:has(> body[data-page="drive"]){height:100%;overflow:hidden}
  html.yt-railv body[data-page="drive"]{height:calc(100dvh - var(--yo-rail-h) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  html.yt-railv body[data-page="drive"] .y-main{padding-bottom:24px!important}
}

/* 12. nov7r12 walkthrough: Arabic placeholders inside LTR inputs (password «8 أحرف على الأقل») rendered back to front;
      while empty they take the page direction, and turn LTR again as soon as the user types. */
html[dir="rtl"] input[type="password"]:placeholder-shown,
html[dir="rtl"] input[dir="ltr"]:placeholder-shown{direction:rtl;text-align:right}
/* 13. nov7r12 walkthrough: on phones the Docs title bar showed «محفوظ محفوظ» — the section-6 title rule (written for Sheets)
      gave #saveSt a 10px font, so the text showed beside the dot+label that r5ds draws. The label stays, the raw text hides. */
@media (max-width:700px){
  :root #ed #titlebar .tmeta #saveSt[data-r5s]{font-size:0!important;line-height:11px!important;height:12px!important;min-width:0!important;gap:4px!important}
  :root #ed #titlebar .tmeta #saveSt[data-r5s]::after{font-size:10px!important;line-height:12px!important;height:12px!important}
  :root #ed #titlebar .tmeta #saveSt[data-r5s]::before{width:6px!important;height:6px!important}
}

/* 14 · r12: removing a document from the workspace (or a member) is a quiet action, not the page's primary purple button */
.w94quiet,.sibtn.w94rmq{background:transparent!important;color:#b42318!important;border:1px solid #f0c8c4!important;box-shadow:none!important}
.w94quiet:hover,.sibtn.w94rmq:hover{background:#fdf1f0!important}
.w94docs li{padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06)}
/* 15 · r12: the invitation banner's «أنشئ حسابك وانضم» link-button was clipped at 390 */
.w94inv a.sibtn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;white-space:nowrap;text-decoration:none;min-height:44px;box-sizing:border-box;max-width:100%}
.w94inv .w94row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ===== r22 (nov8r22, task 34c0c5ea): keyboard & screen-reader audit ===== */
/* 1) High-contrast / forced-colors (Windows contrast themes): box-shadow focus rings disappear there — draw a system-colour outline instead */
@media (forced-colors: active){
  :focus-visible{outline:3px solid Highlight!important;outline-offset:2px!important}
  .ysec{border:2px solid CanvasText!important}
  .y-dot,.ysec-chip{forced-color-adjust:none}
}
/* 2) A consistent keyboard ring where a control had none (zero specificity: an existing ring always wins) */
:where(a,button,[role=button],[role=tab],[role=menuitem],[role=option],[role=link],summary,select,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid #5b3fd6;outline-offset:2px}
html.dark :where(a,button,[role=button],[role=tab],[role=menuitem],[role=option],[role=link],summary,select,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:#b7a6ff}
/* 3) Fields that showed no ring at all: assistant box, mail compose body, mail reading pane */
.yoc-in:focus-visible,.cdlg .ed:focus-visible,iframe:focus-visible{outline:2px solid #5b3fd6!important;outline-offset:-2px!important}
html.dark .yoc-in:focus-visible,html.dark .cdlg .ed:focus-visible,html.dark iframe:focus-visible{outline-color:#b7a6ff!important}
/* 4) Visually-hidden file pickers: their visible button shows the ring */
label[role=button]:focus-visible,label:has(+ input.y-sr:focus-visible),label:has(> input.y-sr:focus-visible){outline:3px solid #5b3fd6!important;outline-offset:2px!important}
/* 5) Text fields whose ring was a soft shadow only: add a 2px outline so it survives zoom and low-contrast screens */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea):focus-visible{outline:2px solid #5b3fd6;outline-offset:1px}
html.dark :where(input,textarea):focus-visible{outline-color:#b7a6ff}
/* 6) Users who ask for less motion */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* 7) r22 leftover (c): Drive with hundreds of files on phones — the frosted-glass blur on the fixed top bar and bottom bar was re-painted
      over every row on each scroll frame (WebKit 390: ~22 fps with 500 files). On phones the bars are solid (also easier to read at
      high zoom), and the per-row icon buttons drop their unused positioning layer. */
@media (max-width:700px){
  .y-top,.y-rail{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important}
  html.dark .y-top,html.dark .y-rail{background:#1b1926!important}
  table tbody td .y-ib{position:static}
}

/* 8) the assistant box hid its own ring (outline:0!important) — the ring returns for keyboard focus only */
html .yoc .yoc-in:focus-visible{outline:2px solid #5b3fd6!important;outline-offset:2px!important}
html.dark .yoc .yoc-in:focus-visible{outline-color:#b7a6ff!important}

/* 9) High-contrast mode drops background colours, so buttons drawn only by their fill turned into bare words — give every button a system-colour frame there */
@media (forced-colors: active){
  button,.btn,.sibtn,.y-btn,[role=button],[role=tab],input[type=submit],input[type=button]{border:1px solid ButtonText!important}
  [role=tab][aria-selected=true],.btn.primary,.sibtn{border-width:2px!important}
}

/* r23: real outline (not a soft shadow) on the 8 fields r22 found: sign-in e-mail/password, account fields, Drive search + template chips, Sheets zoom */
html #se:focus-visible,html #sp:focus-visible,html #cc:focus-visible,html #cn:focus-visible,html #cn2:focus-visible,html #zoomR:focus-visible,html #yd-q:focus-visible,html .y-in:focus-visible,html a.yt-chip:focus-visible{outline:2px solid #5b3fd6!important;outline-offset:2px!important}
html.dark #se:focus-visible,html.dark #sp:focus-visible,html.dark #cc:focus-visible,html.dark #cn:focus-visible,html.dark #cn2:focus-visible,html.dark #zoomR:focus-visible,html.dark #yd-q:focus-visible,html.dark .y-in:focus-visible,html.dark a.yt-chip:focus-visible{outline-color:#b7a6ff!important}
/* r23: mail reading pane — the message body (iframe) shows a clear frame when reached by keyboard */
html.yo-kbd iframe:focus,html.yo-kbd .msg .mb:has(> iframe:focus){outline:3px solid #5b3fd6!important;outline-offset:-3px!important}
html.dark.yo-kbd iframe:focus,html.dark.yo-kbd .msg .mb:has(> iframe:focus){outline-color:#b7a6ff!important}
@media (forced-colors:active){html.yo-kbd iframe:focus{outline-color:Highlight!important}}