/* --------------------------------------------------------------------- * sheet.css — the spreadsheet grid, toolbar, formula bar and status bar. * * Loaded alongside the documents app's style.css, which it deliberately does * not duplicate: buttons, inputs, modals and the top bar all come from there * so a spreadsheet reads as a sibling of the document editor, not a * separate product. * * THEMING. Everything here is built on the platform's own custom properties * (--bg, --panel, --border, --text, --accent ...). base.v1.css redefines * those per theme with !important under html[data-theme="light|dark"], which * is higher specificity than any :root fallback, so using the tokens is all * that is needed to follow the user's theme. The literal colours below are * fallbacks for the moment before the shared chrome stylesheet lands. * * One deliberate divergence from the document editor: its writing surface * stays paper-white in both themes (a page of paper is white). A grid is not * a page — it fills the viewport edge to edge, so an always-white slab would * be punishing in dark mode. The grid follows the theme instead. * * NO INLINE STYLES. This app runs style-src 'self' with no unsafe-inline, * and style="..." attributes are dropped *silently* under it (measured, not * assumed). Every cell format is therefore a class from the fixed list * below, matching the vocabulary the server validates in sheet.service.js. * Column widths are the sole exception and are written through CSSOM * (element.style.width), which CSP does not govern. * ------------------------------------------------------------------- */ .sheet-page { /* The editor owns the viewport: the grid scrolls, the page does not. */ height: 100vh; overflow: hidden; } .sheet-shell { display: flex; flex-direction: column; height: 100vh; min-height: 0; } /* --- top bar ------------------------------------------------------- */ /* The bar itself is the SHARED `.editor-topbar` (style.css) — same glass background, --dlc-* tokens, 40px min-height, `.doc-title`, and the 28px `.editor-topbar button` sizing that Import/Export/Share inherit, so this editor's bar matches /files/documents exactly. `.sheet-topbar` (loaded later, so it wins ties) overrides only what is spreadsheet-specific: ONE non-wrapping row whose tool group scrolls (docs wraps, but sheets' text buttons are too wide to wrap compactly), and the action cluster never shrinks so only the middle scrolls. */ .sheet-topbar { flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; } /* Docs' `.doc-title` is flex:1 (grows to fill); here the scrolling tool group needs that room, so the title stays modest. (0,2,1) matches the shared `.editor-topbar input.doc-title` and, loaded later, wins the tie. */ .sheet-topbar input.doc-title { flex: 0 1 180px; min-width: 96px; } /* The read-only share view's title is a (not the editor's input), so it needs its own weight/colour on the shared `.editor-topbar`. */ .editor-topbar .sheet-title { font-weight: 600; color: var(--dlc-text-bright, #1c1a26); min-width: 0; } /* Menu items in the pop-out swatch/export menus. Those menus are reparented to when opened (see positionMenu in sheet-editor.js), so they are NOT under `.editor-topbar` and must name their own colours. :not([class*="sg-"]) exempts the colour chips — a bare `.sw-menu button` (0,1,1) would out-specify `.sg-fg-red` (0,1,0) and repaint the whole palette. */ .sw-menu button:not([class*="sg-"]) { color: var(--text, #d0cdd8); background: var(--panel, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); } .sw-menu button:not([class*="sg-"]):hover { border-color: var(--accent, #c8a86e); background: var(--accent-tint, rgba(200, 168, 110, 0.12)); } /* The inline tool group takes the middle of the bar and wraps within it — so there is ONE bar, not a separate toolbar row below (matches /documents' .editor-topbar). flex:1 1 auto grows it to push the actions to the right. */ .sheet-tools { display: flex; align-items: center; flex-wrap: nowrap; gap: 3px; flex: 1 1 auto; min-width: 0; /* lets the group shrink below content width... */ overflow-x: auto; /* ...and scroll, keeping the bar one row tall. */ overflow-y: hidden; scrollbar-width: thin; } /* Still used by the read-only share view (shared.html) to push its actions to the right; the editor uses .sheet-tools' flex-grow instead. */ .sheet-spacer { flex: 1 1 auto; } .save-status { font-size: 12px; opacity: 0.75; white-space: nowrap; } /* The action cluster (back arrow + save-status + Import/Export/Share) never shrinks or wraps — only the tool group in the middle scrolls. Without this the Export button squeezed its "Export ▾" onto two lines and pushed the bar to ~67px instead of one ~40px row. */ .sheet-topbar > .btn, .sheet-topbar > button, .sheet-topbar > .sw-wrap, .sheet-topbar > .save-status { flex: 0 0 auto; white-space: nowrap; } .sheet-topbar > .sw-wrap > button { white-space: nowrap; } /* --- inline tools (inside the top bar) ----------------------------- */ /* :not([class*="sg-"]) exempts the colour swatches, which live inside the tool group. Without it `.sheet-tools button` (0,1,1) out-specifies `.sg-fg-red` (0,1,0) and paints the entire palette one colour. Dark mode hid this because its swatches are written `html[data-theme="dark"] .sg-fg-red` (0,2,1) and win anyway — the bug was light-theme-only, and a dark-only check would pass it. This selector is (0,2,1), so it also wins over `.sheet-topbar button` (0,1,1) — which keeps the borderless tool look while Import/Export/Share stay bordered. */ .sheet-tools button:not([class*="sg-"]) { padding: 4px 7px; border-radius: 5px; font-size: 13px; line-height: 1.1; min-width: 28px; flex: 0 0 auto; background: transparent; border: 1px solid transparent; color: var(--text, #d0cdd8); white-space: nowrap; } .sheet-tools button:not([class*="sg-"]):hover { background: var(--accent-tint, rgba(200, 168, 110, 0.12)); border-color: var(--border, rgba(255, 255, 255, 0.08)); } .sheet-tools button.on { background: var(--accent-tint, rgba(200, 168, 110, 0.16)); border-color: var(--accent, #c8a86e); } .sheet-tools .sep { width: 1px; align-self: stretch; margin: 3px 2px; background: var(--border, rgba(255, 255, 255, 0.12)); flex: 0 0 auto; } .sheet-tools select { font: inherit; font-size: 12px; background: var(--bg, #14121a); color: var(--text, #d0cdd8); border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-radius: 5px; padding: 3px 4px; } /* --- formula bar --------------------------------------------------- */ .sheet-formulabar { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08)); background: var(--panel, rgba(255, 255, 255, 0.03)); flex: 0 0 auto; } .sheet-formulabar .ref-box { width: 84px; flex: 0 0 auto; font: inherit; font-size: 13px; text-align: center; background: transparent; border: none; border-right: 1px solid var(--border, rgba(255, 255, 255, 0.08)); color: var(--text, #d0cdd8); padding: 5px 4px; border-radius: 0; } .sheet-formulabar .fx { flex: 0 0 auto; display: flex; align-items: center; padding: 0 8px; font-family: Georgia, serif; font-style: italic; opacity: 0.7; border-right: 1px solid var(--border, rgba(255, 255, 255, 0.08)); } .sheet-formulabar .formula-input { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: transparent; border: none; color: var(--bright, #f2f0f8); padding: 5px 10px; width: 100%; border-radius: 0; } .sheet-formulabar .formula-input:focus { outline: none; background: var(--accent-tint, rgba(200, 168, 110, 0.08)); } /* --- the grid ------------------------------------------------------ */ .sg-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--bg, #1a1820); outline: none; /* Momentum scrolling on iOS without letting the page itself bounce. */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .sg-table { border-collapse: separate; /* sticky headers need separate borders */ border-spacing: 0; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; } .sg-table th, .sg-table td { border-right: 1px solid var(--border-soft, rgba(255, 255, 255, 0.07)); border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.07)); padding: 0 5px; height: 24px; max-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Column headers ---------------------------------------------------- */ .sg-table thead th { position: sticky; top: 0; z-index: 3; background: var(--panel, #25232d); color: var(--dim, #8f8ca0); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-align: center; user-select: none; } .sg-corner { left: 0; z-index: 5 !important; width: 44px; min-width: 44px; cursor: cell; position: sticky !important; } .sg-colhead { position: relative; cursor: pointer; } /* Row headers ------------------------------------------------------- */ .sg-rowhead { position: sticky; left: 0; z-index: 2; width: 44px; min-width: 44px; max-width: 44px; background: var(--panel, #25232d); color: var(--dim, #8f8ca0); font-weight: 500; font-size: 11px; text-align: center; cursor: pointer; user-select: none; } .sg-colhead.sg-head-on, .sg-rowhead.sg-head-on { background: var(--accent-tint, rgba(200, 168, 110, 0.18)); color: var(--bright, #f2f0f8); } /* Resize grip ------------------------------------------------------- */ .sg-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 4; } .sg-grip:hover { background: var(--accent, #c8a86e); } .sg-wrap.sg-resizing { cursor: col-resize; user-select: none; } /* Cells -------------------------------------------------------------- */ .sg-cell { background: var(--bg, #1a1820); color: var(--text, #d0cdd8); cursor: cell; } .sg-al { text-align: left; } .sg-ac { text-align: center; } .sg-ar { text-align: right; } .sg-b { font-weight: 700; } .sg-i { font-style: italic; } .sg-u { text-decoration: underline; } .sg-s { text-decoration: line-through; } .sg-u.sg-s { text-decoration: underline line-through; } .sg-wrap-text { white-space: normal; word-break: break-word; text-overflow: clip; } .sg-err { color: var(--danger, #e05050); font-size: 12px; } /* Selection ---------------------------------------------------------- * The active cell is marked by its OUTLINE. It only repaints its background * when the cell has no fill of its own: an unconditional background here * out-specifies .sg-bg-* (0,2,0 beats 0,1,0) and wipes the fill, while the * fill's dark text colour rule (0,2,1) survives — so selecting a filled cell * rendered dark text on a dark background and the value vanished. Every * textContent assertion still passed, because textContent doesn't care * whether a human can see it; only a screenshot caught it. * ------------------------------------------------------------------- */ /* An unfilled cell shows selection by tinting its background. A FILLED cell must keep its fill — both of these rules out-specify .sg-bg-* on their own (0,2,0 vs 0,1,0), so each is scoped away from filled cells and the fill is marked selected with an inset ring instead. */ .sg-cell.sg-sel:not([class*="sg-bg-"]) { background: var(--accent-tint, rgba(200, 168, 110, 0.14)); } .sg-cell.sg-sel[class*="sg-bg-"] { box-shadow: inset 0 0 0 1px var(--accent, #c8a86e); } .sg-cell.sg-active { outline: 2px solid var(--accent, #c8a86e); outline-offset: -2px; } .sg-cell.sg-active:not([class*="sg-bg-"]) { background: var(--bg, #1a1820); } /* Freeze panes ------------------------------------------------------- */ .sg-freeze-row .sg-table tbody tr:first-child td, .sg-freeze-row .sg-table tbody tr:first-child th { position: sticky; top: 24px; z-index: 1; } .sg-freeze-row .sg-table tbody tr:first-child th { z-index: 2; } .sg-freeze-col .sg-table tbody td:first-of-type { position: sticky; left: 44px; z-index: 1; } /* The floating cell editor ------------------------------------------- */ .sg-editor { position: absolute; z-index: 20; font: inherit; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 4px; margin: 0; border: 2px solid var(--accent, #c8a86e); border-radius: 0; background: var(--bg, #14121a); color: var(--bright, #f2f0f8); outline: none; width: auto; } /* --- cell colour swatches ------------------------------------------- * Fixed palettes, mirrored by FG_COLORS / BG_COLORS in sheet.service.js. * Both themes are specified: these are content colours, so they have to * stay legible against whichever grid background is in play. * ------------------------------------------------------------------- */ .sg-fg-red { color: #c0392b; } .sg-fg-orange { color: #a2620a; } .sg-fg-green { color: #1e7a45; } .sg-fg-blue { color: #1f5fa8; } .sg-fg-purple { color: #6b3fa0; } .sg-fg-gray { color: #6b6878; } .sg-bg-yellow { background: #fff3bf; } .sg-bg-green { background: #d3f9d8; } .sg-bg-pink { background: #ffdeeb; } .sg-bg-blue { background: #d0ebff; } .sg-bg-gray { background: #e9ecef; } /* A filled cell keeps dark text regardless of theme — the fills above are pale, so inheriting a light theme text colour would wash them out. */ .sg-cell[class*="sg-bg-"] { color: #1c1a26; } html[data-theme="dark"] .sg-fg-red { color: #ff8a7a; } html[data-theme="dark"] .sg-fg-orange { color: #f0b429; } html[data-theme="dark"] .sg-fg-green { color: #7ed59d; } html[data-theme="dark"] .sg-fg-blue { color: #74c0fc; } html[data-theme="dark"] .sg-fg-purple { color: #b197fc; } html[data-theme="dark"] .sg-fg-gray { color: #9c99ab; } html[data-theme="dark"] .sg-bg-yellow { background: #665c1f; } html[data-theme="dark"] .sg-bg-green { background: #1f5133; } html[data-theme="dark"] .sg-bg-pink { background: #5e2740; } html[data-theme="dark"] .sg-bg-blue { background: #1e4266; } html[data-theme="dark"] .sg-bg-gray { background: #3a3846; } html[data-theme="dark"] .sg-cell[class*="sg-bg-"] { color: #f2f0f8; } /* --- swatch menus ---------------------------------------------------- */ .sw-wrap { position: relative; display: inline-flex; } .sw-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 26px); gap: 5px; padding: 8px; background: var(--panel, #25232d); border: 1px solid var(--border, rgba(255, 255, 255, 0.14)); border-radius: 8px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6); } .sw-menu[hidden] { display: none; } /* author display:grid beats the UA [hidden] rule */ .sw-menu button { width: 26px; height: 26px; min-width: 26px; padding: 0; border-radius: 5px; border: 1px solid var(--border, rgba(255, 255, 255, 0.18)); font-size: 12px; font-weight: 700; } .sw-menu button.none { grid-column: 1 / -1; width: auto; font-size: 12px; font-weight: 400; } /* A menu of labelled actions rather than colour chips (the Export menu). A class, not an inline style: style="..." is silently dropped by this app's CSP, so an inline grid-template-columns here would do nothing. */ .sw-menu-list { grid-template-columns: 1fr; min-width: 200px; right: 0; left: auto; } .sw-menu-list button { text-align: left; padding: 7px 10px; height: auto; } /* The grid mounts into the flex column and must be free to shrink, which is what makes the grid itself scroll instead of the page. */ .sheet-grid-mount { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* --- status bar ------------------------------------------------------ */ .sheet-statusbar { display: flex; align-items: center; gap: 14px; padding: 4px 12px; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08)); background: var(--panel, rgba(255, 255, 255, 0.04)); font-size: 12px; color: var(--dim, #8f8ca0); flex: 0 0 auto; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .sheet-statusbar .stat b { color: var(--text, #d0cdd8); font-weight: 600; } .sheet-statusbar .grow { flex: 1 1 auto; } /* --- banners and dialogs --------------------------------------------- */ .sheet-banner { padding: 8px 12px; font-size: 13px; background: var(--accent-tint, rgba(200, 168, 110, 0.1)); border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08)); flex: 0 0 auto; } /* Same 12% gold wash as documents' .local-banner, so base's link catch-all paints --accent-text at 4.17:1 inside it. Rebind for the subtree. */ html:not([data-theme="dark"]) .sheet-banner { --accent-text: var(--accent-text-strong); } .sheet-banner[hidden] { display: none; } .sheet-error { padding: 8px 12px; font-size: 13px; color: var(--danger, #e05050); border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08)); flex: 0 0 auto; } .sheet-error[hidden] { display: none; } /* --- the sheets list page -------------------------------------------- */ .sheet-list { display: grid; gap: 10px; } .sheet-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-radius: 10px; } .sheet-row:hover { border-color: var(--accent, #c8a86e); } .sheet-row .open { flex: 1 1 auto; text-decoration: none; color: inherit; min-width: 0; } .sheet-row .title { font-weight: 600; color: var(--bright, #f2f0f8); } .sheet-row .meta { font-size: 12px; opacity: 0.7; margin-top: 3px; } .sheet-row .preview { font-size: 12px; opacity: 0.55; margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- function reference ---------------------------------------------- */ .fn-help { padding: 10px 12px; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08)); background: var(--bg-2, rgba(0, 0, 0, 0.12)); font-size: 12px; flex: 0 0 auto; max-height: 30vh; overflow: auto; } .fn-help[hidden] { display: none; } .fn-help code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-tint, rgba(200, 168, 110, 0.12)); padding: 1px 5px; border-radius: 4px; display: inline-block; margin: 2px 3px 2px 0; } /* --- sheet tabs (multi-sheet workbook) ----------------------------- * * Pinned below the scrolling grid, inside the flex-column mount. Colours use * the platform theme tokens (base.v1.css defines them per theme), so the strip * follows light/dark like the rest of the app. The strip carries `no-print`, * so no @media print rule is needed here. * ------------------------------------------------------------------- */ .sg-tabs { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 3px; padding: 3px 8px 0; overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08)); background: var(--bg-2, rgba(0, 0, 0, 0.12)); scrollbar-width: thin; } .sg-tab { flex: 0 0 auto; max-width: 200px; padding: 5px 12px; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text, #d0cdd8); background: var(--panel, rgba(255, 255, 255, 0.04)); border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-bottom: none; border-radius: 7px 7px 0 0; cursor: pointer; } .sg-tab:hover { background: var(--accent-tint, rgba(200, 168, 110, 0.12)); } /* `.sg-tab:hover` is (0,2,0) and would out-specify a bare `.sg-tab-active` * (0,1,0) — hovering the active tab would swap its distinct --bg background for * the hover tint. Matching the hover specificity here (and coming later) keeps * the active tab looking active even under the pointer. */ .sg-tab-active, .sg-tab-active:hover { color: var(--bright, #f2f0f8); background: var(--bg, #14121a); border-color: var(--accent, #c8a86e); font-weight: 600; } .sg-tab-add { flex: 0 0 auto; align-self: center; min-width: 28px; height: 24px; padding: 0 6px; font-size: 16px; line-height: 1; /* --dim on the tab strip measured 4.29:1 for the "+". This is the LAST `color` in this rule, so it is the one that wins -- an earlier declaration in the same block would be silently overridden. */ color: var(--text, #f2f0f8); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; } .sg-tab-add:hover:not(:disabled) { background: var(--accent-tint, rgba(200, 168, 110, 0.12)); color: var(--bright, #f2f0f8); } .sg-tab-add:disabled { opacity: 0.4; cursor: default; } .sg-tab-rename { width: 110px; font: inherit; color: var(--bright, #f2f0f8); background: var(--bg, #14121a); border: 1px solid var(--accent, #c8a86e); border-radius: 4px; padding: 1px 5px; } .sg-tab-rename:focus { outline: none; } /* Right-click menu on a tab. position:fixed via CSSOM (a style attribute is * dropped by the CSP). */ .sg-tab-menu { position: fixed; z-index: 60; min-width: 150px; padding: 4px; display: flex; flex-direction: column; gap: 1px; background: var(--panel, #25232d); border: 1px solid var(--border, rgba(255, 255, 255, 0.14)); border-radius: 9px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42); } .sg-tab-menu-item { text-align: left; padding: 7px 11px; font-size: 13px; color: var(--text, #d0cdd8); background: transparent; border: none; border-radius: 6px; cursor: pointer; } .sg-tab-menu-item:hover:not(:disabled) { background: var(--accent-tint, rgba(200, 168, 110, 0.14)); } .sg-tab-menu-item:disabled { opacity: 0.35; cursor: default; } .sg-tab-menu-item.danger { color: #e88; } .sg-tab-menu-item.danger:hover:not(:disabled) { background: rgba(220, 80, 80, 0.16); } /* --- mobile ---------------------------------------------------------- * MUST stay at the end of the file: these rules have the same specificity * as the ones they override, so source order is what makes them win. * ------------------------------------------------------------------- */ @media (max-width: 720px) { .sheet-topbar { padding: 4px 8px; gap: 4px 6px; flex-wrap: wrap; } /* Back arrow + title share the top row; the tool group (flex-basis 100%) forces itself onto its own scrolling row, then the actions wrap below. */ .sheet-topbar input.doc-title { flex: 1 1 auto; min-width: 80px; } .sheet-tools { gap: 4px; flex: 1 1 100%; } .sheet-tools button:not([class*="sg-"]) { padding: 6px 8px; min-width: 32px; } .sheet-formulabar .ref-box { width: 62px; } .sg-table th, .sg-table td { height: 28px; max-height: 28px; } .sg-corner, .sg-rowhead { width: 38px; min-width: 38px; max-width: 38px; } .sg-freeze-col .sg-table tbody td:first-of-type { left: 38px; } .sheet-statusbar { gap: 10px; font-size: 11px; } .sg-tab { padding: 7px 14px; font-size: 13px; } .sg-tab-add { height: 28px; font-size: 18px; } .sg-tab-menu-item { padding: 9px 12px; } } /* --- the grid gets the space the shared footer was taking -------------- This editor is built so the editor owns the viewport: the grid scrolls, /* --- the grid gets the space the shared footer was taking -------------- This editor is built so "the editor owns the viewport: the grid scrolls, the page does not" (see .sheet-shell at the top of this file). But chrome.v1.js appends #dl-footer to as a sibling AFTER the shell, so the shell could only ever fill the viewport MINUS that footer. Measured at 1999x1249: the shell stopped at y=1090 while the footer occupied 1114-1209 — about 119px, four rows of grid, that the spreadsheet never got. The documents editor solves this by RELOCATING the footer into its scrollable document pane; a spreadsheet has no equivalent end-of-content to put it after (the grid scrolls internally and is virtualised), so here it is simply not rendered. Scoped to .sheet-editor-page and NOT .sheet-page: the public share view carries the same body class and keeps its footer, because a first-time visitor landing on someone's shared sheet is exactly who it is for. */ body.sheet-editor-page #dl-footer { display: none !important; } /* The range currently being picked into a formula. ONE overlay rectangle, not a per-cell outline — outlining each cell drew dashes through the middle of a range. Dashed so it reads as "being chosen" rather than "selected", which is a solid fill. Its position is set from JS (see paintPick). */ .sg-pickbox { position: absolute; z-index: 6; pointer-events: none; border: 2px dashed var(--accent, #c8a86e); background: var(--accent-tint, rgba(200, 168, 110, 0.12)); } /* --- structured tables ------------------------------------------------ A declared range with a header row and banded body. Colours come from the same tokens the rest of the grid uses, so they track light, dark and the paid themes rather than being a second palette. */ .sg-cell.sg-tbl-head { font-weight: 700; background: var(--accent-tint, rgba(200, 168, 110, 0.16)); border-bottom: 2px solid var(--accent, #c8a86e); } .sg-cell.sg-tbl-band:not([class*="sg-bg-"]) { background: var(--card-hover, rgba(127, 127, 127, 0.06)); } /* Rows hidden by a table filter. The data is untouched — formulas still see it — this only stops it being drawn. */ tr.sg-row-hidden { display: none; }