/* IGCSE360 shared desktop-window behaviour v4 Error 1 fix: maximised applications are promoted above the site chrome and keep their real title bar/window controls visible while their contents scroll. */ .sim-window-controls{display:flex!important;align-items:stretch!important;margin-left:auto!important;height:100%!important;letter-spacing:0!important;position:relative!important;z-index:3!important;flex:0 0 auto!important} .sim-window-controls button{width:46px;min-width:42px;height:100%;min-height:34px;border:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;display:grid!important;place-items:center!important;padding:0!important;font:500 14px/1 "Segoe UI",sans-serif!important;cursor:pointer!important} .sim-window-controls button:hover{background:rgba(127,127,127,.16)!important}.sim-window-controls button[data-sim-win="close"]:hover{background:#c42b1c!important;color:#fff!important} .sim-window-root{transition:box-shadow .16s ease,border-radius .16s ease} /* A maximised window is portalled directly under . This prevents an ancestor's overflow/transform/stacking context from clipping it beneath the IGCSE360 header. It intentionally sits above all site chrome. */ .sim-window-root.sim-maximized{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;z-index:2147483000!important;overflow:auto!important;overscroll-behavior:contain!important;box-shadow:none!important;background:#fff!important;isolation:isolate!important;transform:none!important} /* Keep whichever real application title bar this simulator uses pinned to the top of the maximised window. The three Windows controls therefore remain visible even after scrolling the application's own workspace. */ .sim-window-root.sim-maximized>.tab-row, .sim-window-root.sim-maximized>.app-titlebar, .sim-window-root.sim-maximized>.word-titlebar, .sim-window-root.sim-maximized>.excel-titlebar, .sim-window-root.sim-maximized>.ppt-titlebar, .sim-window-root.sim-maximized>.win-titlebar, .sim-window-root.sim-maximized>.win-title, .sim-window-root.sim-maximized .sim-max-titlebar{ position:sticky!important; top:0!important; z-index:2147483640!important; flex:0 0 auto!important; } .sim-window-root.sim-maximized .sim-window-controls{position:relative!important;z-index:2147483646!important} .sim-window-root.sim-maximized>.app-ui:not(.hidden),.sim-window-root.sim-maximized>.excel-shell,.sim-window-root.sim-maximized>.graphics-shell{min-height:calc(100dvh - 44px)} body.sim-window-maximized{overflow:hidden!important} .sim-window-root.sim-minimized{display:none!important} .sim-window-placeholder{display:none!important} .sim-restore-tray{position:fixed;right:18px;bottom:58px;z-index:10030;display:flex;flex-direction:column;gap:7px;max-width:min(360px,calc(100vw - 24px))} .sim-restore-chip{border:1px solid #cfd7e3;background:rgba(255,255,255,.96);color:#263348;box-shadow:0 12px 36px rgba(15,23,42,.2);border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left;font:600 12px/1.25 "Segoe UI",sans-serif} .sim-restore-chip .sim-chip-icon{width:24px;height:24px;border-radius:5px;background:#e8eef8;display:grid;place-items:center}.sim-restore-chip small{display:block;color:#667085;font-weight:500} .sim-task-companion{position:fixed;right:18px;top:78px;width:min(390px,calc(100vw - 36px));max-height:calc(100vh - 150px);z-index:10020;background:rgba(255,255,255,.97);border:1px solid #d7dfea;border-radius:14px;box-shadow:0 18px 55px rgba(15,23,42,.22);overflow:hidden;backdrop-filter:blur(14px);display:none} .sim-task-companion.visible{display:block}.sim-task-companion-head{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f6f8fb;border-bottom:1px solid #e1e6ee;padding:9px 11px}.sim-task-companion-head strong{font-size:12px}.sim-task-companion-head button{border:0;background:transparent;border-radius:6px;width:28px;height:28px;cursor:pointer}.sim-task-companion-head button:hover{background:#e7ebf2} .sim-task-companion-body{padding:11px;overflow:auto;max-height:calc(100vh - 235px);font-size:12px;color:#344054}.sim-task-companion-body h3{font-size:15px;margin:0 0 7px}.sim-task-companion-body p{line-height:1.45;margin:6px 0}.sim-task-companion-body .sim-checklist{font-size:11px;color:#667085;display:grid;gap:3px}.sim-task-companion-body .sim-feedback{font-size:11px;margin-top:7px;padding:7px;border-radius:7px;background:#f8fafc}.sim-task-companion-actions{display:flex;gap:6px;padding:9px 11px;border-top:1px solid #e1e6ee;background:#fff}.sim-task-companion-actions button{flex:1;border:1px solid #ccd6e3;background:#fff;border-radius:7px;padding:7px 6px;font-weight:700;font-size:11px;cursor:pointer}.sim-task-companion-actions button.primary{background:#2563eb;color:#fff;border-color:#2563eb}.sim-task-companion-actions button:disabled{opacity:.45;cursor:not-allowed} /* Keep the working application in view on larger screens while the page itself scrolls. */ @media (min-width:1000px) and (min-height:720px){ .sim-sticky-app{position:sticky!important;top:76px!important;align-self:start!important;z-index:8} .desktop.sim-sticky-desktop{position:sticky!important;top:76px!important;align-self:start!important;z-index:8} } @media(max-width:700px){.sim-task-companion{top:auto;right:8px;left:8px;bottom:56px;width:auto;max-height:42vh}.sim-task-companion-body{max-height:26vh}.sim-restore-tray{right:8px;left:8px;bottom:54px}.sim-restore-chip{width:100%}.sim-window-root.sim-maximized{inset:0!important;width:100vw!important;height:100dvh!important;border-radius:0!important}} /* Error 2: consistent Windows-style minimise / maximise / restore / close states. */ .sim-window-root.sim-minimized, .sim-window-root.sim-closed{display:none!important} .sim-window-root[aria-hidden="true"]{pointer-events:none!important} .sim-restore-chip:focus-visible,.sim-window-controls button:focus-visible{outline:2px solid #2563eb!important;outline-offset:-2px!important} .sim-window-controls button[aria-pressed="true"]{background:rgba(127,127,127,.10)!important} /* Keep the simulated Windows taskbar available when a desktop application is maximised. */ .sim-window-root.sim-maximized.sim-max-has-taskbar{ inset:0 0 var(--sim-taskbar-h,44px) 0!important; width:100vw!important; height:auto!important; } .sim-max-taskbar{ position:fixed!important; left:0!important;right:0!important;bottom:0!important; width:100vw!important; z-index:2147483500!important; margin:0!important; border-radius:0!important; } /* Error 3: application dialogs must always sit above a maximised simulator window. Maximised windows intentionally use a near-maximum z-index so ordinary chapter modal values (60-500) would otherwise be hidden underneath them. The shared dialog layer reserves the browser's highest CSS stacking level for modal UI. */ .modal, .modal-backdrop, dialog[open], [role="dialog"].sim-dialog-layer, .sim-dialog-layer{ z-index:2147483647!important; pointer-events:auto!important; } /* A modal's own window/content must remain interactive even when the underlying maximised application has isolation/overflow rules applied. */ .modal>.dialog, .modal-backdrop>.modal-window, .sim-dialog-layer>.dialog, .sim-dialog-layer>.modal-window{ position:relative; z-index:1!important; } /* Error 4: reliable viewport-following work surface. The previous position:sticky implementation could stop at a parent boundary, especially when the application itself was tall. A managed follower now pins the active practical workspace to the visible viewport on desktop/laptop screens while preserving its original place in the document. */ @media (min-width:720px){ .sim-follow-container{position:relative!important;top:auto!important;align-self:stretch!important} .sim-follow-target:not(.sim-follow-active):not(.sim-maximized):not(.sim-minimized):not(.sim-closed){position:relative!important;top:auto!important;left:auto!important;right:auto!important} .sim-follow-target.sim-follow-active{ position:fixed!important; top:var(--sim-follow-top,76px)!important; left:var(--sim-follow-left,0px)!important; right:auto!important; bottom:auto!important; width:var(--sim-follow-width,auto)!important; height:var(--sim-follow-height,auto)!important; max-width:calc(100vw - 16px)!important; max-height:var(--sim-follow-height,calc(100dvh - 90px))!important; margin:0!important; z-index:10010!important; transform:none!important; box-shadow:0 20px 58px rgba(15,23,42,.24)!important; isolation:isolate!important; } .sim-window-root.sim-follow-active, .desktop.sim-follow-active{overflow:auto!important;overscroll-behavior:contain!important} .desktop-wallpaper.sim-follow-active{overflow:hidden!important;overscroll-behavior:contain!important} .sim-follow-placeholder{display:block!important;visibility:hidden!important;pointer-events:none!important;min-width:0!important} } @media (max-width:719px){ .sim-follow-placeholder{display:none!important} .sim-follow-target.sim-follow-active{position:relative!important;top:auto!important;left:auto!important;width:auto!important;height:auto!important;max-height:none!important;box-shadow:inherit!important} } /* Error 24 — mobile/tablet fidelity without changing desktop Office behaviour. Narrow viewports keep real application chrome and move wide content into internal scrollers instead of creating page-level horizontal overflow. */ @media (max-width:719px){ html,body{max-width:100%;overflow-x:hidden} .sim-window-root{max-width:100%!important;min-width:0!important} .sim-window-controls{flex:0 0 auto!important} .sim-window-controls button{width:36px!important;min-width:34px!important;min-height:32px!important} .ribbon-tabs,.excel-tabs,.ribbon,.excel-ribbon,.app-switcher,.quick-row{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin} .modal,.modal-backdrop,.sim-dialog-layer{padding:8px!important} .modal>.dialog,.modal-backdrop>.modal-window,.sim-dialog-layer>.dialog,.sim-dialog-layer>.modal-window{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important} }