/* r5ds.css — Docs + Sheets phone editor (task b0318a7e). Everything is scoped to html.r5, which r5ds.js sets only on phones (<=760px) inside the editor. */
.r5-bar,.r5-tl,.r5-hd,.r5-q,.r5-x{display:none}
@media (max-width:760px){
html.r5 .r5-tl{display:inline-flex;align-items:center;justify-content:center}
html.r5 .r5-tl .r5i{width:20px;height:20px}
html.r5 .r5-tl[aria-pressed=true]{background:rgba(123,63,228,.14);color:#5b2bb5;border-radius:12px}
html.r5 #saveSt,html.r5 .savest{white-space:nowrap!important}
html.r5 .rtabs{display:none!important}
html.r5.r5-tabs .rtabs{display:flex!important}
html.r5 .yox-aitg{display:none!important}
html.r5-docs #yoStatBtn,html.r5-docs #yoTools{display:none!important}
html.r5-docs .r5-hd{display:inline-flex;align-items:center;justify-content:center;width:auto!important;min-width:60px;padding:0 12px!important;font:inherit;font-weight:800;font-size:15px}
html.r5-docs .r5-hd[aria-pressed=true]{background:rgba(123,63,228,.16);color:#5b2bb5}
html.r5.yoc-collapsed #yoc{visibility:hidden!important;pointer-events:none!important}
html.r5 .r5-bar{display:flex;position:fixed;z-index:60;inset-inline-end:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
html.r5-sheets .r5-bar{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
html.r5 .r5-bar>button{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px 0 12px;border-radius:999px;border:0;font:inherit;font-size:16px;font-weight:700;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;color:#3b1366;box-shadow:0 0 0 1.5px #d9cbf6 inset,0 10px 24px -12px rgba(59,19,102,.6)}
html.r5 .r5-bar .r5-sp{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:linear-gradient(135deg,#7b3fe4,#c04bd8);color:#fff}
html.r5 .r5-bar .r5i{width:17px;height:17px}
html.r5.yoc-phone:not(.yoc-collapsed) .r5-bar{display:none!important}
html.r5-docs .ProseMirror{padding-bottom:84px!important}
html.r5.yoc-phone:not(.yoc-collapsed)>body{height:100dvh!important;max-height:100dvh!important}
html.r5.yoc-phone:not(.yoc-collapsed){--r5h:min(52dvh,70dvh,calc(var(--yoc-vh,100dvh) - 20px))}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc.yoc{top:calc(var(--yoc-vt,0px) + var(--yoc-vh,100dvh) - var(--r5h))!important;bottom:auto!important;height:var(--r5h)!important;max-height:52dvh!important;width:100%!important;max-width:100%!important;left:0!important;right:0!important;border-radius:22px 22px 0 0!important;overflow:hidden!important;box-shadow:0 -18px 40px -16px rgba(20,8,40,.45)!important;display:flex!important;flex-direction:column!important}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .yoc-h{border-radius:22px 22px 0 0!important;padding-top:14px!important;min-height:56px!important}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .yoc-back,html.r5.yoc-phone #yoc .yoc-exp{display:none!important}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .r5-x{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;margin-inline-start:2px}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .r5-x .r5i{width:20px;height:20px}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .yoc-drag::after{width:44px!important;height:5px!important;margin-left:-22px!important;background:rgba(255,255,255,.75)!important}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .r5-q{display:flex;gap:8px;overflow-x:auto;padding:8px 10px 2px;flex:none;scrollbar-width:none}
html.r5 #yoc .r5-q::-webkit-scrollbar{display:none}
html.r5 #yoc .r5-c{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid #d9cbf6;background:#f6f1ff;color:#3b1366;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .yoc-sugg{display:none!important}
html.r5.dark .r5-bar>button,html.r5 body.dark .r5-bar>button{background:#221b30;color:#e6dbff;box-shadow:0 0 0 1.5px #4a3a6e inset,0 10px 24px -12px rgba(0,0,0,.8)}
html.r5.dark #yoc .r5-c,html.r5 body.dark #yoc .r5-c{background:#2a2140;border-color:#4a3a6e;color:#e6dbff}
}
/* r6: save status like Docs */
html.r5 #saveSt[data-r5s]{display:inline-flex!important;align-items:center;gap:6px;height:20px!important;line-height:20px!important;min-width:68px;font-size:0!important;white-space:nowrap!important;overflow:visible;vertical-align:middle;color:inherit}
html.r5 #saveSt[data-r5s]::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#16a34a;box-sizing:border-box}
html.r5 #saveSt[data-r5s=saving]::before{background:transparent;border:2px solid #b08be6;border-top-color:transparent;animation:r5spin .8s linear infinite}
html.r5 #saveSt[data-r5s]::after{content:attr(data-r5l);font-size:12px;line-height:20px;font-weight:600;display:block;height:20px}
@keyframes r5spin{to{transform:rotate(360deg)}}

/* r6: dark mode reaches the sheet — grid paper, formula box, sheet tabs and status bar follow the app's dark setting */
@media screen{
:root.dark #gridWrap{background:#1b1a26}
:root.dark #gridWrap canvas{filter:invert(.9) hue-rotate(180deg)}
:root.dark .ysgrid .ged{background:#1d1a3a;color:#ebe9ff}
:root.dark .ysgrid .gac,:root.dark .ysgrid .gsig{background:#1d1a3a}
:root.dark .ysgrid .gsc::-webkit-scrollbar-track,:root.dark .ysgrid .gsc::-webkit-scrollbar-corner{background:#1b1a26}
:root.dark .ysgrid .gsc::-webkit-scrollbar-thumb{border-color:#1b1a26;background:#4a4580}
:root.dark #fxIn,:root.dark #nameBox{background:#1d1a3a;color:#ebe9ff;border-color:#3b3668}
:root.dark .stab[aria-selected=true]{background:#1d1a3a;color:#a7e8c2}
:root.dark #status{background:#141230;color:#c3c0e6;border-color:#2e2a55}
:root.dark .yox-aitg,:root.dark .yox-fab{background:#1d1a3a;color:#ebe9ff;border-color:#3b3668}
}

/* r6: dark mode on the documents/workbooks home — headings, template names, side menu and empty-state text were dark on dark (crawl: 1.03–2.6:1) */
@media screen{
:root.dark #home,:root.dark #home h1,:root.dark #home h2,:root.dark #home h3,:root.dark #home .tcard b,:root.dark #home b{color:var(--ink)!important}
:root.dark #home .hnav span,:root.dark #home p,:root.dark #home small,:root.dark #home .tcard span{color:var(--ink2)!important}
:root.dark #home .nvh,:root.dark #home .nvempty{color:#a9a5d4!important}
:root.dark #home .lnk{color:#b9b0ff!important}
:root.dark .rtab[aria-selected=true]{color:#c4bcff}
:root.dark i[style*="Georgia"]{color:#c4bcff}
}

@media screen{
:root.dark body{background:var(--bg)!important}
}

/* r6: chart header buttons were 28px on phone (crawl H07) — 40px touch targets */
html.r5 .ychart .ib{min-width:40px!important;min-height:40px!important;width:40px!important;height:40px!important}
@media screen{
:root.dark .yoc-custl,:root.dark .yoc-custl span{color:#cbbcff!important}
:root.dark .yoc-up .yoc-custl:hover{background:var(--hover)}
}
@media screen{
:root.dark .rgl,:root.dark .pop small,:root.dark [role=dialog] small,:root.dark [role=listbox] small{color:#b4b0dc}
}

/* r6: assistant suggestion chips wrap onto whole rows (crawl H04: «Insert a chart» was cut by the chip row), as in Docs */
html.r5.yoc-phone:not(.yoc-collapsed) #yoc .r5-q{flex-wrap:wrap!important;overflow:visible!important;padding:8px 12px 2px!important}
@media screen{
/* r6: dark mode inside Sheets sheets/menus the crawl opened (borders sheet, file drop box) */
:root.dark .vg-it{background:var(--card)!important;border-color:var(--line2)!important;color:var(--ink)}
:root.dark .vg-row,:root.dark .vg-row span{color:var(--ink)!important}
:root.dark .vg-h{color:var(--ink2)!important}
:root.dark .drop b{color:var(--ink)!important}
:root.dark .drop small,:root.dark .drop .hint{color:var(--ink2)!important}
}

/* r6b: dark mode — file-drop box was a light panel under light text; sign-in label and the red «move to trash» item were dark on dark (live crawl 05:08Z) */
@media screen{
:root.dark .drop,:root.dark #impDrop{background:#1d1a3a!important;border-color:#4a4580!important}
:root.dark #titlebar .acct,:root.dark #titlebar .acct .nm,:root.dark .acct .nm{color:#ebe9ff}
:root.dark .pop>button.danger,:root.dark .pop>button.danger span,:root.dark .pop>button.danger .ic,:root.dark .smenu>button.danger,:root.dark [role=menu] .danger,:root.dark [role=menu] .danger span{color:#ff9fb0}
}