/* The sheet engine's look. Every colour is a --sheet-* variable (README.md lists them). The
   defaults are declared with zero specificity on the grid and its pop-ups (menu, tips), so a
   project's `.sheet { --sheet-select: … }` or the `theme` option always wins. */
:where(.sheet, .sheet-popup) {
  --sheet-bg: #ffffff;          /* cells, inputs, menus */
  --sheet-chrome: #fbfbfd;      /* toolbar and panels */
  --sheet-text: #1d1d1f;
  --sheet-muted: #616e7c;       /* fx, read-only text, hints */
  --sheet-disabled: #b0b0b5;
  --sheet-control-line: #d2d2d7; /* borders of inputs, menus, pop-ups */
  --sheet-line: #e3e3e8;        /* grid lines */
  --sheet-head: #f5f5f7;        /* row and column headings */
  --sheet-head-text: #52606d;
  --sheet-head-line: #c9c9cf;   /* the headings' edge against the cells */
  --sheet-locked: #ffffff;      /* locked cells */
  --sheet-input: #fbf0d9;       /* cells to fill in (inputCells) */
  --sheet-select: #0071e3;      /* selection, active controls */
  --sheet-on-select: #ffffff;   /* text on --sheet-select */
  --sheet-range: color-mix(in srgb, var(--sheet-select) 12%, transparent);
  --sheet-range-on-fill: rgba(40, 32, 0, 0.09);
  --sheet-head-sel: #dde8fb;
  --sheet-head-sel-text: #0b3d91;
  --sheet-right: #e4f3ea;
  --sheet-right-line: #1d7348;
  --sheet-wrong: #fde8e6;
  --sheet-wrong-line: #b42318;
  /* The colours of the references in a formula being typed. */
  --sheet-ref-0: #2563d6;
  --sheet-ref-1: #d1344a;
  --sheet-ref-2: #8a4ad6;
  --sheet-ref-3: #198754;
  --sheet-ref-4: #b86e00;
  --sheet-ref-5: #0b8a9c;
}

.sheet {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sheet-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--sheet-bg);
  font: 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-width: 0;
}

.sheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--sheet-line);
  background: var(--sheet-chrome);
}
.sheet-toolbar button {
  font: inherit;
  font-weight: 500;
  height: 28px;
  min-width: 28px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sheet-text);
  cursor: pointer;
}
.sheet-toolbar button:hover { background: rgba(0, 0, 0, 0.055); border-color: transparent; }
.sheet-toolbar button:active { background: rgba(0, 0, 0, 0.09); }
.sheet-toolbar button:focus-visible { outline: 2px solid var(--sheet-select); outline-offset: -1px; }
.sheet-toolbar button:disabled { color: var(--sheet-disabled); background: transparent; cursor: default; }
/* A toggle that is on (Bold when the active cell is bold): a quiet pressed state, as in Excel. */
.sheet-toolbar button[data-action="bold"][aria-pressed="true"] { background: var(--sheet-head-sel); border-color: color-mix(in srgb, var(--sheet-select) 30%, var(--sheet-bg)); color: var(--sheet-head-sel-text); }
.sheet-toolbar select {
  font: inherit;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--sheet-line);
  border-radius: 6px;
  background: var(--sheet-bg);
  color: var(--sheet-text);
  /* A native list is as wide as its longest option ("Top and double bottom border"); cap it so
     the toolbar stays on one row whatever the page's own styles are. */
  max-width: 9.5em;
}
.sheet-toolbar-sep { align-self: center; width: 1px; height: 18px; background: var(--sheet-line); margin: 0 6px; }

.sheet-formula-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--sheet-line);
}
/* The Name Box: shows the selection; type a reference and press Enter to go there. */
.sheet-name-box {
  flex: none;
  width: 92px;
  box-sizing: border-box;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid var(--sheet-line);
  border-radius: 3px;
  background: var(--sheet-bg);
  color: var(--sheet-text);
  font: 13px ui-monospace, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
}
.sheet-name-box:hover { border-color: color-mix(in srgb, var(--sheet-control-line), var(--sheet-text) 18%); }
.sheet-name-box:focus { outline: none; border-color: var(--sheet-select); box-shadow: 0 0 0 1px var(--sheet-select); }
/* Cancel and Enter, active while a cell is being edited (as in Excel). */
.sheet-bar-buttons { display: inline-flex; flex: none; gap: 1px; }
.sheet-bar-buttons button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--sheet-text);
  font: 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.sheet-bar-buttons button:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); }
.sheet-bar-cancel:not(:disabled) { color: var(--sheet-wrong-line); }
.sheet-bar-enter:not(:disabled) { color: var(--sheet-right-line); }
.sheet-bar-buttons button:disabled { color: var(--sheet-disabled); cursor: default; }
.sheet-fx { flex: none; padding: 0 2px; color: var(--sheet-muted); font-style: italic; }
.sheet-formula-field { position: relative; flex: 1; min-width: 0; display: flex; }
.sheet-formula-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid var(--sheet-line);
  border-radius: 3px;
  font: 13px ui-monospace, Menlo, Consolas, monospace;
}
.sheet-formula-input[readonly] { background: var(--sheet-locked); color: var(--sheet-muted); }

.sheet-scroll {
  position: relative;
  overflow: auto;
  max-height: 70vh;
  outline: none;
}
/* No focus ring: like a spreadsheet, the selection box shows where the keyboard is. */

.sheet-table {
  border-collapse: collapse;
  table-layout: fixed;
  user-select: none;
}
.sheet-table th {
  position: sticky;
  background: var(--sheet-head);
  color: var(--sheet-head-text);
  font-weight: 500;
  border: 1px solid var(--sheet-line);
  padding: 2px 4px;
  z-index: 2;
}
.sheet-table thead th { top: 0; text-align: center; overflow: visible; white-space: nowrap; }
.sheet-table tbody th { left: 0; min-width: 36px; text-align: center; }
.sheet-table th { cursor: default; }
.sheet-table thead th.sheet-corner { left: 0; z-index: 3; }
/* The edge between the headings and the cells is a shade darker than the grid lines, as in a
   spreadsheet, so the headings read as a frame. (With collapsed borders the heading's side wins.) */
.sheet-table thead th { border-bottom-color: var(--sheet-head-line); }
.sheet-table tbody th { border-right-color: var(--sheet-head-line); }
/* With collapsed borders a sticky heading leaves its outer half-border open, and scrolled
   cells showed through that sliver; cover it. */
.sheet-table tbody th::before, .sheet-table thead th::before { content: ""; position: absolute; background: var(--sheet-head); pointer-events: none; }
.sheet-table tbody th::before { top: -1px; bottom: -1px; left: -2px; width: 2px; }
.sheet-table thead th::before { left: -1px; right: -1px; top: -2px; height: 2px; }
/* The right edge of a column heading: drag to resize, double-click to fit (cursor shows it). */
.sheet-col-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 6px;
  cursor: col-resize;
  touch-action: none;
}
.sheet-col-resize::after { content: ""; position: absolute; top: 3px; bottom: 3px; right: 0; width: 1px; background: transparent; }
.sheet-col-resize:hover::after, .sheet-resizing .sheet-col-resize:active::after { background: var(--sheet-select); }
.sheet-resizing, .sheet-resizing * { cursor: col-resize !important; user-select: none; }
.sheet-resize-tip {
  position: fixed;
  z-index: 1000;
  padding: 3px 7px;
  border: 1px solid var(--sheet-control-line);
  border-radius: 5px;
  background: var(--sheet-bg);
  color: var(--sheet-text);
  font: 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  white-space: nowrap;
}

/* The right-click menu on cells. It sits on the page (outside the grid), so it names its colours. */
.sheet-menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  padding: 5px;
  border: 1px solid var(--sheet-control-line);
  border-radius: 9px;
  background: var(--sheet-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  font: 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--sheet-text);
  outline: none;
}
.sheet-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}
.sheet-menu kbd { font: inherit; color: var(--sheet-muted); }
.sheet-menu button:hover:not(:disabled), .sheet-menu button:focus { outline: none; background: var(--sheet-select); color: var(--sheet-on-select); }
.sheet-menu button:hover:not(:disabled) kbd, .sheet-menu button:focus kbd { color: color-mix(in srgb, var(--sheet-on-select) 85%, transparent); }
.sheet-menu button:disabled { color: var(--sheet-disabled); }
.sheet-menu button:disabled kbd { color: var(--sheet-disabled); }
.sheet-menu-sep { height: 1px; margin: 4px 6px; background: var(--sheet-line); }
@media (pointer: coarse) {
  .sheet-menu button { padding: 11px 12px; font-size: 15px; }
  .sheet-menu kbd { display: none; } /* no keyboard to press them on */
  .sheet-col-resize { width: 12px; }
  .sheet-name-box { font-size: 16px; width: 84px; }
  .sheet-bar-buttons button { width: 32px; height: 32px; font-size: 16px; }
}

/* Cells (values drawn by grid-display.js). Like a spreadsheet: text sits at the bottom of the
   cell, is cut off at the cell's edge with no "…", and keeps its spaces (Accounting formats pad
   with them so the digits of positive and negative amounts line up). */
.sheet-table td {
  --cell-pad-bottom: 2px;
  border: 1px solid var(--sheet-line);
  height: 22px;
  padding: 0 4px var(--cell-pad-bottom);
  vertical-align: bottom;
  white-space: pre;
  overflow: hidden;
  text-overflow: clip;
  max-width: 0;
  cursor: cell;
}
.sheet-table td.v-top { vertical-align: top; padding-top: 2px; }
.sheet-table td.v-middle { vertical-align: middle; padding-bottom: 0; }
.sheet-table td.locked { background: var(--sheet-locked); }
.sheet-table td.input { background: var(--sheet-input); }
.sheet-table td.num { text-align: right; }
.sheet-table td.center { text-align: center; }
.sheet-table td.bold { font-weight: 700; }
.sheet-table td.italic { font-style: italic; }
.sheet-table td.underline .cell-text { text-decoration: underline; }
.sheet-table td.strike .cell-text { text-decoration: line-through; }
.sheet-table td.underline.strike .cell-text { text-decoration: underline line-through; }
/* Wrap text: the words wrap inside the cell and the row grows to fit them. */
.sheet-table td.wrap { white-space: pre-wrap; }
/* A fill character (Accounting's "* "): the currency sign at the left edge, the amount at the right. */
.sheet-table .cell-fill { display: flex; justify-content: space-between; }
/* Text running on over empty neighbours: drawn above them, cut at the first filled cell, and
   transparent to the pointer, so a click on it selects the cell underneath. */
.sheet-table td.spill { position: relative; overflow: visible; }
.sheet-table td.spill > .cell-text {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 0 4px var(--cell-pad-bottom);
  overflow: hidden;
  pointer-events: none;
}
.sheet-table td.spill.num > .cell-text { justify-content: flex-end; }
.sheet-table td.spill.center > .cell-text { justify-content: center; }
.sheet-table td.spill.v-top > .cell-text { align-items: flex-start; padding-top: 2px; }
.sheet-table td.spill.v-middle > .cell-text { align-items: center; padding-bottom: 0; }
/* No gridline where the text runs over it. */
.sheet-table td.gl-r-off { border-right-color: transparent; }
.sheet-table td.gl-l-off { border-left-color: transparent; }
/* Checked cells: the fill reaches the grid lines, and the cell's own grid lines take the status
   colour, flush, with no inner box (like a filled, bordered cell in a spreadsheet). With collapsed
   borders the browser keeps one line between two cells and picks it by width, then style: a 1px
   "double" line draws as a single line but wins over the plain grey "solid" ones around it.
   Borders from formats are set on the cell itself (paintStyle), so they still show. */
.sheet-table td.right { background: var(--sheet-right); border: 1px double var(--sheet-right-line); }
.sheet-table td.wrong { background: var(--sheet-wrong); border: 1px double var(--sheet-wrong-line); }
.sheet-table td.in-range { background-image: linear-gradient(var(--sheet-range), var(--sheet-range)); }
/* On coloured cells (inputs, checked cells) a blue tint turns murky green-grey; darken them
   instead, as a spreadsheet does with filled cells. */
.sheet-table td.in-range.input, .sheet-table td.in-range.right, .sheet-table td.in-range.wrong { background-image: linear-gradient(var(--sheet-range-on-fill), var(--sheet-range-on-fill)); }
/* Like a spreadsheet, the active cell of a range stays clear. */
.sheet-table td.in-range.selected { background-image: none; }
/* The selected rows' and columns' headings light up. */
.sheet-table th.head-sel { background: var(--sheet-head-sel); color: var(--sheet-head-sel-text); font-weight: 600; }
/* Whole columns/rows (a heading, Ctrl+Space, Shift+Space) and the corner (select all): solid headings. */
.sheet-table th.head-full { background: var(--sheet-select); color: var(--sheet-on-select); }

/* Boxes drawn over the cells: the selection with its fill handle, the fill preview and the
   coloured references of a formula being typed. Only the fill handle takes the pointer. */
.sheet-overlay { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; }
.sheet-sel, .sheet-active, .sheet-fill-preview, .sheet-ref { position: absolute; box-sizing: border-box; }
.sheet-sel { border: 2px solid var(--sheet-select); }
.sheet-sel.multi { border-width: 1px; }
.sheet-active { border: 2px solid var(--sheet-select); }
.sheet-fill-handle {
  /* A round dot centred on the outline's corner line (as in Google Sheets): 10px wide, so its
     right edge is 5px past the middle of the 2px border (1px past the padding edge). */
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--sheet-select);
  border: 1.5px solid var(--sheet-bg);
  cursor: crosshair;
  pointer-events: auto;
  touch-action: none;
}
/* A range's outline is 1px: the middle of its line is half a pixel further in. */
.sheet-sel.multi .sheet-fill-handle { right: -5.5px; bottom: -5.5px; }
/* A larger target than it looks, bigger still for a finger. */
.sheet-fill-handle::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
@media (pointer: coarse) {
  .sheet-fill-handle { width: 14px; height: 14px; right: -8px; bottom: -8px; }
  .sheet-sel.multi .sheet-fill-handle { right: -7.5px; bottom: -7.5px; }
  .sheet-fill-handle::after { inset: -10px; }
}
.sheet-fill-preview { border: 2px dashed var(--sheet-muted); }
/* Copied or cut cells: a moving dashed border (two-colour dashes, so it shows on top of the
   selection's own border) until Escape, another copy or an edit. The fill handle stays on top. */
.sheet-clip {
  position: absolute;
  box-sizing: border-box;
  z-index: 1;
  --ant: var(--sheet-select);
  background-image:
    linear-gradient(90deg, var(--ant) 50%, var(--sheet-bg) 50%),
    linear-gradient(90deg, var(--ant) 50%, var(--sheet-bg) 50%),
    linear-gradient(0deg, var(--ant) 50%, var(--sheet-bg) 50%),
    linear-gradient(0deg, var(--ant) 50%, var(--sheet-bg) 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: sheet-ants 0.6s linear infinite;
}
.sheet-clip[hidden] { display: none; }
.sheet-fill-handle { z-index: 2; }
@keyframes sheet-ants { to { background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px; } }
@media (prefers-reduced-motion: reduce) { .sheet-clip { animation: none; } }
.sheet-ref { border: 2px solid var(--ref); background: color-mix(in srgb, var(--ref) 10%, transparent); }
.ref-0 { --ref: var(--sheet-ref-0); }
.ref-1 { --ref: var(--sheet-ref-1); }
.ref-2 { --ref: var(--sheet-ref-2); }
.ref-3 { --ref: var(--sheet-ref-3); }
.ref-4 { --ref: var(--sheet-ref-4); }
.ref-5 { --ref: var(--sheet-ref-5); }

.sheet-editor-box {
  position: absolute;
  z-index: 4;
  background: var(--sheet-bg);
}
.sheet-editor {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  /* The box starts 1.5px outside the cell's edge (over its grid line, like the selection
     outline); with the 2px border and 4px padding the text lands where the cell's own text is. */
  padding: 0 4px;
  border: 2px solid var(--sheet-select);
  /* The cell's own font, so the text doesn't jump when editing starts (as in a spreadsheet). */
  font: inherit;
  color: var(--sheet-text);
  background: transparent;
  outline: none;
}

/* A formula's text with its references coloured, laid exactly over the input's own text
   (which is then transparent; the caret and selection still show through). */
.sheet-mirror {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  font: 13px ui-monospace, Menlo, Consolas, monospace;
  color: var(--sheet-text);
}
.sheet-mirror span { white-space: pre; }
.sheet-mirror .ref-0, .sheet-mirror .ref-1, .sheet-mirror .ref-2, .sheet-mirror .ref-3, .sheet-mirror .ref-4, .sheet-mirror .ref-5 { color: var(--ref); }
.sheet-editor-box .sheet-mirror { padding: 0 4px; border: 2px solid transparent; font: inherit; }
.sheet-formula-field .sheet-mirror { padding: 3px 6px; border: 1px solid transparent; }
.sheet-mirror:empty { display: none; }
input.mirrored { color: transparent; caret-color: var(--sheet-text); }
input.mirrored::selection { color: transparent; background: color-mix(in srgb, var(--sheet-select) 22%, transparent); }

.sheet-table td.invalid { outline: 2px dashed var(--sheet-wrong-line); outline-offset: -3px; }

.sheet-panel {
  padding: 8px;
  border-bottom: 1px solid var(--sheet-line);
  background: var(--sheet-chrome);
}
.sheet-form { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.sheet-form > strong { flex-basis: 100%; }
.sheet-form label { display: inline-flex; gap: 4px; align-items: center; }
.sheet-form input, .sheet-form select, .sheet-form button {
  font: inherit;
  padding: 2px 6px;
  border: 1px solid var(--sheet-line);
  border-radius: 4px;
  background: var(--sheet-bg);
}
.sheet-form button { cursor: pointer; }
.sheet-rule-list { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; }
.sheet-rule-list li { margin: 2px 0; }
.sheet-file {
  flex-basis: 100%;
  max-height: 160px;
  overflow: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--sheet-line);
  border-radius: 4px;
  background: var(--sheet-bg);
  font: 12px ui-monospace, Menlo, Consolas, monospace;
}
.sheet-levels, .sheet-cols, .sheet-types { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; }
.sheet-level { display: inline-flex; gap: 4px; }

/* Touch screens: bigger targets, 16px inputs (smaller text makes phones zoom in when typing),
   and the range-selection button, which a mouse doesn't need. */
.sheet-touch-only { display: none; }
.sheet-toolbar button[aria-pressed="true"] { background: var(--sheet-select); border-color: var(--sheet-select); color: var(--sheet-on-select); }
@media (pointer: coarse) {
  .sheet { font-size: 14px; }
  .sheet-touch-only { display: inline-block; }
  /* One row that scrolls sideways, instead of three rows of buttons above the cells. */
  .sheet-toolbar { gap: 6px; padding: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sheet-toolbar::-webkit-scrollbar { display: none; }
  .sheet-toolbar > * { flex: none; }
  .sheet-toolbar button, .sheet-toolbar select { min-height: 36px; padding: 6px 11px; }
  .sheet-formula-input, .sheet-editor { font-size: 16px; }
  .sheet-formula-input { min-height: 36px; }
  /* Taller rows for a finger; one line of text still sits mid-row, where the editor puts it. */
  .sheet-table td { height: 32px; --cell-pad-bottom: 7px; }
  .sheet-scroll { touch-action: manipulation; }
}
.sheet-table td.selected { background-image: none; }

/* ---- Typing in a cell (grid-edit.js) ---------------------------------------------------- */

/* The cell mode while typing (Enter, Edit or Point), next to the cell's name, like Excel's status bar. */
.sheet-mode {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sheet-head);
  color: var(--sheet-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: help;
}
.sheet-mode[data-mode="point"] { background: var(--sheet-head-sel); color: var(--sheet-head-sel-text); }
/* The reference being pointed at: a dashed outline, as Excel draws it. */
/* The reference the arrow keys move (Point mode): the same solid line as every reference, as in
   Google Sheets, with a little more tint so it's clear which one is live. */
.sheet-ref.pointing { background: color-mix(in srgb, var(--ref) 18%, transparent); }
/* While the formula bar is typed in, the cell shows the same entry but doesn't take clicks
   (a click there points at the cell). */
.sheet-editor-box.passive { pointer-events: none; }

/* Function list while a name is typed, and the argument hint inside a function's ( ). */
.sheet-assist {
  position: absolute;
  z-index: 6;
  width: max-content;
  min-width: 180px;
  max-width: min(420px, 90vw);
  box-sizing: border-box;
  border: 1px solid var(--sheet-control-line);
  border-radius: 6px;
  background: var(--sheet-bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font: 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--sheet-text);
  text-align: left;
  white-space: normal;
}
.sheet-assist-list { padding: 4px 0; }
.sheet-assist-item { padding: 3px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }
.sheet-assist-item:hover { background: var(--sheet-head); }
.sheet-assist-item.active { background: var(--sheet-select); color: var(--sheet-on-select); }
.sheet-assist-about { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 6px 10px 4px; border-top: 1px solid var(--sheet-line); color: var(--sheet-muted); }
.sheet-assist-about b { font: 600 12px ui-monospace, Menlo, Consolas, monospace; color: var(--sheet-text); overflow-wrap: anywhere; }
.sheet-assist-keys { color: var(--sheet-muted); font-size: 11px; }
.sheet-assist-hint { padding: 4px 8px; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.sheet-assist-hint b { font-weight: 700; }
@media (pointer: coarse) {
  .sheet-assist { font-size: 14px; }
  .sheet-assist-item { padding: 8px 12px; }
}