/* spreadsheet-viewer: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.sv-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-tabs[hidden] { display: none; }
.sv-tabs button { padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px 8px 0 0; background: var(--mist); font: 600 0.88rem var(--text); color: var(--slate); cursor: pointer; }
.sv-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-bottom-color: var(--paper); }
.sv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sv-toolbar input[type="search"] { flex: 1 1 220px; }
.sv-grid-wrap { max-height: 65vh; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: #fff; }
.sv-grid { border-collapse: separate; border-spacing: 0; margin: 0; font-size: 0.88rem; width: max-content; min-width: 100%; }
.sv-grid th, .sv-grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px 8px; min-width: 90px; max-width: 320px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.sv-grid thead tr:first-child th { position: sticky; top: 0; z-index: 2; background: var(--mist); padding: 0; text-align: center; }
.sv-grid .sv-header-row th { background: #F7F9FC; font-weight: 700; }
.sv-sort { width: 100%; padding: 5px 8px; border: 0; background: none; font: 600 0.8rem var(--text); color: var(--slate); cursor: pointer; }
.sv-sort:hover { color: var(--ink); }
.sv-grid tbody th.sv-num, .sv-grid thead tr th:first-child { position: sticky; left: 0; z-index: 1; min-width: 52px; background: var(--mist); color: var(--slate-2); font-weight: 500; font-size: 0.78rem; text-align: right; white-space: nowrap; }
.sv-grid thead tr:first-child th:first-child { z-index: 3; }
.sv-del { margin-left: 6px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: transparent; cursor: pointer; font-size: 0.8rem; line-height: 18px; }
.sv-grid tr:hover .sv-del, .sv-del:focus-visible { background: var(--bad-soft); color: var(--bad); }
.sv-grid td:focus, .sv-grid th[data-r]:focus { outline: 2px solid var(--signal); outline-offset: -2px; background: var(--signal-soft); }
#sv-editor { display: flex; flex-direction: column; gap: 12px; }
#sv-editor[hidden] { display: none; }