/* Extra styles for the Sheets editor menus and views. */

/* ---------------------------------------------------------------- zoom
   The editor sets --sh-row (row height) and --sh-font (cell font size) on .sheet-area. */
.sheet-area .c { height: var(--sh-row, 24px); line-height: calc(var(--sh-row, 24px) - 1px); font-size: var(--sh-font, 13px); }
.sheet-area .cell-editor { min-height: 0; }

/* ---------------------------------------------------------------- View ▸ Show */
.sheet-area.no-gridlines .c { border-color: transparent; }
.sheet-editor.sh-no-formula-bar > .formula-bar { display: none; }
.sheet-editor.sh-no-formula-bar > .sheet-area { border-radius: 8px 8px 0 0; }

/* ---------------------------------------------------------------- full screen */
.sheet-editor.sh-fullscreen > .editor-head,
.sheet-editor.sh-fullscreen > .toolbar { display: none; }
.sheet-editor.sh-fullscreen > .formula-bar,
.sheet-editor.sh-fullscreen.sh-no-formula-bar > .sheet-area { margin-top: 8px; }
.sheet-tabs .sh-fs-exit { flex: none; margin-left: 4px; }

/* ---------------------------------------------------------------- frozen rows / columns
   The panes are sticky grid items stacked in the sizer's single grid cell, so they don't take up space
   and stay pinned to the top / left of the scrolling grid. */
.grid-scroll { overflow-anchor: none; }   /* the grid is virtualised: never let the browser re-anchor the scroll */
.grid-sizer { display: grid; grid-template-columns: 100%; grid-template-rows: 100%; }
.fz-pane { grid-area: 1 / 1; position: sticky; z-index: 7; align-self: start; justify-self: start;
  background: var(--surface); }
.fz-top { top: 0; }
.fz-left { left: 0; }
.fz-corner { top: 0; left: 0; z-index: 8; }
.fz-clip { position: absolute; inset: 0; overflow: hidden; }
.fz-divider { position: absolute; z-index: 6; background: var(--border-strong); pointer-events: none; }
.fz-divider.h { left: 0; right: 0; bottom: -2px; height: 3px; }
.fz-divider.v { top: 0; bottom: 0; right: -2px; width: 3px; }
.fz-heads { position: absolute; top: 0; left: 0; z-index: 3; background: var(--grid-head); }
.fz-heads.fz-cols { height: 100%; }
.fz-heads.fz-rows { width: 100%; }
.fz-heads::after { content: ''; position: absolute; background: var(--border-strong); pointer-events: none; }
.fz-heads.fz-cols::after { top: 0; bottom: 0; right: -2px; width: 3px; }
.fz-heads.fz-rows::after { left: 0; right: 0; bottom: -2px; height: 3px; }

/* ---------------------------------------------------------------- menus */
.menu .color-pop { padding: 10px 12px; }
.sh-swatches { display: inline-flex; gap: 2px; width: 46px; flex: none; }
.sh-swatches i { flex: 1; height: 16px; border-radius: 3px; border: 1px solid var(--border-strong); }

/* ---------------------------------------------------------------- dialogs */
.sh-options { display: flex; flex-direction: column; gap: 8px; }
.sh-field-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: -4px; }
.sh-import .select { width: 100%; }
.sh-stats { margin-top: 12px; }
.sh-stats-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sh-stats-nav b { flex: 1; text-align: center; }
.table td.sh-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.sh-wrap { word-break: break-word; }
.sh-about-logo { width: 40px; height: 40px; border-radius: 10px; }
.sh-about-logo .icon { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- grid cells
   A cell is a flex column so its text sits at the bottom (Google's default), the top (.va-t) or the middle (.va-m). */
:root { --sh-ink: #000000; --sh-link: #1155cc; --sh-note-bg: #ffffff; --sh-prot: rgba(95, 99, 104, .2); --sh-spill: rgba(26, 115, 232, .55);
  --sh-cmt: #f29900; --sh-pivot: #188038; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sh-ink: #e7e9ee; --sh-link: #8ab4f8; --sh-note-bg: #2a2e35; --sh-prot: rgba(232, 234, 237, .18); --sh-spill: rgba(138, 180, 248, .6);
    --sh-cmt: #fbbc04; --sh-pivot: #81c995; }
}
:root[data-theme="dark"] { --sh-ink: #e7e9ee; --sh-link: #8ab4f8; --sh-note-bg: #2a2e35; --sh-prot: rgba(232, 234, 237, .18); --sh-spill: rgba(138, 180, 248, .6);
  --sh-cmt: #fbbc04; --sh-pivot: #81c995; }

.sheet-area .c { display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-area .c.va-t { justify-content: flex-start; }
.sheet-area .c.va-m { justify-content: center; }
.sheet-area .c > .ct { display: block; min-width: 0; white-space: pre; }
.sheet-area .c.wr > .ct { white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-area .c.rot { align-items: center; justify-content: center; }
.sheet-area .c.rot > .ct { display: inline-block; }
.sheet-area .c.mg { background: var(--surface); }
.sheet-area .c.lk { color: var(--sh-link); }
.sheet-area .c.ovf { overflow: visible; z-index: 2; background: transparent; border-color: transparent; }
.sh-ovc { position: absolute; width: 1px; z-index: 1; pointer-events: none; }
.sheet-area .c.sk { display: block; padding: 0; }
.sheet-area .c.sk .sh-spark { display: block; }
.sheet-area .c.im { padding: 0; align-items: center; justify-content: center; }
.sh-img { display: block; max-width: none; pointer-events: none; }
.sh-note-mark { position: absolute; top: 0; right: 0; z-index: 1; width: 0; height: 0; border-style: solid; border-width: 0 7px 7px 0;
  border-color: transparent var(--sh-ink) transparent transparent; pointer-events: none; }
/* data validation widgets inside a flex-column cell */
.sheet-area .c.shr-dv-cell { flex-direction: row; align-items: center; }
.sheet-area .c.shr-dv-chip, .sheet-area .c.shr-dv-arrow { justify-content: flex-start; }
.sheet-area .c.shr-dv-check { justify-content: center; }
.sheet-area .c.shr-dv-cell.va-t { align-items: flex-start; padding-top: 2px; }

/* borders sit on the gridlines, over the cells */
.sh-bd { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
/* View ▸ Show ▸ Protected ranges; ranges a rules panel points at; the outline of an array (spill) */
.sh-prot { position: absolute; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--sh-prot) 0 2px, transparent 2px 8px); }
.sh-hl { position: absolute; z-index: 3; pointer-events: none; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.sh-spill-box { position: absolute; z-index: 3; pointer-events: none; border: 1px solid var(--sh-spill); }
.formula-input.sh-spilled { color: var(--text-3); }

/* ---------------------------------------------------------------- headers: row resizing, unhide arrows */
.row-resize { position: absolute; left: 0; width: 100%; height: 7px; margin-top: -4px; cursor: row-resize; z-index: 2; }
.row-resize:hover, .row-resize.drag { background: var(--accent); opacity: .6; }
.sh-unhide { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0;
  border: 0; border-radius: 3px; background: var(--grid-head); cursor: pointer; }
.sh-unhide:hover { background: var(--grid-head-sel); }
.sh-unhide::before, .sh-unhide::after { content: ""; width: 0; height: 0; border: 4px solid transparent; }
.sh-unhide-r { right: 2px; width: 14px; height: 18px; margin-top: -9px; flex-direction: column; }
.sh-unhide-r::before { border-top-width: 0; border-bottom-color: var(--text-2); }
.sh-unhide-r::after { border-bottom-width: 0; border-top-color: var(--text-2); }
.sh-unhide-c { top: 5px; width: 18px; height: 14px; margin-left: -9px; }
.sh-unhide-c::before { border-left-width: 0; border-right-color: var(--text-2); }
.sh-unhide-c::after { border-right-width: 0; border-left-color: var(--text-2); }
.sh-unhide-r:hover::before { border-bottom-color: var(--accent); }
.sh-unhide-r:hover::after { border-top-color: var(--accent); }
.sh-unhide-c:hover::before { border-right-color: var(--accent); }
.sh-unhide-c:hover::after { border-left-color: var(--accent); }

/* ---------------------------------------------------------------- tabs */
.sheet-tab.sh-tab-colored { box-shadow: inset 0 -3px 0 var(--sh-tab); }
.sheet-tab.active.sh-tab-colored { box-shadow: var(--shadow-1), inset 0 -3px 0 var(--sh-tab); }
.sheet-tab.sh-tab-hidden { font-style: italic; opacity: .75; }

/* ---------------------------------------------------------------- toolbar */
.toolbar.sh-toolbar .icon-btn.sh-tbtn { width: auto; min-width: 32px; padding: 0 6px; gap: 1px; }
.toolbar.sh-toolbar .icon-btn.sh-drop { padding: 0 2px 0 6px; }
.toolbar.sh-toolbar .icon-btn svg.icon.sh-caret { width: 14px; height: 14px; opacity: .7; }
.toolbar.sh-toolbar .sh-tlabel { font: 600 13px var(--font); white-space: nowrap; }
.toolbar.sh-toolbar .sh-cur, .toolbar.sh-toolbar .sh-123 { min-width: 14px; text-align: center; }
.toolbar.sh-toolbar .sh-font .sh-tlabel { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.toolbar.sh-toolbar .sh-zoom .sh-tlabel { font-weight: 500; min-width: 34px; }
.toolbar.sh-toolbar .sh-ticon { display: inline-flex; }
.toolbar.sh-toolbar .sh-pair { display: inline-flex; flex: none; }
.toolbar.sh-toolbar .icon-btn.sh-split { min-width: 16px; padding: 0 1px; }
.sheet-area.sh-painting .grid-scroll { cursor: copy; }

/* ---------------------------------------------------------------- hover cards (notes, invalid values) and the link card */
.sh-card { position: fixed; z-index: 960; max-width: 300px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--sh-note-bg); color: var(--text); box-shadow: var(--shadow-2); font-size: 13px; line-height: 1.4; pointer-events: none; }
.sh-card-note { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: hidden; }
.sh-card-invalid { padding-left: 8px; border-left: 3px solid var(--shr-flag, var(--danger)); }
.sh-card-note + .sh-card-invalid { margin-top: 8px; }
.sh-link-card { position: fixed; z-index: 960; display: flex; align-items: center; gap: 2px; max-width: min(440px, calc(100vw - 16px));
  padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-2); font-size: 13px; }
.sh-link-icon { display: inline-flex; color: var(--text-2); flex: none; }
.sh-link-url { flex: 1; min-width: 0; margin: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-anchor { position: fixed; visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- the note editor */
.sh-note-editor { position: absolute; z-index: 9; width: 240px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--sh-note-bg); box-shadow: var(--shadow-2); }
.sh-note-ta { display: block; width: 100%; min-height: 110px; max-height: 320px; padding: 0; border: 0; outline: none; resize: vertical;
  background: transparent; color: var(--text); font: 13px/1.4 var(--font); }
.sh-note-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }

/* ---------------------------------------------------------------- dialogs */
.sh-msg { margin: 0; }
.sh-unsaved { width: 100%; box-sizing: border-box; font: 12px/1.45 var(--mono, ui-monospace, Consolas, monospace); white-space: pre; resize: vertical; }
.sh-msg-row { display: flex; align-items: flex-start; gap: 10px; }
.sh-msg-row > .icon { flex: none; margin-top: 2px; color: var(--text-2); }
.sh-error { color: var(--danger); font-size: 13px; }

/* ---------------------------------------------------------------- comments: cell marks, the thread card, Comment history */
.sh-cmt-mark { position: absolute; top: 0; right: 0; z-index: 1; width: 0; height: 0; border-style: solid; border-width: 0 9px 9px 0;
  border-color: transparent var(--sh-cmt) transparent transparent; pointer-events: none; }
.sh-cmt-card { position: fixed; z-index: 960; display: flex; flex-direction: column; gap: 10px; width: 300px; max-width: calc(100vw - 16px);
  max-height: 360px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text); box-shadow: var(--shadow-2); font-size: 13px; line-height: 1.4; }
.sh-cmt-item + .sh-cmt-item { border-top: 1px solid var(--border); padding-top: 10px; }
.sh-cmt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; min-width: 0; }
.sh-cmt-head b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-cmt-head .faint { flex: none; font-size: 12px; }
.sh-cmt-card .ws-cmt-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.sh-cmt-reply { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--border); }
.sh-cmt-more { margin-top: 2px; font-size: 12px; }
.sh-cmt-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.sh-cmt-all { align-self: flex-start; }
.sh-cmt-history { position: relative; }
.sh-cmt-count { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--sh-cmt); color: #202124; font: 700 10px/16px var(--font); text-align: center; pointer-events: none; }

/* ---------------------------------------------------------------- other people's selections (presence) */
.sh-remote, .sh-refs { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.sh-pr-box, .sh-pr-cell { position: absolute; z-index: 3; border: 2px solid; pointer-events: none; }
.sh-remote .pr-flag.sh-pr-flag { position: absolute; z-index: 5; display: block; height: 17px; max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; transform: translateY(-100%); transition: max-width .25s ease, height .25s ease, padding .25s ease, color .2s ease; }
.sh-remote .pr-flag.sh-pr-flag.down { transform: none; border-radius: 0 3px 3px 3px; }
.sh-remote .pr-flag.sh-pr-flag.mini { max-width: 6px; height: 6px; padding: 0; color: transparent; }
@media (prefers-reduced-motion: reduce) { .sh-remote .pr-flag.sh-pr-flag { transition: none; } }

/* ---------------------------------------------------------------- the references of the formula being typed */
.sh-ref { position: absolute; z-index: 4; pointer-events: none; border: 2px solid var(--sh-ref, var(--accent));
  background: color-mix(in srgb, var(--sh-ref, var(--accent)) 10%, transparent); }

/* ---------------------------------------------------------------- filters: green row numbers while rows are filtered out */
.rh.sh-filtered:not(.sel):not(.full) { color: var(--sd-filter, #188038); font-weight: 650; }

/* ---------------------------------------------------------------- pivot tables: the anchor's mark and Google's Edit button */
.sh-pivot-mark { position: absolute; top: 0; left: 0; z-index: 1; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0 0;
  border-color: var(--sh-pivot) transparent transparent transparent; pointer-events: none; }
.sh-pivot-edit { position: absolute; z-index: 6; height: 28px; padding: 0 10px; gap: 4px; box-shadow: var(--shadow-1); }
.sh-pivot-edit svg.icon { width: 16px; height: 16px; }

/* the dark filter view bar sits between the formula bar and the grid, as wide as they are */
.sheet-editor > .sd-fv-bar { flex: none; margin: 0 12px; }

/* elements shown and hidden with the hidden attribute that set their own display */
.sh-link-card[hidden], .sh-cmt-card[hidden], .sh-pivot-edit[hidden], .sh-cmt-count[hidden] { display: none; }

@media (max-width: 700px) {
  .toolbar.sh-toolbar .sh-font .sh-tlabel { max-width: 56px; }
  .sheet-editor > .sd-fv-bar { margin-left: 4px; margin-right: 4px; }
  .sh-note-editor { width: 200px; }
  .sh-cmt-card { width: 260px; }
}
@media (forced-colors: active) {
  .sh-note-mark { border-right-color: CanvasText; }
  .sh-cmt-mark { border-right-color: Highlight; }
  .sh-pivot-mark { border-top-color: CanvasText; }
  .sh-pr-box, .sh-pr-cell, .sh-ref { border-color: Highlight; }
  .sh-spill-box, .sh-hl { border-color: Highlight; }
}

/* ---------------------------------------------------------------- big sheets: row strips (sheets.js stripLayer) */
.sh-strips { position: absolute; top: 0; left: 0; }
.sh-row { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* a row whose window is still loading, and a value worked out elsewhere (IMPORTRANGE, IMPORTHTML, a custom function) */
.sh-ld { position: absolute; top: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, var(--sh-shimmer, rgba(127, 127, 127, .12)) 45%, transparent 90%) 0 0 / 480px 100% repeat-x;
  animation: sh-shimmer 1.1s linear infinite; }
.c.sh-loading { color: var(--text-3); }
.c.sh-loading::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, var(--sh-shimmer, rgba(127, 127, 127, .16)) 50%, transparent 100%) 0 0 / 200% 100% no-repeat;
  animation: sh-shimmer-cell 1.2s ease-in-out infinite; }
@keyframes sh-shimmer { from { background-position: -480px 0; } to { background-position: 480px 0; } }
@keyframes sh-shimmer-cell { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .sh-ld, .c.sh-loading::after { animation: none; } }
/* a formula just typed: the cell's previous value, greyed, until the server's result comes (a fraction of a second) */
.c.sh-pending .ct { opacity: .5; }
/* IMPORTRANGE waiting for "Allow access" */
.sh-access-mark { position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 6px 6px 0 0;
  border-color: #e8a400 transparent transparent transparent; pointer-events: none; }
.sh-access-card { gap: 10px; padding: 10px 12px; align-items: flex-start; }
.sh-access-text { font-size: 13px; line-height: 1.4; color: var(--text-2); white-space: normal; max-width: 320px; }
.sh-access-card[hidden] { display: none; }
/* an IMAGE() that can't be shown (not https) */
.sh-img-off { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, transparent 0 6px, var(--grid-line) 6px 7px); }
/* Extensions ▸ Macros ▸ Record macro */
.sh-macro-bar { position: fixed; left: 24px; bottom: 60px; z-index: 900; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-3);
  font-size: 13px; color: var(--text); max-width: calc(100vw - 48px); }
.sh-macro-bar .check { margin: 0; }
.sh-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: sh-rec 1.2s ease-in-out infinite; }
@keyframes sh-rec { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sh-rec-dot { animation: none; } }
.sh-macro-row { display: grid; grid-template-columns: minmax(140px, 1fr) 170px minmax(80px, auto) auto; gap: 8px; align-items: center; }
.sh-macro-fn { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-macro-removed { opacity: .5; }
.sh-macro-removed input, .sh-macro-removed select { text-decoration: line-through; }
@media (max-width: 640px) { .sh-macro-row { grid-template-columns: 1fr auto; } .sh-macro-fn { display: none; } }