/* Full-screen spreadsheet workbench shared by the exercise and ACH4 labs. */ :root { --ss-navy: #17365d; --ss-blue: #217346; --ss-line: #d7dde5; --ss-shadow: 0 18px 48px rgba(15, 23, 42, .22); } html, body.spreadsheet-workspace { width: 100%; height: 100%; height: 100dvh; margin: 0; overflow: hidden; } body.spreadsheet-workspace { box-sizing: border-box; padding: 0 !important; display: grid; grid-template-rows: auto auto minmax(0, 1fr); color: #172033; background: #eef2f6; } /* Keep the static teaching markup and Univer's temporary A1 viewport out of sight until the task window, workbook data and saved viewport are ready. visibility preserves the grid's dimensions, so the engine never measures a display:none container. The first-run mode chooser remains usable above it. */ body.spreadsheet-workspace.ss-boot-pending > :not(.ss-boot-screen):not(.ss-mode-dialog-backdrop) { visibility: hidden !important; } body.spreadsheet-workspace.ss-boot-pending > .ss-mode-dialog-backdrop, body.spreadsheet-workspace.ss-boot-pending > .ss-mode-dialog-backdrop * { visibility: visible !important; } .ss-boot-screen { position: fixed; inset: 0; z-index: 29990; display: none; place-items: center; padding: 18px; box-sizing: border-box; visibility: visible !important; color: #172033; background: #eef2f6; } body.spreadsheet-workspace.ss-boot-pending > .ss-boot-screen { display: grid; } .ss-boot-screen[hidden] { display: none !important; } .ss-boot-card { width: min(390px, 100%); padding: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; box-sizing: border-box; border: 1px solid #cbd5e1; border-top: 4px solid var(--ss-blue); border-radius: 10px; box-shadow: 0 14px 36px rgba(15, 23, 42, .14); background: #fff; } .ss-boot-card strong { font-size: 17px; } .ss-boot-card > span:last-child { grid-column: 2; color: #526071; font-size: 13px; } .ss-boot-spinner { grid-row: 1 / span 2; width: 24px; height: 24px; border: 3px solid #d8e1eb; border-top-color: var(--ss-blue); border-radius: 50%; animation: ss-boot-spin .8s linear infinite; } @keyframes ss-boot-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ss-boot-spinner { animation: none; } } body.spreadsheet-workspace > .skip-link { position: fixed; z-index: 120; } .ss-appbar { width: 100%; max-width: 100%; min-width: 0; min-height: 38px; padding: 4px 8px; padding-top: max(4px, env(safe-area-inset-top)); padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 6px; color: #fff; background: var(--ss-navy); border-bottom: 1px solid rgba(255, 255, 255, .16); box-sizing: border-box; overflow: hidden; } .ss-appbar-title { min-width: 0; margin-right: auto; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-appbar-actions, .ss-mode-switch { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .ss-appbar button { min-height: 28px; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; color: #fff; background: rgba(255, 255, 255, .08); font: inherit; font-size: 13px; cursor: pointer; } .ss-appbar button:hover, .ss-appbar button.active { background: rgba(255, 255, 255, .22); } .ss-appbar button:focus-visible { background: rgba(255, 255, 255, .22); outline: 2px solid #fff; outline-offset: 1px; } /* nav.js initially appends this launcher to . spreadsheet_ui.js moves it into this row immediately before the workbook title, so a closed drawer uses no worksheet width and never needs a separate top navigation bar. */ body.spreadsheet-workspace .ss-appbar > .ict-nav-toggle { position: static !important; inset: auto !important; z-index: auto !important; flex: 0 0 32px; width: 32px; min-width: 32px; height: 30px; min-height: 30px; margin: 0; padding: 0 !important; justify-content: center; border: 1px solid rgba(255, 255, 255, .34) !important; border-left: 3px solid #f59e42 !important; border-radius: 4px !important; box-shadow: none; transform: none !important; color: #fff !important; background: rgba(255, 255, 255, .08) !important; backdrop-filter: none; } body.spreadsheet-workspace .ss-appbar > .ict-nav-toggle > span:not(.icon) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } body.spreadsheet-workspace .ss-appbar > .ict-nav-toggle > .icon { font-size: 18px; line-height: 1; } body.spreadsheet-workspace .ss-appbar > .ict-nav-toggle:hover, body.spreadsheet-workspace .ss-appbar > .ict-nav-toggle:focus-visible { color: #fff !important; background: rgba(255, 255, 255, .22) !important; } /* Keep the workbench controls above the drawer. The drawer and its backdrop start below the complete (possibly wrapped) app bar, whose height is kept in sync by ResizeObserver. */ body.spreadsheet-workspace > .ict-nav-overlay { top: var(--ss-appbar-bottom, 39px); right: 0; bottom: 0; left: 0; height: auto; max-width: 100vw; max-height: calc(100dvh - var(--ss-appbar-bottom, 39px)); overflow: hidden; } body.spreadsheet-workspace > .ict-nav-overlay .ict-nav-panel { width: min(336px, 100vw); max-width: 100vw; border-right: 1px solid #b9c5d3; box-shadow: 10px 0 34px rgba(15, 23, 42, .25); } body.spreadsheet-workspace > .ict-nav-overlay .ict-nav-panel-header { min-height: 58px; box-sizing: border-box; border-bottom: 3px solid #e86f16; background: var(--ss-navy); } body.spreadsheet-workspace > .ict-nav-overlay .ict-nav-section-header { min-height: 48px; padding: 8px 14px; border-bottom-color: #e4e9ef; } body.spreadsheet-workspace > .ict-nav-overlay .ict-nav-section.current > .ict-nav-section-header { background: #eef6f1; } body.spreadsheet-workspace > .ict-nav-overlay .ict-nav-link.current { box-shadow: inset 4px 0 var(--ss-blue); color: #123f2a; background: #e8f3ec; } body.spreadsheet-workspace > .ict-nav-overlay .ict-nav-handle { display: none !important; } .ss-mode-switch button[aria-pressed="true"] { color: #17365d; background: #fff; border-color: #fff; font-weight: 700; } body.spreadsheet-workspace > #excel-ui { min-width: 0; min-height: 0; margin: 0 !important; padding: 4px 6px 5px !important; position: relative !important; inset: auto !important; z-index: 20; box-sizing: border-box; border-bottom: 1px solid var(--ss-line); box-shadow: none; background: #fff; } body.spreadsheet-workspace #excel-ui .ribbon-tabs { min-width: 0; margin: 0 0 4px !important; padding: 0; display: flex; flex-wrap: wrap !important; gap: 2px; overflow: visible; } body.spreadsheet-workspace #excel-ui .ribbon-tabs button { flex: 0 0 auto; padding: 4px 8px; border-radius: 3px; } body.spreadsheet-workspace #excel-ui .ribbon-panel.active { min-width: 0; max-height: min(210px, 30dvh); margin: 0 0 4px; padding: 3px 0 4px; display: flex; flex-wrap: wrap !important; align-items: stretch; gap: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } body.spreadsheet-workspace #excel-ui .ribbon-panel .group { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; flex-wrap: wrap; box-sizing: border-box; } body.spreadsheet-workspace #excel-ui .ribbon-panel .group > input, body.spreadsheet-workspace #excel-ui .ribbon-panel .group > select { min-width: 0; max-width: 100%; box-sizing: border-box; } .ss-ribbon-group-picker { display: none; } body.spreadsheet-workspace.ss-ribbon-collapsed #excel-ui .ribbon-panel { display: none !important; } body.spreadsheet-workspace #formulaBar { margin: 0 !important; grid-template-columns: 76px minmax(0, 1fr) auto auto !important; } body.spreadsheet-workspace #formulaBar > #nameBox, body.spreadsheet-workspace #formulaBar > #fxBox { box-sizing: border-box; min-width: 0; width: 100%; } /* Portalled by spreadsheet_ui.js so the horizontally scrolling ribbon cannot crop this popup. Its final viewport-relative position is calculated in JS. */ body.spreadsheet-workspace > #freezeMenu { position: fixed; right: auto; bottom: auto; min-width: min(240px, calc(100vw - 12px)); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); overflow-y: auto; z-index: 1000; } body.spreadsheet-workspace > #sheet { align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; width: 100%; height: auto !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff; overflow: hidden; } /* Keep a DOM caret in the native hidden editor so the first keyboard input produces beforeinput/input even after Univer empties its content. */ #sheet [data-u-comp="editor"][contenteditable="true"] { min-width: 1px; min-height: 1px; } /* The embedded ACH4 lesson toggles this class while its iframe is enlarged. Keep the explicit zoom height ahead of the workbench's normal auto height. */ body.spreadsheet-workspace.lab-zoomed > #sheet { height: 82vh !important; } .ss-boot-failure { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(520px, calc(100% - 36px)); max-height: calc(100% - 36px); padding: 20px; box-sizing: border-box; overflow: auto; transform: translate(-50%, -50%); border: 1px solid #d4a72c; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); color: #172033; background: #fffbea; } .ss-boot-failure h2 { margin: 0 0 8px; font-size: 20px; } .ss-boot-failure p { margin: 0 0 12px; } .ss-boot-failure button { min-height: 36px; padding: 6px 12px; border: 1px solid #17365d; border-radius: 5px; color: #fff; background: #17365d; font: inherit; font-weight: 700; cursor: pointer; } .ss-boot-failure button:focus-visible { outline: 3px solid #74a7ff; outline-offset: 2px; } .ss-window { position: fixed; z-index: 80; display: flex; flex-direction: column; box-sizing: border-box; min-width: 300px; min-height: 150px; max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border: 1px solid #99a7b8; border-radius: 8px; box-shadow: var(--ss-shadow); background: #fff; overflow: hidden; resize: none; } .ss-window[hidden] { display: none !important; } .ss-window[data-minimized="true"] { min-height: 0; height: auto !important; resize: none; } .ss-window-resize-handle { position: absolute; right: 0; bottom: 0; z-index: 2; width: 24px; height: 24px; cursor: nwse-resize; touch-action: none; user-select: none; } .ss-window-resize-handle::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-right: 2px solid #728196; border-bottom: 2px solid #728196; } .ss-window[data-minimized="true"] .ss-window-resize-handle { display: none; } .ss-window-resizing { user-select: none; } body.ss-tool-window-resizing { overflow: hidden !important; overscroll-behavior: none; touch-action: none; cursor: nwse-resize; user-select: none; } body.ss-tool-window-resizing > :not(.ss-window-resizing), body.ss-tool-window-resizing .ss-window-resizing > :not(.ss-window-resize-handle) { pointer-events: none !important; } .ss-window-titlebar { min-height: 34px; padding: 4px 5px 4px 10px; display: flex; align-items: center; gap: 6px; color: #fff; background: var(--ss-navy); touch-action: none; user-select: none; cursor: move; box-sizing: border-box; } .ss-window-titlebar strong { min-width: 0; margin-right: auto; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-window-titlebar button { width: 27px; height: 25px; padding: 0; border: 0; border-radius: 3px; color: #fff; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; } .ss-window-titlebar .ss-window-minimise { width: auto; min-width: 54px; padding: 0 7px; font-size: 12px; font-weight: 700; } .ss-window-titlebar button:hover, .ss-window-titlebar button:focus-visible { background: rgba(255, 255, 255, .2); outline: 2px solid rgba(255, 255, 255, .7); } .ss-window-body { min-height: 0; flex: 1 1 auto; padding: 10px; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; font-size: 14px; } .ss-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .ss-task-overview, .ss-task-section { margin: 0 0 8px; border: 1px solid #cfd8e3; border-radius: 7px; background: #fff; } .ss-task-overview > summary, .ss-task-section > summary { min-height: 38px; padding: 8px 10px; box-sizing: border-box; color: #17365d; background: #f4f7fa; border-radius: 7px; font-weight: 700; cursor: pointer; } .ss-task-overview[open] > summary, .ss-task-section[open] > summary { border-bottom: 1px solid #dce3eb; border-radius: 7px 7px 0 0; } .ss-task-overview > summary:focus-visible, .ss-task-section > summary:focus-visible { outline: 3px solid #74a7ff; outline-offset: 2px; } .ss-task-section-body { padding: 9px; } .ss-task-picker { position: sticky; z-index: 2; top: -10px; margin: 0 -2px 9px; padding: 6px 2px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; background: #fff; } .ss-task-view-picker { position: sticky; z-index: 4; top: -10px; margin: -10px -10px 10px; padding: 7px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: stretch; border-bottom: 1px solid #d8e0e9; background: #fff; box-shadow: 0 3px 8px rgba(23, 54, 93, .08); } .ss-task-view-tabs { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .ss-task-view-tabs button, .ss-task-case-action { min-width: 0; min-height: 38px; padding: 6px 9px; border: 1px solid #aeb9c6; border-radius: 5px; color: #17365d; background: #f8fafc; font: inherit; font-weight: 700; cursor: pointer; } .ss-task-view-tabs button[aria-selected="true"] { color: #fff; border-color: var(--ss-blue); background: var(--ss-blue); } .ss-task-case-action { border-color: #6b9b7e; color: #155c35; background: #f2f8f4; } .ss-task-view-tabs button:hover, .ss-task-view-tabs button:focus-visible, .ss-task-case-action:hover, .ss-task-case-action:focus-visible { border-color: var(--ss-blue); outline: 3px solid rgba(116, 167, 255, .72); outline-offset: 1px; } .ss-task-view { min-width: 0; } .ss-task-view[hidden] { display: none !important; } .ss-task-view[data-task-view="course"] .ss-task-picker { z-index: 3; top: calc(var(--ss-task-view-picker-height, 52px) - 4px); } .ss-task-picker button { min-width: 0; min-height: 36px; padding: 5px; border: 1px solid #aeb9c6; border-radius: 5px; color: #17365d; background: #f8fafc; font: inherit; font-weight: 700; cursor: pointer; } .ss-task-picker button[aria-expanded="true"] { color: #fff; background: var(--ss-blue); border-color: var(--ss-blue); } .ss-task-picker button:focus-visible { outline: 3px solid #74a7ff; outline-offset: 1px; } .ss-task-check-note { margin: 0 0 8px !important; color: #526071; } .ss-special-workbooks { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ss-special-workbooks a { min-width: 0; padding: 10px; display: grid; gap: 4px; box-sizing: border-box; border: 1px solid #b8c6d6; border-left: 4px solid var(--ss-blue); border-radius: 7px; color: #17365d; background: #f7faf8; text-decoration: none; } .ss-special-workbooks a:hover, .ss-special-workbooks a:focus-visible { border-color: var(--ss-blue); box-shadow: 0 0 0 3px rgba(33, 115, 70, .14); outline: none; } .ss-special-workbooks span { color: #526071; font-size: 12px; } .ss-task-check-controls > button, .ss-task-check-controls > .secondary-btn { margin: 3px 3px 3px 0 !important; } .ss-task-instructions > ol { margin: 3px 0 10px; } .ss-lab-task-accordion #labTasks, .ss-lab-task-accordion #taskCheck { border: 0; padding: 0; background: transparent; } .ss-window[data-minimized="true"] .ss-window-body { display: none; } #taskWindow { top: 48px; right: 10px; width: min(440px, calc(100vw - 20px)); height: min(650px, calc(100dvh - 60px)); } @media (pointer: coarse) and (min-width: 701px) { .ss-window-resize-handle { width: 44px; height: 44px; } .ss-window-resize-handle::after { right: 7px; bottom: 7px; width: 14px; height: 14px; } } #analysisWindow { top: 48px; left: max(12px, calc(50vw - 590px)); width: min(1180px, calc(100vw - 24px)); height: min(650px, calc(100dvh - 60px)); } #analysisWindow #analysis-panels, #analysisWindow #chart-panel, #analysisWindow #pivot-panel { margin: 0 !important; } .ss-window-help { margin: 0 0 9px; padding: 8px 10px; border-left: 3px solid var(--ss-blue); color: #344256; background: #f2f7f4; } #analysisWindow #chartDiv { height: min(480px, calc(100dvh - 190px)) !important; } #taskWindow h1, #taskWindow h2, #taskWindow h3, #analysisWindow h2 { margin-top: 8px; } #taskWindow .check-panel, #taskWindow .hint, #taskWindow .card, #taskWindow .ach4-lab-header, #taskWindow #taskCheck { margin: 0 0 10px !important; padding: 8px; box-sizing: border-box; } #taskWindow .check-panel > ul { margin: 6px 0; padding-left: 22px; } #taskWindow .check-panel > ul > li { margin: 0 0 9px; padding: 7px; border: 1px solid #dce3eb; border-radius: 6px; background: #f8fafc; } .ss-task-start { margin: 3px 2px !important; color: #fff; background: var(--ss-blue) !important; border-color: var(--ss-blue) !important; } .ss-mode-dialog-backdrop { position: fixed; inset: 0; /* Above nav.js / site chrome (which use layers up to roughly 20,000). */ z-index: 30000; display: grid; place-items: center; padding: 16px; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; background: rgba(15, 23, 42, .64); } .ss-mode-dialog { width: min(620px, 100%); max-height: calc(100dvh - 32px); padding: 22px; box-sizing: border-box; overflow: auto; border-radius: 12px; box-shadow: var(--ss-shadow); background: #fff; } .ss-mode-dialog h1 { margin: 0 0 6px; font-size: 22px; } .ss-mode-dialog p { margin: 0 0 16px; color: #526071; } .ss-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ss-mode-option { min-height: 112px; padding: 14px; text-align: left; border: 1px solid #bec9d5; border-radius: 8px; color: #172033; background: #f8fafc; cursor: pointer; } .ss-mode-option:hover, .ss-mode-option:focus-visible { border-color: #217346; box-shadow: 0 0 0 3px rgba(33, 115, 70, .14); outline: none; } .ss-mode-option strong, .ss-mode-option span { display: block; } .ss-mode-option strong { margin-bottom: 6px; font-size: 17px; } .ss-mode-option span { color: #526071; font-size: 14px; } .nss-pivot-builder { container-name: pivot-builder; container-type: inline-size; min-width: 0; color: #172033; font-size: 14px; line-height: 1.5; } .nss-pivot-builder *, .nss-pivot-builder *::before, .nss-pivot-builder *::after { box-sizing: border-box; } .nss-pivot-toolbar, .nss-pivot-actions, .nss-pivot-display-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .nss-pivot-builder button, .nss-pivot-builder select, .nss-pivot-builder input { min-width: 0; font: inherit; } .nss-pivot-builder button { min-height: 34px; margin: 0; padding: 5px 9px; white-space: normal; } .nss-pivot-builder button:focus-visible, .nss-pivot-builder select:focus-visible, .nss-pivot-builder input:focus-visible, .nss-pivot-settings > summary:focus-visible { outline: 3px solid #74a7ff; outline-offset: 2px; } .nss-pivot-workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; } .nss-pivot-output { min-width: 0; } .nss-pivot-display-toolbar { padding: 8px 10px; border: 1px solid #d3ded7; border-radius: 5px; background: #f4f8f5; } .nss-pivot-display-toolbar label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; } .nss-pivot-display-toolbar select { min-height: 34px; max-width: 100%; padding: 4px 7px; border: 1px solid #aeb9c6; border-radius: 4px; background: #fff; } .nss-pivot-display-toolbar .nss-pivot-hint { flex: 1 1 220px; margin: 0; } .nss-pivot-settings { min-width: 0; border: 1px solid #c9d4ce; border-radius: 6px; background: #f8faf9; } .nss-pivot-settings > summary { padding: 11px 12px; color: #164e32; background: #eef5f0; border-radius: 5px; font-size: 15px; font-weight: 700; cursor: pointer; } .nss-pivot-settings[open] > summary { border-bottom: 1px solid #c9d4ce; border-radius: 5px 5px 0 0; } .nss-pivot-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; padding: 12px; } .nss-pivot-settings > .nss-pivot-actions { margin: 0; padding: 10px 12px 12px; border-top: 1px solid #d9e2dc; background: #f8faf9; } .nss-pivot-settings > .nss-pivot-actions > button:first-child { border-color: #217346; color: #fff; background: #217346; font-weight: 700; } .nss-pivot-settings > .nss-pivot-hint { padding-inline: 12px; } .nss-pivot-field { display: grid; align-content: start; gap: 6px; min-width: 0; } .nss-pivot-field > label { color: #243b2e; font-weight: 700; } .nss-pivot-field select, .nss-pivot-field input { width: 100%; min-height: 34px; padding: 5px 7px; border: 1px solid #aeb9c6; border-radius: 4px; color: #172033; background: #fff; } .nss-pivot-field select[multiple] { padding: 3px; } .nss-pivot-field select[multiple] option { padding: 3px 5px; } .nss-pivot-axis, .nss-pivot-values-area, .nss-pivot-fields > .nss-pivot-field:not(.nss-pivot-axis) { padding: 10px; border: 1px solid #d5dfd9; border-radius: 5px; background: #fff; } .nss-pivot-values-area { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; } .nss-pivot-selected-fields { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; } .nss-pivot-selected-fields > li { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 5px; padding: 7px; border: 1px solid #cdded3; border-radius: 4px; background: #f3f8f5; } .nss-pivot-selected-fields > li > span { overflow-wrap: anywhere; font-weight: 600; } .nss-pivot-order-help { margin: 2px 0 0; color: #526071; } .nss-pivot-selected-fields > .nss-pivot-empty-field { border-style: dashed; color: #526071; background: #fff; } .nss-pivot-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .nss-pivot-selected-fields .nss-pivot-card-actions { grid-column: 1 / -1; } .nss-pivot-card-actions button { min-height: 30px; padding: 3px 7px; line-height: 1.4; } .nss-pivot-aggregations { gap: 8px; } .nss-pivot-aggregation-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1fr); align-items: center; gap: 7px; padding: 9px; border: 1px solid #cdded3; border-radius: 4px; background: #f3f8f5; } .nss-pivot-aggregation-row > span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; } .nss-pivot-aggregation-row .nss-pivot-card-actions { grid-column: 1 / -1; } .nss-pivot-source { margin-bottom: 10px; color: #526071; overflow-wrap: anywhere; } .nss-pivot-hint { margin: 0 0 10px; color: #526071; font-size: 14px; line-height: 1.6; } .nss-pivot-field .nss-pivot-hint { margin: 0; } .nss-pivot-scroll { max-width: 100%; max-height: clamp(140px, calc(100dvh - 370px), 360px); overflow: auto; overscroll-behavior: contain; border: 1px solid #ccd5df; border-radius: 4px; scrollbar-gutter: stable; } .nss-pivot-scroll:focus-visible { outline: 3px solid #74a7ff; outline-offset: 2px; } .nss-pivot-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14px; line-height: 1.45; background: #fff; } .nss-pivot-table caption { padding: 9px 11px; color: #334f3e; background: #f3f8f5; text-align: left; font-weight: 600; } .nss-pivot-table th, .nss-pivot-table td { padding: 8px 11px; border-right: 1px solid #dbe3df; border-bottom: 1px solid #dbe3df; white-space: nowrap; text-align: right; vertical-align: middle; } .nss-pivot-table th { color: #173d29; background: #edf5ef; text-align: left; font-weight: 600; } /* Keep all header tiers together; sticky cells with top: 0 overlap each other. */ .nss-pivot-table thead { position: sticky; top: 0; z-index: 3; } .nss-pivot-table thead th { border-bottom-color: #b8ccbe; background: #e7f1ea; } .nss-pivot-table thead tr:last-child th { border-bottom: 2px solid #739d81; } .nss-pivot-table .nss-pivot-col-group { text-align: center; border-right-color: #b8ccbe; } .nss-pivot-field-name { display: block; color: #4c6856; font-size: 12px; font-weight: 400; } .nss-pivot-table td { font-variant-numeric: tabular-nums; } .nss-pivot-table tbody .nss-pivot-row-label { color: #243a2c; background: #f7faf8; vertical-align: top; } .nss-pivot-table tbody tr:hover td:not(.nss-pivot-total) { background: #f4f8fb; } /* A rowSpan can make the first DOM cell a different logical column. */ .nss-pivot-table .nss-pivot-row-label[data-row-label-index="0"] { position: sticky; left: 0; z-index: 2; border-right-color: #b8ccbe; } .nss-pivot-table .nss-pivot-measure-label { color: #274e38; background: #f0f6f2; text-align: left; } .nss-pivot-table .nss-pivot-total { color: #163b27; font-weight: 700; background: #e5f0e8; border-left: 1px solid #a3beac; } .nss-pivot-table tfoot th, .nss-pivot-table tfoot td { border-top: 2px solid #739d81; } .nss-pivot-table tfoot tr + tr th, .nss-pivot-table tfoot tr + tr td { border-top: 0; } .nss-pivot-error { margin-bottom: 12px; padding: 10px; border: 1px solid #f2b8b5; border-radius: 5px; color: #8a1c1c; background: #fff1f0; } @container pivot-builder (min-width: 900px) { .nss-pivot-workspace { grid-template-columns: minmax(0, 1fr) 340px; } .nss-pivot-settings { /* Leave room for the window header, guidance, source and result toolbar. */ max-height: clamp(200px, calc(100dvh - 310px), 420px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .nss-pivot-settings > summary { position: sticky; top: 0; z-index: 2; } .nss-pivot-settings > .nss-pivot-actions { position: sticky; bottom: 0; z-index: 1; } .nss-pivot-fields { grid-template-columns: minmax(0, 1fr); } } @container pivot-builder (max-width: 540px) { .nss-pivot-fields { grid-template-columns: minmax(0, 1fr); padding: 10px; } .nss-pivot-table th, .nss-pivot-table td { padding: 7px 9px; } } #modalOverlay { z-index: 180 !important; } #slicerModal, #goalSeekModal { z-index: 190 !important; box-sizing: border-box; width: min(620px, calc(100vw - 24px)) !important; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; } #goalSeekModal > div:first-of-type { grid-template-columns: minmax(120px, 140px) minmax(0, 1fr) !important; } #goalSeekModal input, #slicerModal input, #slicerModal select { min-width: 0; max-width: 100%; box-sizing: border-box; } @media (max-width: 700px) { .ss-appbar-title { display: none; } .ss-appbar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "navigation modes" "actions actions"; align-items: stretch; gap: 4px 6px; overflow: hidden; } body.spreadsheet-workspace .ss-appbar > .ict-nav-toggle { grid-area: navigation; align-self: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; } .ss-mode-switch { grid-area: modes; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-appbar-actions { grid-area: actions; min-width: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); } .ss-appbar button { min-height: 44px; padding: 8px 10px; } .ss-mode-switch button, .ss-appbar-actions button { min-width: 0; padding-right: 6px; padding-left: 6px; white-space: normal; line-height: 1.15; } body.spreadsheet-workspace #excel-ui .ribbon-panel.active { max-height: 42dvh; } .ss-ribbon-group-picker { width: 100%; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 2px 1px 4px; box-sizing: border-box; color: #526071; font-size: 12px; font-weight: 700; } .ss-ribbon-group-picker select { min-width: 0; min-height: 44px; flex: 1 1 auto; } body.spreadsheet-workspace #excel-ui .ribbon-panel .group[data-compact-active="false"] { display: none !important; } body.spreadsheet-workspace #excel-ui .ribbon-panel .group { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; } body.spreadsheet-workspace #excel-ui .ribbon-tabs button, body.spreadsheet-workspace #excel-ui .ribbon-panel .btn, body.spreadsheet-workspace #excel-ui .ribbon-panel button, body.spreadsheet-workspace #excel-ui .ribbon-panel select, body.spreadsheet-workspace #excel-ui .ribbon-panel input:not([type="file"]) { min-height: 44px; box-sizing: border-box; } body.spreadsheet-workspace #excel-ui .ribbon-panel input[type="color"] { width: 44px; min-width: 44px; } body.spreadsheet-workspace #formulaBar input, body.spreadsheet-workspace #formulaBar button, .ss-window-body button, .ss-window-body select, .ss-window-body input:not([type="checkbox"]), #slicerModal button, #slicerModal select, #goalSeekModal button, #goalSeekModal input { min-height: 44px; box-sizing: border-box; } body.spreadsheet-workspace #excel-ui .ribbon-panel .group > input[type="file"] { width: 100%; min-height: 44px; box-sizing: border-box; } body.spreadsheet-workspace #customFormatCode { min-width: 0 !important; width: min(100%, 280px); flex: 1 1 220px; } .ss-window { top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; min-width: 0; max-width: 100vw; height: min(56dvh, 620px) !important; max-height: 78dvh; border-radius: 10px 10px 0 0; resize: none; } .ss-window-resize-handle { display: none; } .ss-window-body { padding-right: max(10px, env(safe-area-inset-right)); padding-bottom: max(10px, env(safe-area-inset-bottom)); padding-left: max(10px, env(safe-area-inset-left)); } #analysisWindow { height: 76dvh !important; } .ss-window-titlebar { min-height: 48px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(5px, env(safe-area-inset-right)); cursor: default; } .ss-window-titlebar button { width: 44px; height: 44px; } .ss-window-titlebar .ss-window-minimise { width: auto; min-width: 58px; padding-inline: 8px; } .ss-task-overview > summary, .ss-task-section > summary, .ss-task-picker button, .ss-task-view-tabs button, .ss-task-case-action { min-height: 44px; } .ss-task-view-picker { grid-template-columns: minmax(0, 1fr); padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); } .ss-task-view[data-task-view="course"] .ss-task-picker { position: static; } .ss-mode-options { grid-template-columns: 1fr; } .ss-special-workbooks { grid-template-columns: 1fr; } } @media (max-width: 420px) { #goalSeekModal > div:first-of-type { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-height: 460px) { .ss-mode-dialog-backdrop { place-items: start center; padding: 8px; } .ss-mode-dialog { max-height: calc(100dvh - 16px); padding: 14px; } .ss-mode-option { min-height: 82px; padding: 10px; } } .ss-appbar-actions .ss-reset-workbook { border-color: #fbbf24; color: #fff; white-space: nowrap; background: #7c2d12; font-weight: 700; } .ss-appbar-actions .ss-reset-workbook:hover { background: #9a3412; } /* Scoped lesson help: no editor/focus/selection rules. */ .ss-argument-help { margin-block: 12px; border: 1px solid #bfdbfe; border-radius: 8px; background: #f8fbff; color: #172554; min-width: 0; } .ss-argument-help > summary, .ss-argument-example > summary { cursor: pointer; padding: 10px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; } .ss-argument-help summary:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; } .ss-argument-help-body { padding: 0 10px 10px; } .ss-argument-help p { margin: 8px 0; line-height: 1.65; } .ss-argument-example { border-top: 1px solid #dbeafe; min-width: 0; } .ss-argument-example h5 { margin: 16px 0 4px; font-size: 1em; } .ss-argument-help code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .ss-argument-help table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; margin: 8px 0; } .ss-argument-help caption { text-align: left; font-weight: 600; padding: 6px 0; } .ss-argument-help th, .ss-argument-help td { border: 1px solid #cbd5e1; padding: 7px; vertical-align: top; text-align: left; overflow-wrap: anywhere; line-height: 1.6; } .ss-argument-help thead th { background: #dbeafe; } .ss-argument-help th:nth-child(1) { width: 22%; } .ss-argument-help th:nth-child(2) { width: 22%; } .ss-argument-help tbody th { font-weight: 500; background: #eff6ff; } @media (max-width: 520px) { .ss-argument-help-body { padding-inline: 6px; } .ss-argument-help th, .ss-argument-help td { padding: 5px; } .ss-argument-help table { font-size: 12px; } } /* Touch additions retain the desktop ribbon and existing task/pivot layout. These dimensions follow the visible area above the software keyboard. */ body.spreadsheet-workspace { height: var(--ss-visible-height, 100dvh); } .ss-window { min-height: min(150px, calc(var(--ss-visible-height, 100dvh) - 12px)); max-width: calc(var(--ss-visible-width, 100vw) - 12px); max-height: calc(var(--ss-visible-height, 100dvh) - 12px); } body.spreadsheet-workspace [data-spreadsheet-whatif-generated] > [role="dialog"], body.spreadsheet-workspace .ss-mode-dialog { max-height: calc(var(--ss-visible-height, 100dvh) - 32px) !important; overflow: auto; box-sizing: border-box; } .ss-touch-toolbar, .ss-touch-fill-panel { min-width: 0; box-sizing: border-box; color: #17365d; background: #f2f7fb; border-top: 1px solid #c7d5e2; padding: 4px 2px; font-size: 13px; } .ss-touch-toolbar { display: flex; align-items: center; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; touch-action: pan-x; } .ss-touch-toolbar > * { flex-shrink: 0; } .ss-touch-toolbar label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .ss-touch-toolbar button, .ss-touch-toolbar select, .ss-touch-fill-panel button, .ss-touch-fill-panel select, .ss-touch-fill-panel input { min-width: 44px; min-height: 44px; padding: 6px 9px; box-sizing: border-box; font: inherit; font-size: 16px; } .ss-touch-toolbar button, .ss-touch-fill-panel button { border: 1px solid #9bb1c4; border-radius: 5px; color: #17365d; background: #fff; white-space: nowrap; } .ss-touch-toolbar button[aria-pressed="true"] { border-color: #217346; color: #fff; background: #217346; } .ss-touch-toolbar :focus-visible, .ss-touch-fill-panel :focus-visible { outline: 2px solid #1760ac; outline-offset: -2px; } .ss-touch-status { flex: 1 0 150px; min-width: 0; max-width: 260px; white-space: normal; line-height: 1.35; color: #475569; } .ss-touch-toolbar .ss-touch-done { position: sticky; right: 0; z-index: 1; margin-left: auto; box-shadow: -4px 0 5px #f2f7fb; } /* The overlay never takes a tap away from the grid except on a handle. Keep it below the ribbon and modeless teaching windows, including during a drag. */ .ss-touch-handles { position: fixed; inset: 0; z-index: 10; pointer-events: none; } .ss-touch-handle { position: fixed; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: #217346; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; } .ss-touch-handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid #217346; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px #fff; } .ss-touch-handle[data-kind^="fill-"]::before { width: 28px; height: 28px; border-radius: 5px; } .ss-touch-handle[data-kind^="fill-"]::after { position: absolute; inset: 0; display: grid; place-items: center; font: 700 24px/1 sans-serif; } .ss-touch-handle[data-kind="fill-start"]::after { content: "↖"; } .ss-touch-handle[data-kind="fill-end"]::after { content: "↘"; } .ss-touch-handle:active { cursor: grabbing; } .ss-touch-handle:focus-visible { outline: 2px solid #1760ac; outline-offset: -3px; border-radius: 50%; } .ss-touch-preview { position: fixed; box-sizing: border-box; border: 2px dashed #217346; background: rgb(33 115 70 / 8%); pointer-events: none; } .ss-touch-handles[hidden], .ss-touch-handle[hidden], .ss-touch-preview[hidden] { display: none !important; } .ss-touch-instruction { display: none; } body.ss-touch-active .ss-touch-instruction { display: inline; } body.ss-touch-active .ss-desktop-instruction { display: none; } .ss-touch-fill-panel { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; max-height: min(240px, calc(var(--ss-visible-height, 100dvh) * .4)); overflow: auto; overscroll-behavior: contain; } .ss-touch-fill-panel label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; } .ss-touch-fill-panel input { width: min(230px, 100%); min-width: 0; } .ss-touch-toolbar[hidden], .ss-touch-fill-panel[hidden] { display: none !important; } body.ss-touch-active.ss-touch-editing #excel-ui .ribbon-panel, body.ss-touch-active.ss-touch-editing #excel-ui .ribbon-tabs { display: none !important; } body.ss-touch-active.ss-keyboard-open .ss-touch-fill-panel { max-height: calc(var(--ss-visible-height, 100dvh) * .3); } @media (pointer: coarse) { body.spreadsheet-workspace .ss-appbar button, body.spreadsheet-workspace #excel-ui button, body.spreadsheet-workspace #excel-ui select, body.spreadsheet-workspace #excel-ui input:not([type="checkbox"]):not([type="radio"]), body.spreadsheet-workspace .ss-window button, body.spreadsheet-workspace .ss-window select, body.spreadsheet-workspace .ss-window input:not([type="checkbox"]):not([type="radio"]), body.spreadsheet-workspace [role="dialog"] button { min-height: 44px; min-width: 44px; box-sizing: border-box; } body.spreadsheet-workspace #excel-ui input, body.spreadsheet-workspace #excel-ui select, body.spreadsheet-workspace .ss-window input, body.spreadsheet-workspace .ss-window select, body.spreadsheet-workspace .ss-window textarea, body.spreadsheet-workspace [role="dialog"] input, body.spreadsheet-workspace [role="dialog"] select, body.spreadsheet-workspace [role="dialog"] textarea { font-size: 16px; } body.spreadsheet-workspace .ss-window-titlebar { min-height: 52px; } body.spreadsheet-workspace .ss-window-titlebar button { width: 44px; height: 44px; } body.spreadsheet-workspace .ss-window-titlebar .ss-window-minimise { width: auto; } body.spreadsheet-workspace #excel-ui .ribbon-tabs { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: thin; } body.spreadsheet-workspace #excel-ui .ribbon-panel.active { max-height: min(160px, calc(var(--ss-visible-height, 100dvh) * .24)); } body.spreadsheet-workspace .ss-appbar-actions { overflow-x: auto; scrollbar-width: thin; } body.spreadsheet-workspace .ss-appbar-actions > button { flex-shrink: 0; } } @media (pointer: coarse) and (min-width: 701px) { body.spreadsheet-workspace .ss-appbar > .ict-nav-toggle { flex-basis: 44px; width: 44px; min-width: 44px; height: 44px; } body.spreadsheet-workspace .ss-appbar-title { flex: 0 1 auto; } body.spreadsheet-workspace .ss-appbar-actions { flex: 1 1 auto; min-width: 0; } } @media (max-width: 700px) { .ss-window { left: var(--ss-visible-left, 0px) !important; bottom: var(--ss-keyboard-inset, 0px) !important; width: var(--ss-visible-width, 100vw) !important; max-width: var(--ss-visible-width, 100vw); height: min(calc(var(--ss-visible-height, 100dvh) * .56), 620px) !important; max-height: calc(var(--ss-visible-height, 100dvh) - 12px); } #analysisWindow { height: calc(var(--ss-visible-height, 100dvh) * .76) !important; } body.ss-keyboard-open .ss-window { height: calc(var(--ss-visible-height, 100dvh) - 12px) !important; } .ss-window[data-minimized="true"] { height: auto !important; } } /* The touch controller handles single-finger cell panning. The browser keeps two-finger zoom; override the engine's inline touch-action:none only here. */ body.ss-touch-active #sheet canvas[data-u-comp="render-canvas"] { touch-action: pinch-zoom !important; } /* Center modal forms in the visible area, not behind an on-screen keyboard. */ body.spreadsheet-workspace > div[data-spreadsheet-whatif-generated="true"], body.spreadsheet-workspace > .ss-mode-dialog-backdrop { top: var(--ss-visible-top, 0px) !important; left: var(--ss-visible-left, 0px) !important; right: auto !important; bottom: auto !important; width: var(--ss-visible-width, 100vw); height: var(--ss-visible-height, 100dvh); box-sizing: border-box; }