/* Yamama Sheets — module styles on top of the suite design system (app.css + plus.css) */
#ed{display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:var(--bg)}
#fxbar{display:flex;align-items:stretch;gap:6px;padding:5px 8px;background:var(--card);border-bottom:1px solid var(--line);min-height:40px}
#nameBox{width:96px;flex:none;border:1px solid var(--line2);border-radius:8px;padding:0 8px;font:600 13px/1 var(--ui);color:var(--ink);background:var(--soft);text-align:center;direction:ltr}
#nameBox:focus{outline:2px solid #33a06a;background:#fff}
#fxbar .fxbtn{flex:none;display:grid;place-items:center;width:34px;border-radius:8px;color:var(--brand);font:italic 700 14px/1 Georgia,serif}
#fxbar .fxbtn:hover{background:var(--hover)}
#fxbar .fxwrap{flex:1;position:relative;min-width:0}
#fxIn{width:100%;height:30px;min-height:30px;max-height:160px;resize:none;border:1px solid var(--line2);border-radius:8px;padding:5px 10px;font:14px/1.45 var(--ui);color:var(--ink);background:#fff;overflow:auto}
#fxIn.big{height:110px}
#fxIn:not(.big):not(:focus){overflow:hidden}
#fxIn:focus{outline:2px solid #33a06a;border-color:transparent}
#fxbar .ib{width:32px;height:32px}
#fxbar .fxok{display:none}
#ed.editing-cell #fxbar .fxok{display:inline-grid}
#work{flex:1;display:flex;min-height:0;position:relative}
#gridWrap{flex:1;position:relative;min-width:0;min-height:0;background:#fff}
.ysgrid{position:relative;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
/* w122-keys: the grid showed no sign of having focus when reached with Tab (WCAG 2.4.7); keyboard users now see a frame around it, mouse users do not (html[data-yo-kbd] comes from yo-kit) */
html[data-yo-kbd] .ysgrid:focus-within::after{content:'';position:absolute;inset:0;border:2px solid #6A5CF0;border-radius:3px;pointer-events:none;z-index:30}
.ysgrid .gcv{position:absolute;inset:0;pointer-events:none}
.ysgrid .gsc{position:absolute;inset:0;overflow:auto;z-index:2;outline:none;scrollbar-width:thin;scrollbar-color:#c4bdf0 transparent;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ysgrid .gsc::-webkit-scrollbar{width:12px;height:12px}
.ysgrid .gsc::-webkit-scrollbar-thumb{background:#cbc4f2;border-radius:10px;border:3px solid #fff;background-clip:padding-box}
.ysgrid .gsc::-webkit-scrollbar-thumb:hover{background:#9d92e8;background-clip:padding-box}
.ysgrid .gsc::-webkit-scrollbar-track{background:#faf9ff}
.ysgrid .gsc::-webkit-scrollbar-corner{background:#faf9ff}
.ysgrid .gsp{pointer-events:none}
.ysgrid .gov{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.ysgrid .gov>*{pointer-events:auto}
.ysgrid .ged{position:absolute;z-index:6;left:0;top:0;width:2px;height:2px;opacity:0;border:0;padding:3px 5px;margin:0;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word;line-height:1.3;background:#fff;color:var(--ink);caret-color:var(--brand);outline:none}
.ysgrid .ged.on{opacity:1;box-shadow:0 0 0 2px #217346,0 6px 18px rgba(29,26,69,.18);border-radius:1px}
.ysgrid .gac,.ysgrid .gsig{position:absolute;z-index:8;background:#fff;border:1px solid var(--line2);border-radius:10px;box-shadow:var(--sh3);font-size:13px}
.ysgrid .gac{min-width:260px;max-width:360px;padding:4px}
.ysgrid .aci{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:7px;cursor:pointer}
.ysgrid .aci b{font:600 13px/1.2 'Roboto Mono',monospace;color:var(--brand);direction:ltr;text-align:start}
.ysgrid .aci span{font-size:12px;color:var(--muted)}
.ysgrid .aci.on,.ysgrid .aci:hover{background:var(--brand-soft)}
.ysgrid .gsig{padding:7px 11px;max-width:420px;direction:ltr;text-align:left;font-family:'Roboto Mono',monospace;font-size:12.5px;color:var(--ink2)}
.ysgrid .gsig b{color:var(--brand)}.ysgrid .gsig u{text-decoration:none;background:#e9e5fd;border-radius:4px;padding:0 3px;color:var(--ink);font-weight:600}
.ysgrid .gsig small{display:block;font-family:var(--ui);margin-top:3px;color:var(--muted);direction:auto;text-align:start}
.ysgrid .gtip{position:absolute;z-index:9;max-width:280px;background:#fffef6;border:1px solid #e8dfb8;border-radius:10px;box-shadow:var(--sh);padding:8px 11px;font-size:13px;color:var(--ink);pointer-events:none;white-space:pre-wrap}
.ysgrid .gtip b{display:block;color:var(--brand);font-size:12px;margin-bottom:2px}
.ysgrid .gtip .rep{border-top:1px dashed #e8dfb8;margin-top:5px;padding-top:4px}
.ysgrid .ghd{position:absolute;z-index:7;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#fff;border:3px solid var(--brand);box-shadow:0 2px 6px rgba(29,26,69,.25);touch-action:none}
.ysgrid .gguide{position:absolute;z-index:5;background:#2e8b57;pointer-events:none}
.ysgrid .gguide.c{top:0;bottom:0;width:2px;margin-left:-1px}.ysgrid .gguide.r{left:0;right:0;height:2px;margin-top:-1px}
/* sheet tabs */
#sheetbar{display:flex;align-items:center;gap:4px;height:38px;padding:0 6px;background:var(--soft);border-top:1px solid var(--line);flex:none}
#sheetbar .ib{width:32px;height:32px}
#sheetbar .stabs{flex:1;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;align-items:flex-end;height:100%}
#sheetbar .stabs::-webkit-scrollbar{display:none}
.stab{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:9px 9px 0 0;font:500 13.5px/1 var(--ui);color:var(--ink2);white-space:nowrap;border:1px solid transparent;border-bottom:0;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.stab:hover{background:var(--hover)}
.stab[aria-selected=true]{background:#fff;color:var(--brand);font-weight:700;border-color:var(--line);box-shadow:0 -2px 0 var(--brand) inset}
.stab .tc{position:absolute;inset-inline:8px;bottom:3px;height:3px;border-radius:2px}
.stab input{width:120px;border:1px solid var(--brand2);border-radius:6px;padding:3px 6px;font:inherit}
.stab.drop-before{box-shadow:inset 3px 0 0 #2e8b57}
/* status */
#status .stats{display:flex;gap:12px;font-size:12.5px;color:var(--ink2);overflow:hidden;white-space:nowrap}
#status .stats b{font-weight:600;color:var(--ink)}
#status .mode{padding:0 8px 0 4px;white-space:nowrap}
#status .stats:not(:empty){border-inline-start:1px solid var(--line);padding-inline-start:10px;margin-inline-start:2px}
#status .stats .fcell{display:inline-flex;align-items:center;gap:5px;color:var(--ink2)}
#status .stats .fcell i{font-style:italic;font-weight:600;font-family:Georgia,'Times New Roman',serif;color:#5a4fc4}
#status .stats button{padding:0 4px}
#status input[type=range]{width:110px;accent-color:#2e8b57}
/* chart objects */
.ychart{position:absolute;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;min-width:160px;min-height:120px}
.ychart.sel{outline:2px solid #2e8b57;outline-offset:1px}
/* w128: in dark mode the chart card is dark too (its title was light text on a white card) */
html.dark .ychart{background:#1d1b2a;border-color:#3a3752}
.ychart .ych{display:flex;align-items:center;gap:4px;padding:4px 6px 0;height:30px;cursor:move;touch-action:none}
.ychart .ych b{flex:1;font-size:13px;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-inline:6px}
.ychart .ych .ib{width:28px;height:28px;opacity:.7}.ychart .ych .ib:hover{opacity:1}
.ychart .ycb{flex:1;position:relative;min-height:0;padding:4px 8px 8px}
.ychart canvas{position:absolute;inset:4px 8px 8px}
.ychart .yrs{position:absolute;inset-inline-end:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 50%,#9fd0b2 50%);border-end-end-radius:12px}
[dir=rtl] .ychart .yrs{cursor:nesw-resize;background:linear-gradient(225deg,transparent 50%,#9fd0b2 50%)}
/* dialogs */
.ysdlg .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.ysdlg .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ysdlg label.fl{margin-top:8px}
.ysdlg select,.ysdlg input[type=text],.ysdlg input[type=number],.ysdlg input:not([type]),.ysdlg textarea{width:100%}
.ysdlg .prev{margin-top:10px;padding:12px;border:1px dashed var(--line2);border-radius:10px;background:var(--soft);font-size:15px;min-height:46px;display:flex;align-items:center;justify-content:center;direction:ltr}
.ysdlg .tabsx{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.ysdlg .tabsx button{padding:8px 12px;border-radius:8px 8px 0 0;font-weight:600;color:var(--ink2);white-space:nowrap}
.ysdlg .tabsx button[aria-selected=true]{color:var(--brand);box-shadow:inset 0 -2px 0 var(--brand)}
.ysdlg .catlist{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px}
.ysdlg .catlist button{text-align:start;padding:7px 10px;border-radius:7px}
.ysdlg .catlist button[aria-pressed=true]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.ysdlg .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ysdlg .row>*{flex:1;min-width:0}
.ysdlg .chk{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:14px}
.ysdlg .chk input{width:18px;height:18px;accent-color:#2e8b57}
.ysdlg .bord{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ysdlg .bord button{height:42px;border:1px solid var(--line2);border-radius:8px;display:grid;place-items:center}
.ysdlg .bord button:hover{background:var(--hover)}
.ysdlg .rlist{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.ysdlg .ritem{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.ysdlg .ritem .sw0{width:26px;height:20px;border-radius:5px;border:1px solid var(--line2);flex:none}
.ysdlg .ritem span{flex:1;font-size:13.5px}
.ysdlg .fnl{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:4px}
.ysdlg .fnl button{display:flex;flex-direction:column;align-items:flex-start;padding:7px 10px;border-radius:7px;text-align:start}
.ysdlg .fnl button b{font-family:'Roboto Mono',monospace;color:var(--brand);font-size:13px;direction:ltr}
.ysdlg .fnl button small{color:var(--muted)}
.ysdlg .fnl button[aria-pressed=true]{background:var(--brand-soft)}
.ysdlg .fsig{font-family:'Roboto Mono',monospace;direction:ltr;text-align:left;background:var(--soft);border-radius:8px;padding:8px 10px;font-size:13px;margin-top:8px}
.ysdlg .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.ysdlg .tblprev{overflow:auto;max-height:220px;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.ysdlg .tblprev table{border-collapse:collapse;font-size:12.5px;width:100%}
.ysdlg .tblprev td,.ysdlg .tblprev th{border:1px solid var(--line);padding:4px 8px;white-space:nowrap}
.ysdlg .tblprev th{background:var(--soft);font-weight:600}
.ysdlg .pfields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ysdlg .pbox{border:1px dashed var(--line2);border-radius:10px;padding:8px;min-height:64px;background:var(--soft)}
.ysdlg .pbox h4{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.ysdlg .pchip{display:inline-flex;align-items:center;gap:4px;margin:2px;padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line2);font-size:13px;cursor:pointer}
.ysdlg .pchip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.ysdlg .ctypes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ysdlg .ctypes button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line2);border-radius:10px;font-size:12.5px}
.ysdlg .ctypes button[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600}
.ysdlg .ctypes .ic{width:22px;height:22px}
.ysdlg .chartprev{height:220px;position:relative;margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:6px}
.fpop{padding:8px;width:280px;max-width:calc(100vw - 16px)}
.fpop .fsearch{width:100%;margin:6px 0}
.fpop .fvals{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px;margin:4px 0}
.fpop .fvals label{display:flex;gap:8px;align-items:center;padding:4px 6px;font-size:13.5px;border-radius:6px}
.fpop .fvals label:hover{background:var(--hover)}
.fpop .fvals input{accent-color:#2e8b57;width:16px;height:16px}
.fpop .frow{display:flex;gap:6px;margin-top:6px}
.fpop .frow>*{flex:1}
.fpop>button.fi{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:7px;font-size:14px}
.fpop>button.fi:hover{background:var(--hover)}
.dvpop{min-width:180px;max-height:260px;overflow:auto;padding:4px}
.dvpop button{display:block;width:100%;text-align:start;padding:7px 10px;border-radius:7px}
.dvpop button:hover{background:var(--brand-soft)}
/* AI side panel */
#side .aisv{display:flex;flex-direction:column;height:100%}
#side .aihead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
#side .aihead b{flex:1;font-size:15px}
#side .aihead .badge2{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:600}
#side .aimodes{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}
#side .aimodes button{padding:6px 10px;border-radius:999px;border:1px solid var(--line2);font-size:13px;background:#fff}
#side .aimodes button[aria-pressed=true]{background:linear-gradient(135deg,#217346,#33a06a);color:#fff;border-color:transparent}
#side .ailog{flex:1;overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:10px}
#side .amsg{padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
#side .amsg.u{background:var(--brand-soft);align-self:flex-end;max-width:90%}
#side .amsg.a{background:#fff;border:1px solid var(--line);align-self:stretch}
#side .amsg .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#side .amsg code{font-family:'Roboto Mono',monospace;background:var(--soft);padding:2px 6px;border-radius:6px;direction:ltr;unicode-bidi:embed;display:inline-block}
#side .amsg table{border-collapse:collapse;font-size:12.5px;margin-top:6px;width:100%}
#side .amsg td,#side .amsg th{border:1px solid var(--line);padding:3px 6px}
#side .amsg .src{font-size:11.5px;color:var(--muted);margin-top:6px}
#side .aiform{border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:8px;align-items:flex-end}
#side .aiform textarea{flex:1;min-height:44px;max-height:140px;resize:none;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;font:14px/1.5 var(--ui)}
#side .aisugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
#side .aisugg button{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
#side .clist{padding:10px 12px;display:flex;flex-direction:column;gap:8px;overflow:auto}
#side .citem{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;cursor:pointer}
#side .citem small{color:var(--muted)}
.ysdark{}
@media (max-width:760px){
  #nameBox{width:64px;font-size:12px}
  #fxbar{padding:4px 6px;gap:4px}
  #fxbar .fxbtn{display:none}
  #sheetbar{height:42px}
  .stab{height:36px;padding:0 12px}
  .ysdlg .grid2,.ysdlg .pfields{grid-template-columns:1fr}
  .ysdlg .ctypes{grid-template-columns:repeat(4,1fr)}
  #status .stats .opt{display:none}
  #status .stats [data-stat]:not(.opt)::after{content:' \25BE';opacity:.7} /* w142: Sum on a phone opens the other totals */
  #status input[type=range]{display:none}
  .ysgrid .gac{min-width:220px}
}
/* context menu (shared with Docs) */
.cx{position:fixed;z-index:400;min-width:232px;max-width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;background:var(--card,#fff);border:1px solid #e3dff6;border-radius:12px;box-shadow:0 12px 36px rgba(37,27,110,.18),0 2px 6px rgba(37,27,110,.08);padding:5px;font-size:13.5px;animation:rise .12s ease}
.cx button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:7px 10px;border-radius:8px;color:inherit;font:inherit;text-align:start;cursor:pointer;min-height:32px}
.cx button:hover,.cx button:focus-visible{background:#f1eefd;outline:none}
.cx button[disabled]{opacity:.42;cursor:default;background:none}
.cx button .ic{width:16px;height:16px;flex-shrink:0;color:#5a4fc4}
.cx button .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx button .kb{color:var(--muted,#5d5a80);font-size:11.5px;direction:ltr;unicode-bidi:isolate}
.cx button .ar{color:#9c97bd;font-size:12px}
.cx .sep{height:1px;background:#eceaf7;margin:4px 6px}
.cx .hd{font-size:11px;color:#8a85ad;padding:6px 10px 2px;font-weight:600;letter-spacing:.02em}
.cx button.aiit .ic{color:#7c5cf0}
.cx button.aiit{background:linear-gradient(90deg,rgba(124,92,240,.07),transparent)}
.cx button.danger{color:#7a2fb8}.cx button.danger .ic{color:#7a2fb8}
.cx .bar{display:flex;gap:2px;padding:2px 2px 4px}
.cx .bar button{justify-content:center;flex:1;padding:6px 0;min-height:34px}
.cx .bar button .ic{margin:0}
.cx-back{display:none}
@media (pointer:coarse){.cx button{min-height:42px;font-size:15px}.cx{min-width:260px}}
@media (max-width:760px){.cx.sheetcx{left:0!important;right:0!important;top:auto!important;bottom:0!important;max-width:none;width:100%;border-radius:18px 18px 0 0;max-height:72dvh;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}.cx-back{display:block;position:fixed;inset:0;z-index:399;background:rgba(22,19,52,.32)}}

/* home: template + workbook thumbnails */
.tthumb .ysth{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f6f4fe 0%,#e9e4fc 100%);border-radius:inherit;overflow:hidden}
.tthumb .ysth::before{content:"";position:absolute;inset:14px;border-radius:8px;background:#fff;background-image:linear-gradient(#e6e2f6 1px,transparent 1px),linear-gradient(90deg,#e6e2f6 1px,transparent 1px);background-size:100% 18px,34px 100%;box-shadow:0 2px 10px rgba(33,115,70,.08)}
.tthumb .ysth::after{content:"";position:absolute;inset:14px 14px auto;height:18px;border-radius:8px 8px 0 0;background:linear-gradient(90deg,#217346,#33a06a)}
.tthumb .ysth .ic{position:relative;z-index:1;width:38px;height:38px;color:#217346;background:#fff;border-radius:12px;padding:8px;box-shadow:0 4px 14px rgba(33,115,70,.18);box-sizing:content-box}
.tthumb{position:relative}
.dthumb.ys{background:#fff;background-image:linear-gradient(#ece9f8 1px,transparent 1px),linear-gradient(90deg,#ece9f8 1px,transparent 1px);background-size:100% 20px,56px 100%}
.dthumb.ys>span{background:rgba(255,255,255,.85)}

/* once a conversation exists, suggestions shrink to one scrollable row so answers get the room */
#side .ailog:not(:empty)+.aisugg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
#side .ailog:not(:empty)+.aisugg button{flex:0 0 auto;white-space:nowrap}

/* audit 2026-10-13: a toast must never swallow a tap meant for the grid under it; only its action button is tappable */
body.ys .toast{pointer-events:none}
body.ys .toast button,body.ys .toast a{pointer-events:auto}

#sheetbar .stab{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#sheetbar .stab.lp{transform:scale(.96);box-shadow:0 0 0 2px #7b4bd0 inset}

.ys-ferr{margin:6px 0 2px;color:#5b3fd0;font-size:13px;font-weight:600}.ys-shake{animation:ysShake .4s}@keyframes ysShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* s1016l2: font-name box was squeezed to 16px in the phone ribbon */
#ribbon .rsel.font,.rrow .rsel.font{flex:0 0 auto;min-width:118px}
#ribbon .rrow .rsel,#ribbon .rrow .rsize{flex-shrink:0}

#toasts.ys-top{bottom:auto;top:calc(8px + env(safe-area-inset-top))}

/* ribbon overflow: groups that do not fit fold into «More» */
#ribbon .rbody>.rmore{flex:none}
#ribbon .rmorepop{position:absolute;inset-inline-end:8px;z-index:40;display:flex;flex-wrap:wrap;align-items:stretch;max-width:calc(100% - 16px);padding:8px 4px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(29,26,69,.16)}
#ribbon .rmorepop[hidden]{display:none}
#ribbon .rmorepop>.rg{border-inline-end:1px solid var(--line)}
#ribbon .rmorepop>.rg:last-child{border-inline-end:0}

/* qa1017: touch tablets (761-1100px) — 40px targets, header fits */
@media (pointer:coarse) and (min-width:761px) and (max-width:1100px){
  #ribbon .rb:not(.lg){min-width:40px;min-height:40px}
  #ribbon .rdd{min-width:40px;min-height:40px}
  #ribbon .rsize{height:40px}
  .ib{min-width:40px;min-height:40px}
  #titlebar .acct:not(:has(.av)) .nm{display:none}
  #titlebar .acct,.acct,#titlebar .acct .btn{min-width:40px;min-height:40px!important;justify-content:center}
  #fxbar .fxbtn{width:40px;min-height:40px}
  #zoomR{height:40px}
  .nvfoot .lnk{min-height:40px;padding:0 6px}
  .nvh button,.nvh a{min-height:40px}
}

/* sharing: people + shared with me (de5 port) */
.ppl{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.invrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.invrow input{flex:1 1 200px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.invrow input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.invrow .btn{min-height:40px}
.invmsg{min-height:20px;margin:8px 0 2px;font-size:13.5px;color:#15803d}.invmsg.bad{color:#b42318}
.invlist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.invlist li{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:10px}
.invlist .iem{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}
.invlist .irl{font-size:13px;font-weight:600;color:var(--brand)}
.invlist select.irl{min-height:40px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--brand);cursor:pointer;width:auto;flex:none} /* w139-sharing: per-person role */
.invlist .ist{font-size:12.5px;color:var(--muted)}
.invlist .ib{min-width:40px;min-height:40px}
.shlist{display:grid;gap:8px}
.shrow{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:56px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none}
.shrow:hover{border-color:var(--brand)}.shrow:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.shic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#e3f4ea;color:#17784a;flex:none}
.shb{display:grid;gap:2px;min-width:0}.shb b{font-size:15px;overflow-wrap:anywhere}.shb small{color:var(--muted);font-size:13px}
@media (max-width:520px){.invlist .ist{display:none}}
.pplh{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 10px}
.ppl .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;gap:0;background:none}
.ppl .seg button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;font:inherit;font-size:13.5px;color:var(--ink);background:var(--card);border:0;border-radius:0;cursor:pointer}
.ppl .seg button[aria-checked=true]{background:var(--brand-soft,rgba(0,0,0,.06));color:var(--brand);font-weight:700}
.ppl .seg button .ic{width:16px;height:16px}
.ppl .tiny{font-size:12.5px;line-height:1.6;margin:4px 0 0}.ppl .muted{color:var(--muted)}
@media (min-width:1600px){.hbody{max-width:1880px;grid-template-columns:264px minmax(0,1fr)}.hmain{padding:26px 44px 90px}.dlist-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}}

/* de5: share dialog radios read as two lines; shared list spans full width */
.radios{display:grid;gap:6px}
.radios .radio{align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;min-height:48px}
.radios .radio:has(input:checked){border-color:var(--brand);background:var(--brand-soft,rgba(0,0,0,.03))}
.radios .radio input{margin-top:3px}
.radios .radio>span{display:grid;gap:2px;min-width:0}.radios .radio>span b{font-weight:600}.radios .radio>span small{font-weight:400;color:var(--muted);font-size:12.5px;line-height:1.5}
#hlist .shlist,.dlist-grid>.shlist,#hlist>.empty{grid-column:1/-1}
.shlist{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
@media (max-width:760px){.shlist{grid-template-columns:1fr}}

body.ys>div>header .acct.hide-sm,body.ys>div>header .btn.ghost{background-color:rgba(0,0,0,.18)}
body.ys>div>header .acct.hide-sm:hover,body.ys>div>header .btn.ghost:hover{background-color:rgba(0,0,0,.28)}

/* c4 (review 20 Oct): phone touch targets in menus and the formula bar */
@media (max-width:640px){.pop>button,.smenu>button{min-height:44px}#fxbar .fxbtn{width:44px;min-width:44px}.savest{max-width:none;overflow:visible;text-overflow:clip}}

/* c4: «ملاءمة للعرض» readable in both themes */
#status .stfit span,#ysFit .fhd .ft span{color:inherit}
:root.dark #status .stfit{background:#24204a;border-color:#3b3668;color:#a7e8c2}
:root.dark #status .stfit[aria-pressed="true"]{background:#1f3a2c;border-color:#2f7d52}
:root.dark #ysFit .fhd{background:#1d1a3a;border-color:#2e2a55}
:root.dark #ysFit .fhd .ft{color:#c3c0e6}:root.dark #ysFit .fhd .ft b{color:#ebe9ff}
:root.dark #ysFit .fhd .fe{background:#24204a;color:#a7e8c2;border-color:#2f7d52}

#ysFit .fhd{background:#eef2f0!important}#ysFit .fhd .ft,#ysFit .fhd .ft>span{color:#24332b!important}
:root.dark #ysFit .fhd{background:#1d1a3a!important}:root.dark #ysFit .fhd .ft,:root.dark #ysFit .fhd .ft>span{color:#e6e4fa!important}

/* tap23: touch targets >=44 px on touch screens (owner gate) */
/*touch*/html.yo-touch #ribbon .rb:not(.lg),html.yo-touch #ribbon .rdd{min-width:44px;min-height:44px}html.yo-touch #ribbon .rsize{height:44px}

/* tap23b: every editor control >=44 px on touch screens (owner gate, touch-target audit) */
/*touch*/html.yo-touch #titlebar button,html.yo-touch #titlebar input,html.yo-touch #titlebar .yox-fab,html.yo-touch #titlebar .yox-aitg,html.yo-touch #status button,html.yo-touch #sheetbar button,html.yo-touch #fxbar button,html.yo-touch #fxbar input,html.yo-touch #ribbon button,html.yo-touch #ribbon input,html.yo-touch #ribbon select,html.yo-touch #rpanel button,html.yo-touch #rpanel input,html.yo-touch #rpanel select,html.yo-touch #thumbs button,html.yo-touch .rtabs button,html.yo-touch input#zoomR,html.yo-touch #nameBox{min-height:44px!important;min-width:44px!important;box-sizing:border-box}

/* tap23c: assistant panel + account + title controls >=44 px on touch screens */
/*touch*/html.yo-touch body .yox-aitg,html.yo-touch body .yox-fab,html.yo-touch body .acct,html.yo-touch body button[aria-label^="الحساب"],html.yo-touch body button[aria-label^="Account"],html.yo-touch body #titleIn,html.yo-touch body .title-in,html.yo-touch body .yoc-ib,html.yo-touch body .yoc-chip,html.yo-touch body .yoc-sugg button,html.yo-touch body .yoc-back,html.yo-touch body .yoc-send,html.yo-touch body .yoc-undo,html.yo-touch body [class*="yoc-"] button{min-height:44px!important;min-width:44px!important;box-sizing:border-box}

/* range filters v1 (s-filt.js) */
.fpanel{position:fixed;z-index:3000;background:var(--bg,#fff);color:var(--ink,#1d1b2e);border:1px solid var(--line,#dfe3e8);border-radius:12px;box-shadow:0 14px 40px rgba(20,30,40,.22);display:flex;flex-direction:column;font-size:14px;overflow:hidden}
.fpanel .fph{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line,#e6e9ed)}
.fpanel .fph b{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpanel .fpst{flex:1;font-size:12.5px;color:#217346;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpanel .fpx{border:0;background:transparent;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:inherit}
.fpanel .fpx:hover{background:#f1f3f5}
.fpanel .fpb{overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.fpanel .fsec{display:flex;flex-direction:column;gap:6px}
.fpanel .fsort{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fpanel .fbt{display:flex;align-items:center;gap:6px;border:1px solid var(--line,#dfe3e8);background:#fafbfc;border-radius:8px;min-height:36px;padding:4px 8px;cursor:pointer;font:inherit;color:inherit;text-align:start}
.fpanel .fbt:hover{background:#eef6f1;border-color:#b9d9c5}
.fpanel .fbt svg{width:16px;height:16px;flex:none}
.fpanel .fsl{font-size:12px;color:#5b6470;font-weight:600}
.fpanel select,.fpanel input:not([type=checkbox]){font:inherit;font-size:14px;min-height:36px;border:1px solid var(--line,#cfd5db);border-radius:8px;padding:4px 8px;background:#fff;color:inherit;width:100%;box-sizing:border-box}
.fpanel .frow2{display:flex;gap:6px}
.fpanel .frow2 input[hidden]{display:none}
.fpanel .fsw{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fpanel .fsw .fsl{flex-basis:100%}
.fpanel .fswb{width:36px;height:36px;border-radius:8px;border:1px solid var(--line,#cfd5db);background:#fff;padding:4px;cursor:pointer}
.fpanel .fswb i{display:grid;place-items:center;width:100%;height:100%;border-radius:5px;border:1px solid rgba(0,0,0,.12);font-style:normal;font-weight:800}
.fpanel .fswb.on{outline:2px solid #217346;outline-offset:1px}
.fpanel .fvals{max-height:200px;overflow:auto;border:1px solid var(--line,#e2e6ea);border-radius:8px;padding:2px}
.fpanel .fvals label{display:flex;align-items:center;gap:8px;min-height:34px;padding:2px 8px;border-radius:6px;cursor:pointer}
.fpanel .fvals label:hover{background:#f4f6f8}
.fpanel .fvals label[hidden]{display:none}
.fpanel .fvals small{margin-inline-start:auto;opacity:.6}
.fpanel .fvals input{width:18px;height:18px;accent-color:#217346}
.fpanel .fadv summary{cursor:pointer;font-weight:600;font-size:13px;min-height:32px;display:flex;align-items:center}
.fpanel .fseg{display:flex;border:1px solid var(--line,#cfd5db);border-radius:8px;overflow:hidden;margin:4px 0 8px}
.fpanel .fseg button{flex:1;min-height:36px;border:0;background:#fff;font:inherit;font-size:13px;cursor:pointer;color:inherit}
.fpanel .fseg button.on{background:#217346;color:#fff}
.fpanel .fpf{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--line,#e6e9ed);justify-content:flex-end}
.fpanel .fpf .btn{min-height:36px}
.fpanel .fpf .pri{margin-inline-start:auto}
.fpanel.fmulti .fml{display:grid;grid-template-columns:80px 1fr 110px;gap:6px;align-items:center}
.fpanel.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-height:86vh!important;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0)}
.fpanel.sheet .fph{padding:8px 12px}
.fpanel.sheet .fpx,.fpanel.sheet .fbt,.fpanel.sheet .fswb,.fpanel.sheet .fseg button,.fpanel.sheet .fpf .btn,.fpanel.sheet .fadv summary{min-height:44px;min-width:44px}
.fpanel.sheet select,.fpanel.sheet input:not([type=checkbox]){min-height:44px;font-size:16px}
.fpanel.sheet .fvals label{min-height:44px}
.fpanel.sheet .fvals input{width:22px;height:22px}
.fpanel.sheet .fswb{width:44px;height:44px}
.fpanel.sheet .fvals{max-height:30vh}
.fpanel.sheet .fpf .btn{flex:1 1 30%}
.fpanel.sheet .fpf .pri{flex-basis:100%}
#status .stfilt{display:inline-flex;align-items:center;gap:6px;border:1px solid #b9d9c5;background:#eef6f1;color:#17603a;border-radius:999px;padding:2px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;min-height:26px;white-space:nowrap}
#status .stfilt svg{width:14px;height:14px}
#status .stfilt small{font-weight:500;opacity:.8}
#status .stfilt[hidden]{display:none}
html.yo-touch #status .stfilt{min-height:44px}
.fpanel.sheet select{min-height:44px!important}/*beats yo-kit select:not([multiple]):not([size]) min-height:40px (0,3,1)*/

/* hdr-login (owner 10:53 AM Oct 24): the account/sign-in control in the titlebar is a proper button aligned with «مشاركة»; it never wraps or gets pushed off-screen when the assistant panel narrows the page. */
#titlebar{container-type:inline-size;container-name:ystb;min-width:0}
#titlebar>*{flex-shrink:0}
#titlebar .tmeta{flex:1 1 auto;min-width:0}
#titlebar .title-in{min-width:0!important;max-width:100%}
#titlebar .acct{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:34px;min-height:34px!important;padding:0 12px;margin-inline-start:6px;border:1px solid var(--line2);border-radius:9px;background:var(--card);color:var(--ink);font:600 13.5px/1 inherit;font-family:inherit;white-space:nowrap;cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s}
#titlebar .acct:hover{background:var(--soft);border-color:var(--line2)}
#titlebar .acct:focus-visible{outline:2px solid #8b80e8;outline-offset:2px}
#titlebar .acct .ic{width:17px;height:17px;margin:0}
#titlebar .acct .nm{display:inline-block;line-height:1;max-width:140px;overflow:hidden;text-overflow:ellipsis}
#titlebar .acct:has(.av){padding:0 10px 0 4px;border-radius:99px}
[dir=rtl] #titlebar .acct:has(.av),html[dir=rtl] #titlebar .acct:has(.av){padding:0 4px 0 10px}
#titlebar .acct .av{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12.5px;line-height:1}
@container ystb (max-width:900px){#titlebar .acct .nm{display:none}#titlebar .acct{width:34px;padding:0}#titlebar .acct:has(.av){width:34px;padding:0}}
@media(max-width:600px){#titlebar .acct{width:40px;height:40px;min-height:40px!important;padding:0}#titlebar .acct .nm{display:none}}
html.yo-touch #titlebar .acct{min-width:44px;min-height:44px!important;height:44px}

/* w60 390px pass: an empty dir=auto box resolves to LTR, so the Arabic hint sat on the left with «=» on the wrong side; while the hint shows, follow the page direction. Typed text still picks its own direction (dir=auto). */
html[dir=rtl] #fxIn:placeholder-shown{direction:rtl;text-align:right}
/* w60 deploy 2026-10-29T22:36:05Z 509731054 */
/* w60 390px pass: the touch rule sizes #fxbar inputs to 40px+ but missed the formula textarea (36px tall on phones) */
html.yo-touch #fxbar #fxIn:not(.big){height:40px;min-height:40px}
/* w60 deploy b 2026-10-29T22:48:22Z 2208312827 */

/* w88: imported pictures */
.ypic{position:absolute;pointer-events:none;object-fit:fill;z-index:2;user-select:none}
/* w91r: dark mode — the «Yamama AI» ribbon tab kept its light-theme purple on the dark ribbon (2.76:1) */
html.dark .rtab.ai,html.dark .rtab.ai .ic{color:#c9bcff}

/* w169-sheets-desktop-ribbon (task 65ab83b4): Sheets desktop chrome at 1280/1440 and a 1229 px window, EN and AR, measured against Excel for the web. (1) Insert and Formulas wrapped a second row of small buttons under the big ones (Refresh pivots; Formula helper / Explain formula), so the ribbon grew from 148 to 183 px and the formula bar and grid jumped 35 px on every tab switch; the small buttons now stack beside the big ones as in Excel, and every tab keeps one height. (2) «Merge & center» was cut to «Merge &» and the second line of «Conditional formatting» was hidden behind its arrow; big split-button labels stay on one line and two-line labels above an arrow get the room they need. (3) Cell styles (and any tall gallery) flipped above its button to the top of the window and covered the ribbon and the header; tall ribbon menus are capped to the room below the ribbon so they open under their button (and stop above the folded assistant card). (4) Desktop mouse only (touch keeps its 44 px rules): split-button arrows, the font-size arrow and the lower half of big split buttons (Paste, AutoSum, Merge) grow from 16/20/18 px to 24 px, the zoom slider from 16 to 24 px, as WCAG 2.5.8 asks; ribbon groups are 6 px tighter so these wider targets do not push the Number or Styles group into «More» at 960–1229 px. (5) When the assistant is folded to its card at the bottom corner, the status bar zoom and the sheet tabs keep clear of it instead of sitting under it. (6) A long workbook name ends in «…» instead of being cut mid-letter. */
#rpanel .rgi:has(>.rgr>.rb.lg,>.rgr>.rsplit.lg):has(>.rgr+.rgr){flex-direction:row;align-items:center;gap:2px}
#rpanel .rgi:has(>.rgr>.rb.lg,>.rgr>.rsplit.lg)>.rgr:not(:has(.lg)){flex-direction:column;gap:1px}
#rpanel .rsplit.lg>.rb.lg .bl{white-space:nowrap;max-width:none}
#rpanel .rb.lg:has(>.ic.dd){gap:2px;padding-top:4px}
#rpanel .rb.lg:has(>.ic.dd)>.ic.dd{margin-top:-3px;flex:none}
#rpanel .rb.lg:has(>.ic.dd)>.bl{flex:none}
.pop.vgpop,body>.pop[role=menu]{max-height:min(620px,calc(100vh - 200px))}
body>.pop[role=menu]{overflow-y:auto}
@media (min-width:761px){
 html:not(.yo-touch) #ribbon .rbody>.rg{padding-inline:5px}
 html:not(.yo-touch) #ribbon .rsplit:not(.lg)>.rdd{width:24px}
 html:not(.yo-touch) #ribbon .rsize>.rdd{width:24px}
 html:not(.yo-touch) #ribbon .rsplit.lg>.rb{height:54px}
 html:not(.yo-touch) #ribbon .rsplit.lg>.rdd{height:24px}
 html:not(.yo-touch) #status #zoomR{height:24px}
 html.yoc-desk.yoc-collapsed:not(.yo-ai-hidden) #status{padding-inline-end:304px}
 html.yoc-desk.yoc-collapsed:not(.yo-ai-hidden) .pop.vgpop,html.yoc-desk.yoc-collapsed:not(.yo-ai-hidden) body>.pop[role=menu]{max-height:min(620px,calc(100vh - 290px))}
 html.yoc-desk.yoc-collapsed:not(.yo-ai-hidden) #sheetbar .stabs{margin-inline-end:300px}
 #titlebar #titleIn{text-overflow:ellipsis}
}
/* end w169-sheets-desktop-ribbon */

/* nov7r15: on a full phone header the command search («الأوامر») is placed in the title block; that block is a column, so the
   search sat under the title and pushed the name half out of the bar (seen in Safari and Chrome at 390). The title and the search
   now share one row, and the save state stays under the title. */
@media (max-width:760px){
  :root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar .tmeta:has(>.yox-fab),:root #ed #titlebar .tmeta:has(>.yox-fab){flex-direction:row!important;align-items:center!important;justify-content:flex-start!important}
  :root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar .tmeta:has(>.yox-fab) #titleIn,:root #ed #titlebar .tmeta:has(>.yox-fab) #titleIn{flex:1 1 auto!important;width:auto!important;min-width:0!important}
  :root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar .tmeta:has(>.yox-fab)>.yox-fab,:root #ed #titlebar .tmeta:has(>.yox-fab)>.yox-fab{flex:none!important;order:2;margin:0!important}
  :root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar .tmeta:has(>.yox-fab) #saveSt,:root #ed #titlebar .tmeta:has(>.yox-fab) #saveSt{max-width:calc(100% - 58px)!important}
}
/* nov7r16: on a phone the file name gets its own full-width row under the icons (r15 left it 14 px wide) */
@media (max-width:480px){
:root #ed #titlebar{flex-wrap:wrap!important;height:auto!important;min-height:var(--tb-h);row-gap:0!important;align-content:flex-start}
:root #ed #titlebar>.tmeta,:root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar>.tmeta{order:99!important;flex:1 0 100%!important;width:100%!important;max-width:none!important;margin:0!important;padding:0 6px 4px!important;box-sizing:border-box;flex-direction:row!important;align-items:center!important;gap:6px}
:root #ed #titlebar>.tmeta #titleIn,:root.yo-touch.yo-touch.yo-touch.yo-touch #ed #titlebar>.tmeta #titleIn{flex:1 1 auto!important;width:auto!important;min-width:0!important;font-size:16px!important;height:38px!important;min-height:38px!important}
:root #ed #titlebar>.tmeta #saveSt{flex:none!important;max-width:none!important}
:root #ed #titlebar>.tsp{flex:1 1 0!important}
}

/* r17: «share with every member of the workspace» row in the share dialog */
.orgall{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 6px}.orgall[hidden]{display:none}.orgall .orgallb{min-height:40px;display:inline-flex;align-items:center;gap:8px;max-width:100%;white-space:normal;text-align:start;border:1px solid var(--line,#d9d6ee);background:var(--card,#fff);color:var(--ink,#1d1a33);border-radius:10px;padding:6px 12px;font:inherit;font-weight:600;cursor:pointer}.orgall .orgallb:hover{border-color:#6a5cf0}.orgall .orgallb svg{flex:0 0 auto;color:#6a5cf0}.orgall .orgsel{min-height:40px;border-radius:10px;border:1px solid var(--line,#d9d6ee);padding:0 10px;font:inherit;max-width:100%}.orgall .orgallh{flex:1 1 100%;margin:0}