/* ==========================================================================
   EmeraldSheets — client-side spreadsheet application styles
   Design language: clean, modern desktop productivity suite
   ========================================================================== */

:root {
  --accent: #217346;
  --accent-dark: #185c37;
  --accent-darker: #124430;
  --accent-tint: #e7f2eb;
  --accent-tint-2: #cde5d7;
  --sel-fill: rgba(33, 115, 70, 0.12);
  --hdr-sel: #bfd9cb;
  --chrome: #f5f5f5;
  --chrome-2: #edebe9;
  --chrome-3: #e1dfdd;
  --line: #d4d4d4;
  --line-soft: #e6e4e2;
  --line-strong: #c0bebc;
  --grid-line: #dfe1e5;
  --ink: #201f1e;
  --ink-2: #3b3a39;
  --ink-3: #605e5c;
  --ink-4: #8a8886;
  --paper: #ffffff;
  --danger: #a4262c;
  --warn: #8a6413;
  --ok: #107c10;
  --shadow-1: 0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.10);
  --shadow-2: 0 6.4px 14.4px rgba(0,0,0,.15), 0 1.2px 3.6px rgba(0,0,0,.10);
  --shadow-3: 0 12px 32px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12);
  --radius: 4px;
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hdr-h: 44px;
  --ribbon-tabs-h: 30px;
  --ribbon-body-h: 96px;
  --formula-h: 28px;
  --status-h: 26px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--chrome);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: default; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-width: 560px;
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   Application header
   ========================================================================== */
#app-header {
  height: var(--hdr-h);
  background: linear-gradient(180deg, #217346 0%, #1e6a40 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 12px;
  flex: none;
  position: relative;
  z-index: 60;
}
.hdr-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-logo { display: flex; align-items: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.wb-meta { display: flex; flex-direction: column; min-width: 0; }
#wb-title {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  width: 240px;
  text-overflow: ellipsis;
}
#wb-title:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
#wb-title:focus { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); }
.wb-sub { display: flex; gap: 10px; align-items: baseline; padding-left: 7px; font-size: 11px; color: rgba(255,255,255,.85); }
.linklike {
  background: none; border: none; color: inherit; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.linklike:hover { color: #fff; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: transparent; border-radius: 3px;
  color: inherit; padding: 0;
}
.iconbtn:hover { background: rgba(0,0,0,.08); }
.iconbtn:disabled { opacity: .38; }
.iconbtn svg { width: 16px; height: 16px; }
#hdr-undo, #hdr-redo { color: #fff; }
#hdr-undo:hover, #hdr-redo:hover { background: rgba(255,255,255,.15); }
#hdr-undo:disabled, #hdr-redo:disabled { opacity: .45; }

/* ==========================================================================
   Ribbon
   ========================================================================== */
#ribbon { flex: none; background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
#ribbon-tabs {
  height: var(--ribbon-tabs-h); display: flex; align-items: stretch; padding: 0 8px; gap: 2px;
  background: var(--chrome);
}
.ribbon-tab {
  border: none; background: transparent; padding: 0 14px; font-size: 12.5px; color: var(--ink-2);
  border-radius: 4px 4px 0 0; position: relative;
}
.ribbon-tab:hover { background: var(--chrome-2); }
.ribbon-tab.active { background: var(--paper); color: var(--accent-dark); font-weight: 600; }
.ribbon-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2.5px; background: var(--accent); border-radius: 2px 2px 0 0; }
.ribbon-tabs-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
#ribbon-body { height: var(--ribbon-body-h); display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; background: var(--paper); }
.rb-group {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 5px 9px 3px; border-right: 1px solid var(--line-soft); flex: none;
}
.rb-group-label { text-align: center; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; white-space: nowrap; }
.rb-controls { display: flex; align-items: flex-start; gap: 2px; flex: 1; }
.rb-sep { width: 1px; background: var(--line-soft); margin: 4px 3px; flex: none; }
.rb-stack { display: flex; flex-direction: column; gap: 2px; justify-content: center; height: 100%; }

.rbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 34px; height: 62px; padding: 4px 7px; border: none; background: transparent;
  border-radius: 3px; color: var(--ink-2); font-size: 11px; line-height: 1.15; text-align: center;
}
.rbtn:hover { background: var(--chrome-2); }
.rbtn:active { background: var(--chrome-3); }
.rbtn.on { background: var(--accent-tint-2); color: var(--accent-darker); box-shadow: inset 0 0 0 1px var(--accent-tint-2); }
.rbtn svg { width: 19px; height: 19px; }
.rbtn small { font-size: 10.5px; }
.rbtn.split::after { content: "▾"; font-size: 8px; margin-top: -2px; color: var(--ink-3); }
.rbtn.wide { flex-direction: row; height: 23px; min-width: 0; gap: 6px; padding: 0 8px; }
.rbtn.wide svg { width: 14px; height: 14px; }
.rbtn.tall-narrow { height: 62px; min-width: 30px; }
.rbtn-col {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; background: transparent; border-radius: 3px; color: var(--ink-2);
}
.rbtn-col:hover { background: var(--chrome-2); }
.rbtn-col.on { background: var(--accent-tint-2); color: var(--accent-darker); }
.rbtn-col svg { width: 16px; height: 16px; }

.rb-select {
  height: 24px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
  font-size: 12px; color: var(--ink-2); padding: 0 2px; max-width: 132px;
}
.rb-select:focus { border-color: var(--accent); }
.rb-size { width: 52px; }
.rb-pair { display: flex; gap: 4px; align-items: center; }
.rb-color-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 52px; min-width: 34px; border: none; background: transparent; border-radius: 3px; font-size: 10.5px; color: var(--ink-2); padding: 2px 6px; }
.rb-color-btn:hover { background: var(--chrome-2); }
.rb-color-btn .swatch-bar { width: 20px; height: 4px; border-radius: 1px; border: 1px solid rgba(0,0,0,.2); }

/* ==========================================================================
   Formula row (name box + formula bar)
   ========================================================================== */
#formula-row {
  height: var(--formula-h); display: flex; align-items: stretch; background: var(--paper);
  border-bottom: 1px solid var(--line); flex: none; position: relative; z-index: 45;
}
#formula-row.expanded #formula-bar-wrap { align-items: flex-start; }
#formula-row.expanded #formula-input { height: 96px; }
#name-box-wrap { display: flex; align-items: center; border-right: 1px solid var(--line); padding: 3px 4px 3px 6px; position: relative; flex: none; }
#name-box {
  width: 108px; height: 100%; border: 1px solid transparent; border-radius: 2px; background: var(--paper);
  font-size: 12px; padding: 0 4px;
}
#name-box:hover { border-color: var(--chrome-3); }
#name-box:focus { border-color: var(--accent); }
#name-box.error { border-color: var(--danger); background: #fdf3f4; }
.namebox-dd {
  width: 16px; height: 22px; border: none; background: transparent; color: var(--ink-3); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.namebox-dd:hover { background: var(--chrome-2); }
.namebox-dd svg { width: 12px; height: 12px; }
.fx-group { display: flex; align-items: center; gap: 1px; padding: 2px 6px; border-right: 1px solid var(--line); flex: none; }
.fx-btn { border: none; background: transparent; font-style: italic; font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: var(--ink-3); width: 30px; height: 22px; border-radius: 3px; }
.fx-btn:hover { background: var(--chrome-2); color: var(--ink); }
#formula-bar-wrap { flex: 1; display: flex; padding: 3px 4px; min-width: 0; }
#formula-input {
  flex: 1; border: 1px solid transparent; border-radius: 2px; resize: none;
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 20px;
  padding: 0 6px; background: var(--paper); height: 100%; min-width: 60px;
}
#formula-input:hover { border-color: var(--chrome-3); }
#formula-input:focus { border-color: var(--accent); }
.expand-grip { width: 18px; display: flex; align-items: center; justify-content: center; color: var(--ink-4); cursor: pointer; flex: none; }
.expand-grip svg { width: 14px; height: 14px; stroke-width: 2.5; transition: transform .18s ease; }
#formula-row.expanded .expand-grip svg { transform: rotate(180deg); }
.expand-grip:hover { color: var(--ink-2); }

/* ==========================================================================
   Grid area
   ========================================================================== */
#grid-area { flex: 1; position: relative; overflow: hidden; background: #fbfbfc; min-height: 120px; }
#grid-canvas { position: absolute; inset: 0; display: block; }
#cell-editor {
  position: absolute; display: none; border: 2px solid var(--accent); background: var(--paper);
  margin: 0; padding: 0 3px; overflow: hidden; resize: none; z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,.28); white-space: pre;
}
#cell-editor.ref-mode { border-color: #b75d0b; }
.ov-layer { position: absolute; inset: 0; pointer-events: none; z-index: 15; }

#fill-tip {
  position: absolute; display: none; z-index: 30; background: #33332f; color: #fff; font-size: 11.5px;
  padding: 2px 8px; border-radius: 3px; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-1);
}
#drag-hint {
  position: absolute; display: none; z-index: 30; pointer-events: none;
  border: 1.5px dashed var(--accent); background: rgba(33,115,70,.06);
}

/* Floating charts */
#chart-layer { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
.chart-frame {
  position: absolute; pointer-events: auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.chart-frame.selected { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-2); }
.chart-head {
  height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px;
  border-bottom: 1px solid var(--line-soft); cursor: move; flex: none; background: #fafaf9;
  border-radius: 3px 3px 0 0;
}
.chart-head .chart-title { font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.chart-head .iconbtn { width: 20px; height: 20px; color: var(--ink-3); }
.chart-head .iconbtn svg { width: 13px; height: 13px; }
.chart-canvas-wrap { flex: 1; position: relative; min-height: 0; }
.chart-canvas-wrap canvas { position: absolute; inset: 0; }
.chart-resize { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; cursor: nwse-resize; z-index: 5; }
.chart-resize::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }

/* ==========================================================================
   Sheet tabs & status bar (combined bottom bar; chrome skin overrides below)
   ========================================================================== */
#sheet-tabs { display: flex; align-items: stretch; overflow: hidden; flex: 1; min-width: 0; position: relative; }
.sheet-tab .tab-label { overflow: hidden; text-overflow: ellipsis; }
.sheet-tab .tab-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.sheet-tab.has-color .tab-dot { display: inline-block; }
.sheet-tab input {
  width: 110px; height: 20px; border: 1px solid var(--accent); border-radius: 2px; padding: 0 4px; font-size: 12px;
}
#sb-stats b { color: var(--ink-2); font-weight: 600; }
.sb-sep { width: 1px; height: 14px; background: var(--line-soft); flex: none; }

/* ==========================================================================
   Menus / popups / context menus
   ========================================================================== */
#popup-root { position: absolute; inset: 0; z-index: 90; pointer-events: none; }
.popup {
  position: absolute; background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow-3); padding: 4px; pointer-events: auto; min-width: 190px;
  max-height: 74vh; overflow-y: auto;
}
.popup.sub { box-shadow: var(--shadow-2); }
.popup-item {
  display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 8px; border-radius: 3px;
  font-size: 12.5px; color: var(--ink-2); cursor: default; white-space: nowrap; position: relative;
}
.popup-item:hover:not(.disabled) { background: var(--chrome-2); color: var(--ink); }
.popup-item.disabled { opacity: .4; }
.popup-item .pi-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink-2); }
.popup-item .pi-icon svg { width: 15px; height: 15px; }
.popup-item .pi-label { flex: 1; padding-right: 18px; }
.popup-item .pi-shortcut { color: var(--ink-4); font-size: 11px; margin-left: auto; }
.popup-item .pi-check { width: 14px; color: var(--accent); flex: none; }
.popup-item .pi-sub { color: var(--ink-4); font-size: 10px; margin-left: auto; }
.popup-item.checked .pi-label { font-weight: 600; }
.popup-sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }
.popup-title { font-size: 10.5px; color: var(--ink-4); padding: 4px 10px 2px; text-transform: uppercase; letter-spacing: .4px; }
.popup-colors { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; padding: 6px 8px; }
.popup-colors .sw { width: 18px; height: 18px; border-radius: 2px; border: 1px solid rgba(0,0,0,.18); padding: 0; }
.popup-colors .sw:hover { outline: 2px solid var(--accent); outline-offset: 0; }
.popup-colors .sw.none { position: relative; background: #fff; }
.popup-colors .sw.none::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 46%, #d13438 46%, #d13438 54%, transparent 54%); }
.popup-foot { display: flex; align-items: center; gap: 8px; padding: 5px 8px 2px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.popup-gallery { display: grid; grid-template-columns: repeat(3, 108px); gap: 4px; padding: 6px; }
.style-chip {
  display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 3px;
  font-size: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
}
.style-chip:hover { outline: 2px solid var(--accent); }
/* ---- Cell Styles gallery (Themes-style thumbnails + More) ---- */
.style-gallery { display: flex; align-items: center; gap: 4px; }
.style-thumb-row { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.style-thumb-row::-webkit-scrollbar { display: none; }
.style-thumb {
  width: 92px; height: 52px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08);
  cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s;
  overflow: hidden; position: relative; flex-shrink: 0; padding: 0; background: #fff;
}
.style-thumb-lg { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.style-thumb:hover { border-color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.style-thumb.active, .style-gallery-card.active .style-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(33,115,70,.18); }
.st-preview { position: absolute; inset: 10% 8%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); border: 1px solid #e5e7eb; }
.st-cell { display: flex; align-items: center; justify-content: center; font-size: 7px; line-height: 1; color: #3b3a39; background: #fff; border: 1px solid #eef0f2; overflow: hidden; white-space: nowrap; min-width: 0; }
.st-hot { font-size: 7px; }
.style-more-dd { display: flex; align-items: center; }
.more-thumb {
  width: 60px; height: 52px; min-width: 0; flex: 0 0 60px; box-sizing: border-box; padding: 8px 10px;
  border-radius: 6px; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.6);
  box-shadow: 0 1px 3px rgba(0,0,0,.05); color: rgba(44,62,80,.8); cursor: pointer; overflow: hidden; position: relative;
  transition: .2s; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.more-thumb.ms-dropdown-btn::after { content: "▼"; position: absolute; top: 50%; right: 6px; transform: translateY(-50%); font-size: 10px; color: rgba(44,62,80,.6); line-height: 1; pointer-events: none; transition: transform .2s; }
.more-thumb.ms-dropdown-btn[aria-expanded="true"]::after, .ms-dropdown.active .more-thumb.ms-dropdown-btn::after { transform: translateY(-50%) rotate(180deg); color: var(--accent); }
.more-thumb:hover { background: rgba(255,255,255,.9); border-color: var(--accent); color: #2c3e50; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.more-thumb[aria-expanded="true"] { background: rgba(33,115,70,.12); border-color: var(--accent); color: var(--accent); }
.more-thumb.ms-dropdown-btn { min-width: 0; padding: 8px 10px; font-size: 10px; }
.more-thumb-preview { display: flex; align-items: center; justify-content: center; color: inherit; }
.more-thumb-preview svg { display: block; width: 18px; height: 18px; }
.more-thumb-label { font-size: 10px; text-align: center; color: inherit; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.style-gallery-menu { max-width: 620px; padding: 14px 14px 16px; background: rgba(255,255,255,.99); min-width: 520px !important; }
.style-gallery-header { font-size: 11px; font-weight: 600; color: #858993; text-transform: uppercase; letter-spacing: .05em; padding: 0 2px 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 12px; }
.style-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.style-gallery-card { background: transparent; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: transform .18s; }
.style-gallery-card:hover .style-thumb { border-color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.style-gallery-label { font-size: 10.5px; font-weight: 500; color: #4b5563; margin-top: 1px; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .style-gallery-menu { min-width: 280px !important; max-width: 90vw; } .style-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.popup-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; }
.popup input[type="text"], .popup input[type="search"] {
  border: 1px solid var(--line); border-radius: 3px; height: 26px; padding: 0 8px; font-size: 12.5px; width: 100%;
}
.popup input:focus { border-color: var(--accent); }
.popup .filter-list { max-height: 220px; overflow-y: auto; padding: 2px 4px; }
.popup .filter-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 3px; font-size: 12.5px; }
.popup .filter-row:hover { background: var(--chrome-2); }
.popup .filter-row .cnt { color: var(--ink-4); font-size: 11px; margin-left: auto; }

/* ==========================================================================
   Modals
   ========================================================================== */
#modal-root { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.32); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; pointer-events: auto; overflow: auto; }
.modal {
  background: var(--paper); border-radius: 12px; box-shadow: var(--shadow-3); border: 1px solid var(--line-soft);
  width: 460px; max-width: 96vw; max-height: calc(100vh - 64px); overflow: hidden; display: flex; flex-direction: column;
  animation: modalIn .14s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; padding: 13px 18px 9px; flex: none; }
.modal-title { font-size: 15px; font-weight: 600; color: var(--ink); flex: 1; }
.modal-x { border: none; background: transparent; width: 28px; height: 28px; border-radius: 3px; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; }
.modal-x:hover { background: var(--chrome-2); }
.modal-body { padding: 4px 18px 14px; overflow: auto; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); flex: none; background: #fafaf9; border-radius: 0 0 6px 6px; }
.modal-foot .spacer { flex: 1; }
.btn {
  height: 30px; padding: 0 16px; border-radius: 3px; border: 1px solid var(--line); background: var(--paper);
  font-size: 12.5px; color: var(--ink-2);
}
.btn:hover { background: var(--chrome); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #fdf3f4; }
.btn:disabled { opacity: .45; }
.btn.small { height: 24px; padding: 0 10px; font-size: 11.5px; }

.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.form-row > label { width: 118px; flex: none; color: var(--ink-3); font-size: 12.5px; text-align: right; }
.form-row .fr-input { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.form-row input[type="text"], .form-row input[type="number"], .form-row select, .form-row textarea {
  height: 28px; border: 1px solid var(--line); border-radius: 3px; padding: 0 8px; font-size: 12.5px;
  width: 100%; min-width: 0; background: var(--paper);
}
.form-row textarea { height: auto; min-height: 54px; padding: 6px 8px; resize: vertical; font-family: Consolas, monospace; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent); }
.form-row input[type="checkbox"], .form-row input[type="radio"] { width: 15px; height: 15px; accent-color: var(--accent); }
.form-row input[type="color"] { width: 44px; height: 28px; border: 1px solid var(--line); border-radius: 3px; padding: 1px; background: var(--paper); }
.hint { font-size: 11.5px; color: var(--ink-4); margin: 2px 0 10px; }
.error-text { color: var(--danger); font-size: 12px; margin-top: 6px; }
.preview-box { border: 1px dashed var(--line); border-radius: 3px; background: #fafafa; padding: 8px 10px; font-family: Consolas, monospace; font-size: 12px; min-height: 30px; }
.kv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kv-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
.kv-table td:first-child { color: var(--ink-3); width: 130px; }
.listbox { border: 1px solid var(--line); border-radius: 3px; max-height: 240px; overflow-y: auto; }
.list-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.list-row:hover { background: var(--chrome); }
.list-row.selected { background: var(--accent-tint); }
.list-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list-row .sub { color: var(--ink-4); font-size: 11px; }
/* ---- Insert Function dialog: search, category rail, function list, detail ---- */
.fn { display: flex; gap: 14px; height: max(200px, min(372px, calc(100vh - 260px))); }
.fn-side { width: 172px; flex: none; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.fn-search { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 12.5px; color: var(--ink); }
.fn-search::placeholder { color: var(--ink-4); }
.fn-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--sel-fill); }
.fn-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
/* Gutter math: 1px border + 13px padding puts the capsule at x 10–14 — a roomy 9px
   off the frame — and the content edge at 14. The row's 7px padding starts the label
   at 21, so the capsule-to-label gap is 7px, matched on the right (1px border + 6px
   padding, no row padding). One value to tune the frame gap: .fn-pill/.fn-hov `left`. */
.fn-cats, .fn-list { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 4px 6px 4px 13px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 8px; overflow-y: auto; }
.fn-cats { flex: 1; min-height: 0; }
.fn-list { flex: 1; min-height: 0; }
/* Active = one vertical capsule per list, accent, parked on the active row. It never
   reacts to hover. height + translateY are driven from JS. easeOutCubic: quick start,
   long settle, no overshoot (a control point >1 reads as a bounce). */
.fn-pill { position: absolute; top: 0; left: 9px; width: 4px; height: 18px; border-radius: 999px; background: var(--accent); z-index: 1; pointer-events: none; opacity: 0; will-change: transform; transition: transform .3s cubic-bezier(.32,.72,0,1), height .3s cubic-bezier(.32,.72,0,1), opacity .18s ease; }
.fn-pill.on { opacity: 1; }
/* Hover = the same vertical capsule in neutral grey, following the pointer. Identical
   shape so the gutter reads as one column; only the colour says which is which. */
.fn-hov { position: absolute; top: 0; left: 9px; width: 4px; height: 18px; border-radius: 999px; background: var(--line-strong); z-index: 1; pointer-events: none; opacity: 0; will-change: transform; transition: transform .3s cubic-bezier(.32,.72,0,1), height .3s cubic-bezier(.32,.72,0,1), opacity .18s ease; }
.fn-hov.on { opacity: 1; }
.fn-cat { padding: 6px 0 6px 7px; border-radius: 5px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-cat.selected { color: var(--accent-darker); font-weight: 600; }
.fn-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 0 6px 7px; border-radius: 5px; }
.fn-nm { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fn-item.selected .fn-nm { color: var(--accent-darker); }
.fn-arg { flex: 1; min-width: 0; font-family: Consolas, monospace; font-size: 11.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-empty { padding: 20px 10px; text-align: center; font-size: 12.5px; color: var(--ink-4); }
.fn-detail { flex: none; min-height: 88px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--chrome); }
.fn-name { margin-bottom: 3px; font-size: 13px; font-weight: 600; color: var(--ink); }
.fn-sig { font-family: Consolas, monospace; font-size: 12px; color: var(--accent-dark); word-break: break-word; }
.fn-desc { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); }
/* ---- chart pane (Insert > Charts) ----
   In-flow sibling of #grid-area, like the Slides animation pane, so opening it
   shrinks the grid instead of covering cells — which is what lets you drag out a
   data range on the sheet while the range field is focused. */
#grid-row { flex: 1; display: flex; align-items: stretch; min-height: 0; }
.chart-pane {
  flex: none; width: 340px; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: transparent;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  overflow: hidden; min-height: 0;
}
.chart-pane[hidden] { display: none; }
.chart-pane-in { display: flex; flex-direction: column; min-height: 0; height: 100%; animation: cpIn 180ms cubic-bezier(.2, .85, .3, 1); }
@keyframes cpIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
/* Side-panel spacing scale — shared with the Slides animation pane and the
   Docs Outline/Pages/Footnotes panes:
     header  8px 16px   body  8px 16px 12px   foot  8px 16px 12px
   container margin 0 */
.cp-head {display: flex;align-items: center;gap: 8px;padding: 8px 16px;}
.cp-head-text { flex: 1; min-width: 0; }
/* Typography mirrors the Slides Animation pane (.ap-header) and the Docs
   Titles pane (.outline-head h3) — 14px/700, same ink, same tracking. */
.cp-title { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: rgba(44, 62, 80, .95); }
/* Same close-button shape as both: 6px padding, 6px radius, 14px glyph, no
   fixed hit box, .2s background/colour fade. */
.cp-x { flex: none; width: auto; height: auto; padding: 6px; border: none; border-radius: 6px; background: transparent; color: rgba(44, 62, 80, .5); cursor: pointer; line-height: 1; transition: background .2s, color .2s; display: flex; align-items: center; justify-content: center; }
.cp-x svg { width: 14px; height: 14px; }
.cp-x:hover { background: rgba(0, 0, 0, .06); color: rgba(44, 62, 80, .9); }
.cp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 12px; }
.cp-foot { flex: none; display: flex; gap: 8px; justify-content: flex-end; padding: 8px 16px 12px; background: transparent; }
.cp-sec-title { margin: 0 0 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.cp-sec-title-gap { margin-top: 16px; }
.chart-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.chart-type-cell { height: 62px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--ink-2); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.chart-type-cell svg { width: 24px; height: 24px; color: var(--ink-3); }
.chart-type-cell:hover { border-color: var(--accent); background: var(--chrome); }
.chart-type-cell:hover svg { color: var(--accent); }
.chart-type-cell:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint-2); }
.chart-type-cell.active { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); font-weight: 600; }
.chart-type-cell.active svg { color: var(--accent); }
/* the grid range preview — paintChart() only reads its ctx, so this is the real
   chart, not a mock-up */
.ch-preview { position: relative; height: 186px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--paper); overflow: hidden; }
.ch-preview canvas { display: block; }
.ch-preview-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; text-align: center; font-size: 11.5px; color: var(--ink-4); pointer-events: none; }
.ch-preview-hint { margin-top: 8px; }
/* armed = the range field has focus: the sheet outlines the live range and a drag
   on the grid re-points it (same striped treatment as a formula reference) */
#ch-range.cp-armed { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint-2); }
.cp-pick-tip { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11px; color: var(--accent-dark); }
.cp-pick-tip svg { width: 12px; height: 12px; flex: none; }
.cp-pick-tip[hidden] { display: none; }
.cp-field { margin-bottom: 9px; }
.cp-field > label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.cp-field input[type="text"] { width: 100%; height: 28px; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; font-size: 12.5px; font-family: Consolas, monospace; color: var(--ink); background: var(--paper); min-width: 0; }
.cp-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
.cp-check { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.cp-check input { accent-color: var(--accent); }
.cp-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-4); }
.cp-btn { height: 30px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.cp-btn:hover { background: var(--chrome); }
.cp-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cp-btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .chart-pane-in { animation: none; }
  .chart-type-cell, .cp-x, .cp-btn { transition: none; }
}
.table-preview { font-size: 12px; color: var(--ink-3); }
.table-preview table { border-collapse: collapse; font-family: Consolas, monospace; }
.table-preview td, .table-preview th { border: 1px solid var(--line-soft); padding: 3px 9px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-preview th { background: var(--chrome); font-weight: 600; }
.progressbar { height: 5px; border-radius: 3px; background: var(--chrome-3); overflow: hidden; margin: 8px 0; }
.progressbar > div { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s; }
.help-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.help-table td { padding: 4px 8px; border-bottom: 1px solid var(--line-soft); }
.help-table td:first-child { font-family: Consolas, monospace; color: var(--accent-dark); white-space: nowrap; width: 170px; }

/* ==========================================================================
   Find & Replace panel
   ========================================================================== */

/* ==========================================================================
   Toasts — white glass pill (Docs/Slides/Notes pattern)
   ========================================================================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  white-space: normal;
  word-break: break-word;
  max-width: 80vw;
  text-align: left;
  font-family: var(--font-ui);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}

/* ==========================================================================
   Clipboard helper & misc
   ========================================================================== */
#clip-helper { position: absolute; left: -9999px; top: 0; width: 10px; height: 10px; opacity: 0; }
.kbd { font-family: Consolas, monospace; background: var(--chrome); border: 1px solid var(--line-soft); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; font-size: 11px; }

/* ==========================================================================
   Print
   ========================================================================== */
#print-root { display: none; }
@media print {
  #app, , #popup-root, #modal-root, #toast, #clip-helper { display: none !important; }
  body { overflow: visible; background: #fff; }
  #print-root { display: block; }
  #print-root .print-sheet-title { font-size: 14px; font-weight: 600; margin: 0 0 8px; font-family: var(--font-ui); }
  #print-root .print-grid-wrap { position: relative; display: inline-block; }
  #print-root table.print-grid { border-collapse: collapse; page-break-inside: auto; }
  #print-root table.print-grid td { border: 1px solid #d0d0d0; padding: 2px 6px; font-size: 12px; overflow: hidden; }
  #print-root .print-chart { position: absolute; z-index: 2; }
  #print-root .print-chart img { width: 100%; height: 100%; display: block; border: 1px solid #cfd4d1; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .rbtn { min-width: 30px; padding: 4px 5px; }
  #wb-title { width: 160px; }
}
@media (max-width: 900px) {
  :root { --ribbon-body-h: 94px; }
  .rbtn small { display: none; }
  .rbtn { height: 46px; }
  #name-box { width: 84px; }
  #sb-stats { display: none; }
  #wb-doc-menu-wrap { display: none; }
}
@media (max-width: 640px) {
  #formula-input { font-size: 12px; }
  #app { min-width: 420px; }
}

/* ==========================================================================
   Cell notes (comments) — pin + thread popover + editor
   The pin itself is canvas-drawn (see notePinGeom in sheets.js): hovering only
   nudges the bubble a little bigger. The 250px thread card (header / body /
   replies / actions) opens on a LEFT CLICK on the pin and stays until it is
   dismissed — close button, Escape, a click elsewhere, or moving the selection.
   ========================================================================== */
.note-pop {
  position: absolute; z-index: 70; max-width: 264px; background: #fffbea;
  border: 1px solid #e2c886; border-radius: 4px; box-shadow: var(--shadow-2);
  font-size: 12px; pointer-events: none; animation: notePop .15s ease-out;
}
@keyframes notePop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.note-pop .note-head { display: flex; justify-content: space-between; gap: 12px; padding: 5px 10px 3px; font-weight: 600; color: #7a5d10; border-bottom: 1px solid #f3e6bd; }
.note-pop .note-ts { font-weight: 400; font-size: 10.5px; color: var(--ink-4); }
.note-pop .note-body { padding: 7px 10px 8px; white-space: pre-wrap; word-break: break-word; color: var(--ink); max-height: 180px; overflow-y: auto; line-height: 1.45; }

/* --- comment thread popover: Docs .comment-popup parity ------------------
   Same card as Docs' .comment-popup: white, 250px, 8px radius, the soft accent
   header, avatar circle, body, replies and a Reply / Resolve / Delete row. Docs
   uses `width: 250px` and no max-width; we keep a max-width so a very long
   unbreakable token cannot stretch the card past the grid.
   Every colour here is a solid hex — the tints Docs fakes with rgba() over white
   are pre-composited, so nothing in the comment UI is ever see-through. */
.note-pop.note-thread {
  pointer-events: auto; width: 250px; max-width: 250px; padding: 0;
  background: var(--paper, #fff);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
  font-family: var(--font-ui); max-height: 340px; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column;
}
.note-pop.note-thread[hidden] { display: none; }
.note-thread .nt-item { flex: 0 0 auto; }
.note-thread .nt-item + .nt-item { border-top: 1px solid var(--line-soft); }
.note-thread .nt-head {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px;
  flex: 0 0 auto; background: #e9f1ed; border-bottom: 1px solid var(--line-soft);
}
.note-thread .nt-avatar {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 20px; text-align: center; user-select: none;
}
.note-thread .nt-author { font-weight: 600; font-size: 12px; color: var(--ink); }
.note-thread .nt-ts { font-size: 10px; color: var(--ink-4); white-space: nowrap; }
.note-thread .nt-head-spacer { margin-left: auto; flex: 0 0 22px; height: 22px; }
.note-thread .nt-close {
  margin-left: auto; flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 4px; color: var(--ink-4); cursor: pointer;
  font-family: var(--font-ui); font-size: 16px; line-height: 1;
}
.note-thread .nt-close:hover { background: #f0f0f0; color: var(--ink-2); }
.note-thread .nt-body {
  padding: 6px 10px; font-size: 12.25px; line-height: 1.4; color: var(--ink);
  min-height: 0; white-space: pre-wrap; word-break: break-word; overflow-y: auto;
}
.note-thread .nt-replies { min-height: 0; border-top: 1px solid var(--line-soft); overflow-y: auto; }
.note-thread .nt-reply {
  padding: 5px 10px 3px; font-size: 11.5px; line-height: 1.35; color: var(--ink-2);
  word-break: break-word;
}
.note-thread .nt-reply .nt-author { font-size: 11.5px; }
/* Docs .comment-popup-reply .reply-time sits on its own line under the reply. */
.note-thread .nt-reply .nt-ts { display: block; font-size: 9.5px; }
/* Docs .comment-popup-actions: Reply / Resolve / Delete as small pills. */
.note-thread .nt-actions { display: flex; flex: 0 0 auto; gap: 6px; padding: 6px 10px 8px; }
.note-thread .nt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 3px 8px; border: none; border-radius: 4px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--ink-2);
  transition: background .12s;
}
.note-thread .nt-reply-btn { background: #f5f5f5; }
.note-thread .nt-reply-btn:hover { background: #ebebeb; }
.note-thread .nt-resolve-btn { background: #e9f1ed; color: var(--accent); }
.note-thread .nt-resolve-btn:hover { background: #deeae3; }
.note-thread .nt-resolve-btn.on { background: var(--chrome-2); color: var(--ink-3); }
.note-thread .nt-delete-btn { background: #fceeee; color: #dc2626; }
.note-thread .nt-delete-btn:hover { background: #f9dcdc; }
/* Resolved threads read as done, like Docs' .comment-resolved anchors. */
.note-thread.is-resolved .nt-body, .note-thread .nt-item.is-resolved .nt-body { color: #8a8886; }


/* --- ribbon audit buttons (v4) — subtle accent when tracing is active --- */
.rbtn.on[data-toggle] { background: linear-gradient(180deg, #eef5f0, var(--accent-tint)); box-shadow: inset 0 0 0 1px var(--accent-tint-2); }
.rbtn.on[data-toggle] svg { stroke: var(--accent-dark); }

/* --- context menu icons: slightly softer at rest, full strength on hover (v4) --- */
.popup .popup-item .pi-icon svg { opacity: .82; transition: opacity .1s; }
.popup .popup-item:hover .pi-icon svg, .popup .popup-item:focus .pi-icon svg { opacity: 1; }

/* Comment composer lives in the shared modal; only the field is app-specific.
   Metrics mirror the Docs/Slides composer so the three read identically. */
.cmt-body { display: block; }
.cmt-body .field { display: block; }
.cmt-text {
  display: block; width: 100%; resize: vertical; min-height: 72px; max-height: 40vh;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  font-size: 13px; line-height: 1.45; font-family: var(--font-ui); color: var(--ink);
  background: var(--paper); outline: none;
}
.cmt-text:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-tint-2); }
/* Docs/Slides centre the bubble above the title and float the close button;
   Sheets' default modal head is a horizontal row, so opt this one in. */
.modal.cmt .modal-head {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 24px 0; border-bottom: none; position: relative;
}
.modal.cmt .modal-icon { margin: 0 auto 12px; }
.modal.cmt .modal-title { flex: none; text-align: center; }
.modal.cmt .modal-x { position: absolute; top: 14px; right: 14px; }
.modal.cmt .modal-foot { justify-content: center; }
.modal.define-name .modal-head {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 24px 24px 0; border-bottom: none;
  background: transparent; position: relative;
}
.modal.define-name .modal-icon { margin: 0 auto 12px; }
.modal.define-name .modal-title { flex: none; text-align: center; }
.modal.define-name .modal-body { padding: 18px 24px 20px; }
.define-name-content {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(250px, 1fr);
  align-items: stretch; gap: 22px;
}
.define-name-fields { min-width: 0; }
.modal.define-name .modal-foot { justify-content: center; }
.define-name-content .form-row { align-items: stretch; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.define-name-content .form-row > label { width: auto; text-align: left; color: var(--ink-2); font-weight: 600; }
.define-name-content .form-row input[type="text"] { height: 40px; border-radius: 6px; padding: 0 12px; }
.define-name-content .hint { max-width: 36ch; margin: 0 0 14px; line-height: 1.45; }
.define-name-panel {
  min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #f8f9f8; display: flex; flex-direction: column;
}
.define-name-list-heading { margin: 0 0 10px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.define-name-list { min-height: 100px; max-height: 220px; overflow-y: auto; }
.define-name-listbox { display: flex; flex-direction: column; }
.define-name-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.define-name-row:first-child { padding-top: 2px; }
.define-name-info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.define-name-label { overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.define-name-ref { overflow: hidden; color: var(--ink-4); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.define-name-delete {
  display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper); color: var(--danger); cursor: pointer;
}
.define-name-delete svg { width: 16px; height: 16px; }
.define-name-delete:hover { border-color: rgba(220,38,38,.3); background: #fdecec; }
.define-name-empty { padding: 12px 4px; color: var(--ink-4); font-size: 12px; }
@media (max-width: 700px) {
  .define-name-content { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ==========================================================================
   Visual polish layer — chrome refinement & motion
   ========================================================================== */

/* Header: subtle vertical sheen on the green band */
#app-header { background: linear-gradient(180deg, #237a4b 0%, var(--accent) 62%, #1d663d 100%); box-shadow: 0 1px 0 rgba(0,0,0,.14), 0 2px 6px rgba(18,68,48,.24); }
#wb-title { transition: background .15s, border-color .15s; }
#wb-title:hover { background: rgba(255,255,255,.08); }

/* Ribbon tabs: ink underline grows in */
.ribbon-tab { position: relative; transition: background .12s, color .12s, opacity .12s; }
.ribbon-tab::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2.5px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: 0; transition: left .16s ease-out, right .16s ease-out, opacity .12s; }
.ribbon-tab:hover::after { left: 10px; right: 10px; opacity: .35; }
.ribbon-tab.active::after { left: 8px; right: 8px; opacity: 1; }
#ribbon-body { background: linear-gradient(180deg, var(--paper) 0%, #fbfbfa 100%); }

/* Ribbon buttons: crisp hover with hairline border */
.rbtn { border-radius: 3px; transition: background .1s, box-shadow .1s; }
.rbtn:hover { background: #eef4f0; box-shadow: inset 0 0 0 1px var(--accent-tint-2); }
.rbtn:active { background: var(--accent-tint-2); box-shadow: none; }
.rbtn.on { background: var(--accent-tint); color: var(--accent-darker); box-shadow: inset 0 0 0 1px var(--accent); }
.rb-group { position: relative; }
.rb-group::after { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 1px; background: linear-gradient(180deg, transparent, var(--line-soft) 20%, var(--line-soft) 80%, transparent); }

/* Ribbon group labels */

/* Popup menus: refined elevation + item motion */
.popup { border-radius: 5px; box-shadow: var(--shadow-3); animation: popupIn .11s ease-out; transform-origin: top left; }
@keyframes popupIn { from { opacity: 0; transform: scale(.985) translateY(-2px); } to { opacity: 1; transform: none; } }
.popup-item { transition: background .08s; }
.popup-item:hover { background: var(--accent-tint); }
.popup-item:hover .pi-label { color: var(--accent-darker); }
.popup-item.checked .pi-check { color: var(--accent); }

/* Sheet tabs: active pill with accent top bar; smooth hover */
.sheet-tab { position: relative; transition: background .12s, color .12s, box-shadow .12s; }
.sheet-tab:hover { background: var(--chrome); }
.sheet-tab.active { background: var(--paper); box-shadow: 0 -1px 0 var(--line) inset, 1px 0 0 var(--line), -1px 0 0 var(--line); }
.sheet-tab.active::before { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; }
/* The tab colour rides on the real .tab-dot span, never on ::after — ::after is
   the active underline (below), and a dot rule here would win/loseproperty-by-
   property against it: the underline keeps left+right but inherits width:8px,
   collapsing the bar to an 8px stub on coloured tabs. */

/* Drag-and-drop sheet reordering in the tab bar */
.sheet-tab.dragging { opacity: .45; }
/* A real child element, not ::before/::after — both of those are already taken
   by the active accent bar and the tab-colour dot. Kept inside the tab box: 
   #sheet-tabs is overflow:hidden, so an overhang is clipped at the first and
   last tab and the indicator fades to a thin sliver there. */
.sheet-tab .drop-mark {
  display: none; position: absolute; top: 1px; bottom: 1px; width: 3px;
  background: var(--accent); border-radius: 2px; z-index: 3;
  box-shadow: 0 0 0 1px rgba(255,255,255,.75);
}
.sheet-tab.drop-before .drop-mark { display: block; left: 0; }
.sheet-tab.drop-after .drop-mark { display: block; right: 0; }
#add-sheet { transition: background .12s; border-radius: 4px; }
#add-sheet:hover { background: var(--accent-tint); }

/* Status bar: stats as quiet pills; zoom accent */
#sb-stats { color: var(--ink-2); }
#sb-stats b, #sb-stats strong { color: var(--ink); font-weight: 600; }
#sb-zoom-pct:hover { color: var(--accent-dark); text-decoration: underline; }
#status-bar { background: linear-gradient(180deg, var(--chrome) 0%, #efeeec 100%); }

/* Modal dialogs: backdrop + entrance motion */
.modal-overlay { background: rgba(23, 23, 22, .38); backdrop-filter: blur(1.5px); animation: overlayIn .14s ease-out; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal { animation: modalIn .16s cubic-bezier(.2,.9,.3,1.2); }
@keyframes modalIn { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
.modal > div { box-shadow: var(--shadow-3); }

/* Dialog tab underline slides */

/* Formula row: focus glow */
#formula-input:focus, #name-box:focus { box-shadow: 0 0 0 1.5px var(--accent-tint-2); }

/* Chart frames */
.chart-frame { border-radius: 6px; box-shadow: var(--shadow-2); }
.chart-frame:hover { box-shadow: var(--shadow-3); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .toast, .popup, .modal, .modal-overlay, .note-pop { animation: none !important; }
  .ribbon-tab::after { transition: none; }
  /* open/close now run on transitions rather than a one-shot keyframe */
  .ms-dropdown-menu, .ms-dropdown-menu.open, .ms-dropdown-menu.closing { transition: none !important; }
}

/* ==========================================================================
   Polish layer v2 — Formula AutoComplete, chart tooltips, detail refinements
   ========================================================================== */

/* ---- Formula AutoComplete dropdown (in-cell editor + formula bar) ---- */
#formula-ac {
  position: absolute; z-index: 34; display: none; min-width: 280px; max-width: 420px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow-3); overflow: hidden;
}
#formula-ac.open { display: block; animation: acIn .1s ease-out; }
@keyframes acIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
#formula-ac::before {
  content: "Formula suggestions"; display: block; padding: 4px 10px 3px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4); background: var(--chrome); border-bottom: 1px solid var(--line-soft);
}
.fx-ac-item {
  display: grid; grid-template-columns: minmax(86px, auto) minmax(0, 1fr); gap: 0 10px;
  align-items: baseline; padding: 5px 10px 5px 8px; cursor: default; position: relative;
  border-left: 2px solid transparent;
}
.fx-ac-item .fx-ac-desc {
  grid-column: 1 / -1; font-size: 10.5px; color: var(--ink-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-ac-item .fx-ac-name { font-weight: 600; font-size: 12px; color: var(--ink); }
.fx-ac-item .fx-ac-args { font-size: 10.5px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Consolas, "Cascadia Mono", monospace; }
.fx-ac-item:hover { background: var(--chrome); }
.fx-ac-item.active { background: var(--accent-tint); border-left-color: var(--accent); }
.fx-ac-item.active .fx-ac-name { color: var(--accent-darker); }
.fx-ac-item.active + .fx-ac-item { box-shadow: 0 -1px 0 var(--accent-tint-2); }

/* ---- Chart hover tooltip ---- */
#chart-tip {
  position: fixed; z-index: 200; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: rgba(32, 31, 30, .94); color: #fff;
  border-radius: 4px; box-shadow: var(--shadow-2); font-size: 11.5px;
  pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .1s, transform .1s;
  max-width: 320px; white-space: nowrap;
}
#chart-tip.open { opacity: 1; transform: none; }
#chart-tip .ct-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
#chart-tip .ct-title { font-weight: 600; }
#chart-tip .ct-series { color: rgba(255,255,255,.72); }
#chart-tip .ct-value { font-weight: 700; margin-left: 2px; font-variant-numeric: tabular-nums; }

/* ---- Chart frame selection ring ---- */
.chart-frame.selected { outline: 1.5px solid var(--accent); outline-offset: 0; }
.chart-frame .chart-head { border-bottom: 1px solid var(--line-soft); }

/* ---- In-cell editor: crisper glow ---- */
#cell-editor:focus { outline: none; box-shadow: 0 2px 8px rgba(0,0,0,.28), 0 0 0 2px rgba(33,115,70,.18); }

/* ---- Grid empty-corner detail: subtle gradient in the select-all corner ---- */
.select-all-corner { background: linear-gradient(135deg, var(--chrome-3) 0%, var(--chrome-2) 50%, var(--chrome) 100%); }

/* ---- Ribbon group label refinement ---- */
.rb-group-label { letter-spacing: .015em; }

/* ---- Dialog headers: accent underline ---- */
.modal-head, .modal h2, .dlg-title { border-bottom: 1px solid var(--line-soft); }
.modal .btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(18,68,48,.25); }
.modal .btn.primary:hover { filter: brightness(1.06); }
.modal .btn.primary:active { filter: brightness(.97); }

/* ---- Popup separators & section labels ---- */
.popup-sep { height: 1px; background: var(--line-soft); margin: 4px 8px; }

/* ---- Sheet tab text ---- */
.sheet-tab { font-weight: 500; }
.sheet-tab.active { font-weight: 600; }

/* ---- Toast: entry from bottom-right with slide ---- */

/* ---- Focus visibility for a11y on chrome controls ---- */
.iconbtn:focus-visible, .rbtn:focus-visible, .sheet-tab:focus-visible {
  outline: 2px solid var(--accent-tint-2); outline-offset: 1px;
}
#formula-input:focus-visible, #name-box:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  #formula-ac.open, #chart-tip { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Polish layer v3 — argument tooltip, defined-name badge, sparkline details
   ========================================================================== */

/* ---- Function argument tooltip ---- */
#fx-argtip {
  position: absolute; z-index: 35; display: none; max-width: 460px;
  background: #fffef5; border: 1px solid #e0c97f; border-radius: 5px;
  box-shadow: var(--shadow-2); padding: 5px 9px 6px;
}
#fx-argtip.open { display: block; animation: acIn .1s ease-out; }
#fx-argtip .fxa-sig {
  font-family: Consolas, "Cascadia Mono", monospace; font-size: 11.5px; color: var(--ink-2);
  white-space: nowrap; display: block;
}
#fx-argtip .fxa-sig::first-line { font-weight: 600; }
#fx-argtip .fxa-on {
  font-weight: 700; color: var(--accent-darker); background: var(--accent-tint);
  border-radius: 2px; padding: 0 3px; box-shadow: inset 0 0 0 1px var(--accent-tint-2);
}
#fx-argtip .fxa-desc {
  display: block; font-size: 10px; color: var(--ink-3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 430px;
}

/* ---- Defined-name badge in autocomplete ---- */
.fx-ac-badge {
  display: inline-block; font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #7a5b13; background: #fdf3d7;
  border: 1px solid #e8d491; border-radius: 3px; padding: 0 4px; margin-right: 6px;
  vertical-align: 1px;
}
.fx-ac-item.is-name .fx-ac-name { font-weight: 600; font-style: normal; }

/* ---- Sparkline cell affordance: subtle inset well so minicharts read as data viz ---- */

/* ---- Chart frame head: refined title strip ---- */
.chart-head {
  background: linear-gradient(180deg, #fdfdfd 0%, #f7f6f5 100%);
  border-bottom: 1px solid var(--line-soft);
}
.chart-head .chart-title {
  font-weight: 600; letter-spacing: .01em; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-head .iconbtn { opacity: .55; transition: opacity .12s, background .12s; }
.chart-frame:hover .chart-head .iconbtn, .chart-frame.selected .chart-head .iconbtn { opacity: 1; }
.chart-head .iconbtn:hover { background: var(--accent-tint); color: var(--accent-darker); }

#sb-zoom-pct {
  background: var(--chrome-2); border-radius: 10px; padding: 1px 8px;
  font-variant-numeric: tabular-nums; transition: background .12s;
}
#sb-zoom-pct:hover { background: var(--accent-tint-2); }

/* ---- Name box dropdown chevron ---- */
.namebox-dd { color: var(--ink-3); transition: background .1s, color .1s; }
.namebox-dd:hover { background: var(--chrome-2); color: var(--accent-dark); }

/* ---- Find panel input focus ---- */

/* ---- Dialog form rows: tighter label rhythm ---- */
.form-row > label { color: var(--ink-2); }

/* ---- List rows (Define Name etc.) hover ---- */
.list-row:hover { background: var(--chrome); }

/* ==========================================================================
   POLISH LAYER v5 — chart series editor, find options, badges, micro-detail
   ========================================================================== */

/* ---- Chart dialog: per-series color + name editor ---- */
.ch-series-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 158px; overflow-y: auto;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: linear-gradient(180deg, #fbfbfa, #f6f6f5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.ch-series-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background .12s ease, box-shadow .12s ease;
}
.ch-series-row:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-tint-2); }
.ch-series-row:focus-within { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-tint-2); }
.ch-series-row input[type="color"] {
  width: 28px; height: 21px; padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  transition: box-shadow .12s ease;
}
.ch-series-row input[type="color"]:hover { box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.ch-series-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.ch-series-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
.ch-series-idx {
  min-width: 19px; height: 19px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  color: #4c6b57;
  background: var(--accent-tint-2);
  border-radius: 10px;
  flex: 0 0 auto;
}
.ch-series-name { flex: 1; min-width: 0; }
.ch-series-name:disabled { color: var(--ink-4); background: transparent; border-color: transparent; cursor: default; }
.ch-series-empty { font-size: 11px; color: var(--ink-4); padding: 6px 8px; font-style: italic; }

/* ---- Find panel: option row alignment + notes toggle ---- */

/* ---- Chart frames: subtle head gradient on hover for affordance ---- */
.chart-frame .chart-head { transition: background .15s ease; }
.chart-frame:hover .chart-head { background: linear-gradient(180deg, #f7f9f8, #eef3f0); }

/* ---- Modal: series section separator rhythm ---- */
.form-row .ch-series-list + .hint { margin-top: 2px; }

/* ---- Context menu: disabled items keep icon muted ---- */
.popup-item.disabled { opacity: .45; }

/* ---- Reduced motion respect ---- */
@media (prefers-reduced-motion: reduce) {
  .ch-series-row, .ch-series-row input[type="color"], .chart-frame .chart-head { transition: none; }
}

/* ===================================================================
   POLISH LAYER v6 — history dialogs + detail refinement
   =================================================================== */

/* ---- Undo History dialog ---- */
.hist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hist-col { min-width: 0; }
.hist-col-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.hist-col-t svg { width: 13px; height: 13px; color: var(--accent); }
.hist-count {
  background: var(--accent-tint); color: var(--accent-dark);
  border-radius: 9px; padding: 0 7px;
  font-size: 10.5px; line-height: 16px;
}
.hist-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fcfdfc;
}
.hist-item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 26px;
  font-size: 12px; color: var(--ink-2);
  border-bottom: 1px solid #f0f2f0;
}
.hist-item:last-child { border-bottom: 0; }
/* timeline rail + dots */
.hist-item::before {
  content: ''; position: absolute; left: 12px; top: 0; bottom: 0;
  width: 1px; background: #e6eae6;
}
.hist-item::after {
  content: ''; position: absolute; left: 9.5px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: #fff; border: 1.5px solid #b9c4bd;
}
.hist-item.latest { background: var(--accent-tint); color: var(--accent-dark); font-weight: 600; }
.hist-item.latest::after { background: var(--accent); border-color: var(--accent-dark); }
.hist-item.redo { color: var(--ink-3); font-style: italic; }
.hist-item.redo::after { border-style: dashed; }
.hist-num {
  flex: none; min-width: 20px; text-align: right;
  font-size: 10px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hist-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-empty { font-size: 12px; color: var(--ink-3); font-style: italic; padding: 12px 4px; }
.hist-note { font-size: 10.5px; color: var(--ink-3); margin-top: 9px; }

/* ---- App-wide detail refinement (v6) ---- */
/* modal head: accent underline that anchors the dialog title */
.modal-head { border-bottom: 1px solid var(--line); position: relative; }
.modal-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 44px; height: 2px; border-radius: 1px;
  background: var(--accent);
}
/* modal entrance: subtle lift + fade (skipped for reduced motion users) */
@keyframes modal-in { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-overlay .modal { animation: modal-in .16s ease-out; }
/* keyboard chips inside dialogs */
.kbd {
  display: inline-block; padding: 0 5px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 4px; background: #f7f8f7;
  font-family: Consolas, Menlo, monospace; font-size: 11px; color: var(--ink-2);
}
/* focus-visible ring for ribbon + popup buttons (keyboard a11y) */
.rb-btn:focus-visible, .popup-item:focus-visible {
  outline: 2px solid var(--accent-tint-2); outline-offset: -1px;
}
/* danger button hover consistency */
.btn.danger { background: #fff; color: #a4262c; border-color: #d7a29a; }
.btn.danger:hover { background: #fdf3f2; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay .modal, .spinner { animation: none; }
}
@media (max-width: 640px) {
  .hist-cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   App-wide detail refinement (v7) — history jump, combo series editor,
   audit status chip, note-match highlight
   ========================================================================== */

/* ---- Undo History: click-to-jump affordances ---- */
.hist-hint {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 6px 10px;
  font-size: 11.5px; color: var(--ink-2);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-2);
  border-radius: 5px;
}
.hist-hint svg { width: 13px; height: 13px; stroke: var(--accent-dark); flex: 0 0 auto; }
.hist-item { cursor: pointer; }
.hist-item { transition: background .12s ease, box-shadow .12s ease; }
.hist-item:hover { background: #f2f7f4; }
.hist-item.latest:hover { background: #dcebe2; }
.hist-item:focus-visible { outline: 2px solid var(--accent-tint-2); outline-offset: -2px; }
.hist-jump {
  margin-left: auto; display: inline-flex; align-items: center;
  color: var(--accent); opacity: 0;
  transform: translateX(3px);
  transition: opacity .12s ease, transform .12s ease;
  flex: 0 0 auto;
}
.hist-jump svg { width: 12px; height: 12px; }
.hist-item:hover .hist-jump, .hist-item:focus-visible .hist-jump { opacity: 1; transform: translateX(0); }
.hist-item.redo .hist-jump { color: var(--ink-3); }
.hist-item.redo:hover { background: #f6f4f9; }
.hist-item.redo:hover::after { border-color: #8a7aa8; }

/* ---- Chart dialog: per-series type override + reorder ---- */
.ch-series-row .ch-type-sel {
  flex: 0 0 auto; width: 72px; height: 21px;
  font-size: 10.5px; color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0 2px;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ch-series-row .ch-type-sel:hover { border-color: var(--accent); }
.ch-series-row .ch-type-sel:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint-2); }
.ch-order-btns { display: inline-flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.ch-order {
  width: 16px; height: 11px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 7px; line-height: 1;
  color: var(--ink-3);
  background: #fff;
  border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.ch-order:hover:not(:disabled) { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent-tint-2); }
.ch-order:active:not(:disabled) { background: var(--accent-tint-2); }
.ch-order:disabled { opacity: .35; cursor: default; }
.ch-series-row.has-type .ch-series-name { flex: 1 1 auto; }

/* ---- Status bar: formula-audit legend chip (click = remove arrows) ---- */
.sb-audit-chip {
  appearance: none; font: inherit; letter-spacing: inherit;
  background: #eef3f9; color: #2b579a; border: 1px solid #cfdcec;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sb-audit-chip svg { stroke: #2b579a; }
.sb-audit-chip:hover { background: #e2ebf6; border-color: #b7cbe6; box-shadow: 0 1px 3px rgba(43, 87, 154, .18); }
.sb-audit-chip:active { background: #d5e2f1; box-shadow: none; }
.sb-audit-chip:focus-visible { outline: 2px solid #2b579a; outline-offset: 1px; }

/* ---- Note thread: find-match highlight inside the popover ---- */
.nt-hl {
  background: #ffe28a; color: inherit;
  border-radius: 2px; padding: 0 1px;
  box-shadow: inset 0 -1px 0 #f0c33c;
}
mark.nt-hl { color: #4a3a05; }

/* ---- v7 guards ---- */
@media (prefers-reduced-motion: reduce) {
  .hist-item, .hist-jump, .ch-order, .sb-audit-chip, .ch-series-row .ch-type-sel { transition: none; }
}
@media (max-width: 640px) {
  .ch-series-row { flex-wrap: wrap; }
  .ch-series-row .ch-type-sel { width: 64px; }
  .hist-hint { font-size: 11px; }
}

/* ==========================================================================
   Polish layer v8 (Task 19) — find match list, chart labels/axis titles,
   CF dialog extras, print chart frames, app-wide detail passes
   ========================================================================== */

/* ---- Find panel: match list ---- */
@keyframes fpListIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---- Chart dialog: data labels + axis titles ---- */
.ch-axis-inputs { display: flex; gap: 6px; }
.ch-axis-inputs input {
  flex: 1; min-width: 0; height: 27px;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0 8px; font-size: 12.5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ch-axis-inputs input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-tint-2); }
 .ch-axis-inputs input[type="text"] { flex: 1; }

/* ---- v8 guards ---- */
@media (prefers-reduced-motion: reduce) {
   .ch-axis-inputs input { animation: none; transition: none; }
}
@media (max-width: 640px) {
    .ch-axis-inputs { flex-direction: column; }
}

/* ============================================================
   Polish layer v9 — chart label options
   ============================================================ */

/* chart dialog: label position + number format row */
.ch-lbl-inputs { display: flex; gap: 8px; }
.ch-lbl-inputs select {
  flex: 0 0 118px;
  padding: 4px 6px;
  border: 1px solid var(--border, #d1d1d1);
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  color: #323130;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ch-lbl-inputs select:hover { border-color: var(--accent, #217346); }
.ch-lbl-inputs select:focus-visible {
  outline: none;
  border-color: var(--accent, #217346);
  box-shadow: 0 0 0 2px rgba(33, 115, 70, .14);
}
.ch-lbl-inputs input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--border, #d1d1d1);
  border-radius: 4px;
  font-size: 12px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ch-lbl-inputs input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--accent, #217346);
  box-shadow: 0 0 0 2px rgba(33, 115, 70, .14);
}

@media (max-width: 640px) {
  .ch-lbl-inputs { flex-direction: column; }
  .ch-lbl-inputs select { flex: 1 0 auto; }
}
/* ==========================================================================
   Polish layer v10 — interaction & motion: smooth editor, resize tips,
   selection glide, animated stats, cleaner chrome
   ========================================================================== */

/* ---- Cell editor: pop-in + smooth width/height while typing ---- */
#cell-editor {
  border-radius: 3px;
  transition: width .08s ease-out, height .08s ease-out, min-width .08s ease-out,
              box-shadow .15s ease, border-color .15s ease;
  will-change: width, height;
}
#cell-editor.no-anim { transition: none !important; }
#cell-editor.ed-pop { animation: edPop 120ms cubic-bezier(.2, .9, .3, 1.2); }
@keyframes edPop {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Floating size badge while resizing columns/rows ---- */
#size-tip {
  position: absolute; display: none; z-index: 30; pointer-events: none;
  background: #2b2b28; color: #fff; font-size: 11.5px; line-height: 1;
  padding: 5px 9px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
  font-variant-numeric: tabular-nums;
  transition: left 90ms cubic-bezier(.25,.9,.3,1), top 90ms cubic-bezier(.25,.9,.3,1);
  animation: tipPop 150ms cubic-bezier(.2,.9,.3,1.2);
}
#size-tip b { color: #7fd7a5; font-weight: 700; }

/* fill tip: matches the size badge, glides between cells and pops in with a green accent */
#fill-tip {
  background: #2b2b28; border-radius: 4px; padding: 4px 9px; font-size: 11.5px;
  box-shadow: 0 3px 10px rgba(0,0,0,.28); font-variant-numeric: tabular-nums;
  color: #eafff3; position: absolute; z-index: 30; pointer-events: none; white-space: nowrap;
  border-left: 3px solid #2f9e63;
  transition: left 90ms cubic-bezier(.25,.9,.3,1), top 90ms cubic-bezier(.25,.9,.3,1);
  animation: tipPop 150ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes tipPop {
  from { opacity: 0; transform: translateY(3px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* ---- Status bar: tabular numerals so animated stats never jitter ---- */
#sb-stats { font-variant-numeric: tabular-nums; }
#sb-stats b { font-weight: 700; color: var(--ink-1); }

/* ---- Sheet switch fade on the grid ---- */
#grid-area.sheet-fade { animation: sheetFade 150ms ease-out; }
@keyframes sheetFade { from { opacity: .45; } to { opacity: 1; } }

/* ---- Sheet tabs: hover lift + animated active underline + focus ring ---- */
.sheet-tab { position: relative; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.sheet-tab:hover { background: rgba(33,115,70,.07); }
.sheet-tab.active { box-shadow: inset 0 -2px 0 0 var(--accent); }
.sheet-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px 4px 0 0; }

/* ---- Global micro-transitions on controls ---- */
.btn, .iconbtn, .rb-btn, .sheet-tab, .fn-cat, .fn-item, .menu-item, .popup .item,
#add-sheet { transition: background .12s ease, color .12s ease,
  border-color .12s ease, box-shadow .12s ease, opacity .12s ease; }
.btn:active, .iconbtn:active, .rb-btn:active { transform: translateY(0.5px); }

/* ---- Consistent focus-visible rings (keyboard only) ---- */
.btn:focus-visible, .iconbtn:focus-visible, .rb-btn:focus-visible,
select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
#cell-editor:focus-visible, #formula-input:focus-visible { outline: none; }   /* custom glow already */

/* ---- Dialogs & popups: softer entrance ---- */
.modal { animation: modalIn 150ms cubic-bezier(.2, .9, .3, 1.05); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay { animation: fadeIn 150ms ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.popup { animation: popIn 110ms cubic-bezier(.2, .9, .3, 1.08); }
@keyframes popIn {
  from { opacity: 0; transform: translateY(-3px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Chart frames: crisper elevation, smoother selection ---- */
.chart-frame { transition: box-shadow .15s ease, border-color .15s ease; }
.chart-frame.selected { box-shadow: 0 0 0 1.5px var(--accent), 0 6px 18px rgba(0,0,0,.14); }

/* ---- Chart head buttons: always reachable with one click on hover ---- */
.chart-head .iconbtn { border-radius: 3px; }

/* ---- Insert Function rows: the pill is the selection indicator ---- */
.fn-cat, .fn-item { cursor: pointer; }

/* ---- Reduced motion: disable the new animations ---- */
@media (prefers-reduced-motion: reduce) {
  #cell-editor, #cell-editor.ed-pop { animation: none !important; transition: none !important; }
  #grid-area.sheet-fade { animation: none !important; }
  .modal, .modal-overlay, .popup { animation: none !important; }
  .btn, .iconbtn, .rb-btn, .sheet-tab, .fn-cat, .fn-item { transition: none !important; }
  .fn-pill { transition: none !important; }
}

/* ==========================================================================
   Polish layer v11 — "animations everywhere": exits, entrances, easing
   ========================================================================== */

/* ---- App boot: gentle fade-up so first paint never flashes ---- */
#app { animation: appIn 260ms ease-out; }
@keyframes appIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ---- Ribbon tab switch: body content glides in ---- */


/* ---- Modal / popup EXIT animations (entrances already existed) ---- */
.modal-overlay.closing { animation: overlayOut 140ms ease-in forwards; pointer-events: none; }
@keyframes overlayOut { to { opacity: 0; } }
.modal-overlay.closing .modal { animation: modalOut 130ms cubic-bezier(.4, 0, .7, .4) forwards; }
@keyframes modalOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }
.popup.closing { animation: popOut 100ms ease-in forwards; }
@keyframes popOut { to { opacity: 0; transform: translateY(-3px) scale(.985); } }

/* ---- Chart frames: entrance pop + canvas wipe reveal (new charts only) ---- */
.chart-frame.ch-enter { animation: chIn 300ms cubic-bezier(.2, .85, .3, 1.12); }
@keyframes chIn { from { opacity: 0; transform: translateY(10px) scale(.965); } to { opacity: 1; transform: none; } }
.chart-frame.ch-enter .chart-canvas-wrap { animation: chWipe 460ms 90ms cubic-bezier(.25, .7, .3, 1) backwards; }
@keyframes chWipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Zoom % label: accent pulse after an animated zoom ---- */
#sb-zoom-pct { display: inline-block; }
#sb-zoom-pct.pulse { animation: zpPulse 480ms ease-out; }
@keyframes zpPulse {
  0% { color: var(--accent); transform: scale(1.12); }
  60% { color: var(--accent); transform: scale(1); }
  100% { transform: scale(1); }
}

/* ---- Popup menu items: check/icon nudge on hover, faster response ---- */
.popup-item { transition: background .08s linear, color .08s linear; }
.popup-item .pi-check, .popup-item .pi-icon { transition: transform .12s cubic-bezier(.2, .8, .3, 1.2); }
.popup-item:hover .pi-check, .popup-item:hover .pi-icon { transform: scale(1.12); }
.popup-item:active { background: var(--accent-tint-2); }

/* ---- Buttons: consistent press feedback + primary sheen ---- */
.btn, .iconbtn, .rb-btn, .sheet-tab, #add-sheet { will-change: auto; }
.btn:active, .iconbtn:active, .rb-btn:active { transform: translateY(0.5px) scale(.985); }
.btn.primary { transition: background .12s ease, box-shadow .15s ease, transform .1s ease, filter .12s ease; }
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 2px 8px rgba(23, 92, 55, .35); }
.btn.primary:active { filter: brightness(.97); }
.iconbtn:not(:disabled):hover { background: var(--chrome-2); }
.iconbtn:not(:disabled):active { background: var(--chrome-3); transform: scale(.94); }

/* ---- Name box ---- */
#name-box { transition: border-color .15s ease, box-shadow .15s ease, background .2s ease; }

/* ---- Sheet tabs: new-tab pop ---- */
.sheet-tab.tab-enter { animation: tabIn 220ms cubic-bezier(.2, .85, .3, 1.15); }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---- Filter / DV chips: soft settle when (re)created ---- */
@keyframes chipIn { from { opacity: 0; transform: translateY(-2px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---- Modal head: hairline gradient + snappier close button ---- */
.modal-head { background: linear-gradient(180deg, #fbfbfa, #f7f7f6); }
.modal-x { transition: background .12s ease, color .12s ease, transform .12s ease; }
.modal-x:hover { background: var(--chrome-2); color: var(--danger); transform: rotate(90deg); }

/* ---- Find panel + autocomplete: slide-fade coherent with popups ---- */
@keyframes fpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Formula bar: focus glow smooths in ---- */
#formula-input { transition: box-shadow .18s ease, border-color .18s ease; }

/* ---- Reduced motion: silence every new animation ---- */
@media (prefers-reduced-motion: reduce) {
  #app, .ribbon-panel, .modal-overlay.closing, .modal-overlay.closing .modal,
  .popup.closing, .chart-frame.ch-enter, .chart-frame.ch-enter .chart-canvas-wrap,
  #sb-zoom-pct.pulse,
  .sheet-tab.tab-enter,   #ribbon-body .ribbon-panel { transition: none !important; will-change: auto; }
  .popup-item .pi-check, .popup-item .pi-icon, .modal-x { transition: none !important; }
}

/* =========================================================================
   Polish layer v12 — drag indicators & floating tips
   (canvas drag ghosts are drawn in JS: animated green marching dots; these
   rules animate the DOM badges that accompany those gestures)
   ========================================================================= */

/* ---- Size + fill badges: glide between cells, pop in, green accent ---- */
#size-tip, #fill-tip { will-change: left, top; }
#fill-tip::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #2f9e63; margin-right: 6px; vertical-align: 1px;
  box-shadow: 0 0 6px rgba(47,158,99,.8);
}

/* ---- Reduced motion: badges appear instantly, no glide ---- */
@media (prefers-reduced-motion: reduce) {
  #size-tip, #fill-tip { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Polish layer v13 — visual refresh: unified navigation strip, icon
   harmony, depth refinements, command palette
   ========================================================================= */

/* ---- New tokens ---- */
:root {
  --ring: rgba(33, 115, 70, .32);
  --accent-glow: 0 0 0 3px rgba(33, 115, 70, .14);
  --radius-lg: 8px;
}

/* ---- Softer, layered focus ring ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; box-shadow: var(--accent-glow); }

/* ---- Header: deeper gradient, inner light, pill controls ---- */
#app-header {
  background: linear-gradient(180deg, #207140 0%, #1b6439 55%, #185c37 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.16);
}
.app-logo {
  width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3);
}
.app-logo:hover { transform: scale(1.06) rotate(-2deg); }
#wb-title { transition: border-color .15s ease, background .15s ease; border-radius: 4px; }
.hdr-palette-btn {
  width: auto; height: 26px; min-width: 30px; padding: 0 5px 0 8px; gap: 6px;
  color: rgba(255,255,255,.92); border-radius: 14px;
}
.hdr-palette-btn:hover { background: rgba(255,255,255,.16); }
.hdr-palette-btn svg { width: 14px; height: 14px; }
.hdr-palette-kbd {
  font-size: 9.5px; line-height: 1; padding: 3px 5px; border-radius: 8px;
  background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.88); letter-spacing: .3px;
}
.hdr-sep { width: 1px; height: 18px; background: rgba(255,255,255,.28); margin: 0 5px; flex: none; }

/* ---- Ribbon tab rail ---- */
#ribbon-tabs { padding: 0 5px; overflow-x: auto; overflow-y: hidden; }
.rb-tabs-sep { width: 1px; align-self: stretch; margin: 6px 7px; background: var(--line); flex: none; }

/* ---- Ribbon tabs: sliding-grow underline, calmer hover ---- */
.ribbon-tab {
  padding: 0 13px; flex: none;
  transition: background .12s ease, color .12s ease;
}
.ribbon-tab:hover { background: var(--chrome-2); }
.ribbon-tab.active { background: transparent; }
.ribbon-tab.active::after {
  transform-origin: center;
  animation: tabUnderline .22s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes tabUnderline { from { transform: scaleX(.3); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ---- Ribbon buttons: faster response, press feedback, alive toggles ---- */
.rbtn, .rbtn-col, .rb-color-btn, .iconbtn, .rb-select {
  transition: background .12s ease, color .12s ease, box-shadow .12s ease, transform .07s ease, border-color .12s ease;
}
.rbtn:active, .rbtn-col:active, .rb-color-btn:active { transform: scale(.95); }
.rbtn.on { box-shadow: inset 0 0 0 1px var(--accent-tint-2), inset 0 -2px 0 rgba(33,115,70,.22); }
.rbtn:hover svg, .rbtn-col:hover svg { transform: translateY(-.4px); }
.rbtn svg, .rbtn-col svg { transition: transform .14s cubic-bezier(.2, .8, .3, 1); }
.rb-group-label { text-transform: uppercase; letter-spacing: .55px; font-size: 9.8px; color: var(--ink-4); }
.rb-select:hover { border-color: var(--ink-4); }
.rb-select:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }

/* ---- Formula row: glow focus, tinted confirm ---- */
#name-box:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
#formula-input:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
.fx-btn { transition: background .12s ease, color .12s ease; border-radius: 4px; }
.fx-btn:hover { color: var(--accent-dark); background: var(--accent-tint); }
#fx-confirm { color: var(--accent-dark); }
#fx-cancel { color: var(--ink-3); }
#fx-cancel:hover { color: var(--danger); }

/* ---- Sheet tabs: grow-in underline, calmer chrome ---- */
.sheet-tab { transition: background .12s ease, color .12s ease; }
.sheet-tab.active::after {
  transform-origin: center;
  animation: tabUnderline .2s cubic-bezier(.2, .8, .3, 1) both;
}
#add-sheet { transition: background .12s ease, color .12s ease, transform .07s ease; }
#add-sheet:active { transform: scale(.92); }

/* ---- Popups: softer border, rounder corners, roomier items ---- */
.popup {
  border-radius: var(--radius-lg); border-color: var(--line-soft);
  box-shadow: 0 16px 44px rgba(0,0,0,.17), 0 2.5px 9px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.028);
}
.popup-item { border-radius: 4px; margin: 1px 3px; padding: 6px 10px 6px 8px; }
.popup-sep { margin: 4px 8px; }
.popup-item.danger .pi-label, .popup-item.danger .pi-icon svg { color: var(--danger); }
.popup-item.danger:hover .pi-label, .popup-item.danger:hover .pi-icon svg { color: #b91c1c; }

/* ---- Modals: rounder, deeper shadow, blurred backdrop ---- */
.modal { border-radius: 10px; box-shadow: 0 24px 64px rgba(0,0,0,.24), 0 4px 14px rgba(0,0,0,.12); }
.modal-overlay { background: rgba(15, 22, 17, .36); backdrop-filter: blur(1.6px); -webkit-backdrop-filter: blur(1.6px); }
.modal-foot { border-radius: 0 0 10px 10px; }
.btn { border-radius: 4px; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .07s ease; }

/* ---- Command palette (Ctrl+K) ---- */
.palette-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(16, 22, 18, .34); backdrop-filter: blur(1.6px); -webkit-backdrop-filter: blur(1.6px);
  display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 16px;
  opacity: 0; transition: opacity .15s ease;
}
.palette-overlay.open { opacity: 1; }
.palette-overlay.closing { opacity: 0; transition: opacity .13s ease; pointer-events: none; }
.palette {
  width: min(580px, 94vw); background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.12);
  transform: translateY(-12px) scale(.98); transition: transform .17s cubic-bezier(.2, .8, .3, 1);
}
.palette-overlay.open .palette { transform: translateY(0) scale(1); }
.palette-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft); color: var(--ink-3);
}
.palette-head .pal-search { width: 17px; height: 17px; flex: none; }
.palette-input { flex: 1; border: none; outline: none; font-size: 14.5px; color: var(--ink); background: transparent; min-width: 0; }
.palette-input::placeholder { color: var(--ink-4); }
.palette-esc {
  font-size: 10px; color: var(--ink-4); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; flex: none;
}
.palette-list { max-height: 46vh; overflow-y: auto; padding: 7px; }
.palette-item {
  display: flex; align-items: center; gap: 11px; padding: 7px 10px;
  border-radius: 7px; transition: background .08s ease;
}
.palette-item.sel { background: var(--accent-tint); }
.palette-item.sel .palette-ic { background: var(--accent-tint-2); color: var(--accent-darker); }
.palette-ic {
  width: 27px; height: 27px; border-radius: 6px; background: var(--chrome);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); flex: none; transition: background .1s ease, color .1s ease;
}
.palette-ic svg { width: 15px; height: 15px; }
.palette-label { flex: 1; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-group {
  font-size: 10px; color: var(--ink-4); background: var(--chrome);
  padding: 2.5px 9px; border-radius: 9px; flex: none; letter-spacing: .2px;
}
.palette-empty { padding: 30px 10px; text-align: center; color: var(--ink-4); font-size: 12.5px; }
.palette-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 15px; border-top: 1px solid var(--line-soft);
  color: var(--ink-4); font-size: 11px; background: var(--chrome);
}
.palette-foot .pal-cmd { width: 12px; height: 12px; vertical-align: -2px; }
.palette-count { font-variant-numeric: tabular-nums; }

/* ---- Reduced motion: palette + new micro-motions silenced ---- */
@media (prefers-reduced-motion: reduce) {
  .palette, .palette-overlay, .app-logo, .rbtn svg, .rbtn-col svg,
  .ribbon-tab.active::after, .sheet-tab.active::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   EmeraldSuite skin — Sheets chrome matched to Notes / Slides / Docs
   (navbar, ribbon tabs, ribbon card, formula bar, tab bar, status pill)
   ========================================================================== */
:root {
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --accent: #239a4d;
  --accent-dark: #1f8a44;
  --accent-darker: #166e37;
  --accent-tint: #e9f6ee;
  --accent-tint-2: #cdebd7;
  --sel-fill: rgba(35, 154, 77, .12);
  --hdr-sel: #bfe3cd;
  --ring: rgba(35, 154, 77, .32);
  --accent-glow: 0 0 0 3px rgba(35, 154, 77, .14);
  --hdr-h: 58px;
  --ribbon-tabs-h: 36px;
  --ribbon-body-h: 96px;
  --formula-h: 34px;
  --status-h: 30px;
  --ui-accent: #239a4d;
  --ui-accent-strong: #1f8a44;
  --ui-accent-soft: rgba(35, 154, 77, .1);
  --ui-accent-border: rgba(35, 154, 77, .45);
  --ui-ink: rgb(44, 62, 80);
  --ui-ink-soft: rgba(44, 62, 80, .7);
  --ui-muted: rgb(100, 116, 139);
  --ui-faint: #94a3b8;
}
#app { font-family: var(--font-ui); background: #f5f5f5; }

/* ---------- Navbar (minimal overrides on top of style.css, identical to Slides/Docs) ---------- */
.navbar {
  border-bottom: transparent;
  background-color: transparent;
  flex-shrink: 0;
  height: 4.5rem;
}

/* App icon in navbar — matching Slides (.icon-primary renders at 1.75rem = 28px
   with margin-bottom 0.2rem in the Slides app via style.css) */
.logo .icon-primary {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.2rem;
  flex-shrink: 0;
}

.navbar.sticky-top {
  z-index: 3000;
}

/* Save indicator pill — byte-identical to docs.css / slides.css */
.save-indicator {
  font-family: revert;
  background: rgba(35, 154, 77, 0.2);
  border: 1px solid rgba(35, 154, 77, 0.3);
  color: rgb(35, 154, 77);
  padding: 6px 16px;
  border-radius: 5rem;
  font-size: 12px;
  cursor: default;
  font-weight: 500;
  transition: 0.2s;
}

.save-indicator.saving {
  background: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.4);
  color: rgb(255, 193, 7);
  animation: savePulse 1.5s ease-in-out infinite;
}

@keyframes savePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.save-indicator.error {
  background: rgba(217, 48, 37, 0.2);
  border-color: rgba(217, 48, 37, 0.4);
  color: rgb(217, 48, 37);
}

.save-indicator:disabled { opacity: .55; cursor: default; }

/* ---------- Ribbon tabs (floating strip) ---------- */
#ribbon { flex: none; position: relative; z-index: 50; background: transparent; border-bottom: none; }
#ribbon-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  height: auto;
  padding: 0 12px;
  margin: 0 12px 8px;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  box-sizing: border-box;
}
#ribbon-tabs::-webkit-scrollbar { display: none; }
.rb-tabs-sep { display: none; }
#ribbon-tabs .ribbon-tab {
  background: none;
  border: none;
  padding: 0 4px 4px;
  margin: 0 8px 4px;
  flex: none;
  font-size: 13px;
  font-weight: 500;
  font-family: "DM Sans", sans-serif;
  color: rgba(44, 62, 80, .7);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
  flex-shrink: 0;
}
#ribbon-tabs .ribbon-tab::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: rgba(44, 62, 80, .38);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
  animation: none;
}
#ribbon-tabs .ribbon-tab:hover { color: rgba(44, 62, 80, .95); }
#ribbon-tabs .ribbon-tab:not(.active):not([data-tab="file"]):hover::after { opacity: 1; transform: scaleX(1); }
#ribbon-tabs .ribbon-tab[data-tab="file"]::before {
  content: "";
  position: absolute;
  inset: -4px -2px -2px;
  background: rgba(136, 136, 136, .16);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .2s, transform .2s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}
#ribbon-tabs .ribbon-tab[data-tab="file"]:hover::before { opacity: 1; transform: scale(1); }
#ribbon-tabs .ribbon-tab.active { background: transparent; color: var(--ui-accent); font-weight: 600; }
#ribbon-tabs .ribbon-tab.active::after { background: var(--ui-accent); opacity: 0; transform: scaleX(0); }
/* Sliding underline indicator (moves between tabs, like Docs/Slides) */
#ribbon-tabs .ribbon-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--ui-accent);
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1), opacity .2s;
  will-change: transform, width;
  opacity: 0;
}
#ribbon-tabs .ribbon-tab-indicator.visible { opacity: 1; }
#ribbon-tabs .ribbon-tabs-right { margin-left: auto; }
.ribbon-tab-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 8px;
  color: #636363;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
  line-height: 1;
}
.ribbon-tab-action:hover { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); box-shadow: 0 2px 8px var(--ui-accent-soft); }
.ribbon-tab-action:active { transform: translateY(1px); }
.ribbon-tab-action svg { flex-shrink: 0; width: 14px; height: 14px; }

/* ---------- Ribbon card ---------- */
#ribbon-body {
  position: relative;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  margin: 0 12px 8px;
  padding: 12px;
  box-shadow: rgba(0, 0, 0, .04) 0 4px 10px, rgba(0, 0, 0, .06) 0 2px 8px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Ribbon panel: one pre-rendered panel per category (mirrors Docs/Slides) ---- */
.ribbon-panel {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: max-content;
  margin: 0 auto;
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.3s ease-out, filter 0.3s ease-out, visibility 0.3s;
  will-change: opacity, filter;
}
.ribbon-panel.active {
  opacity: 1;
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
  position: relative;
  transition: opacity 0.3s ease-out, filter 0.3s ease-out, visibility;
}
.ribbon-panel.blur-out {
  opacity: 0;
  filter: blur(4px);
  visibility: visible;
  pointer-events: none;
  position: relative;
  transition: opacity 0.18s ease-in, filter 0.18s ease-in, visibility 0.18s;
}

.ribbon-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 16px 0 0;
  margin-right: 6px;
  border-right: 1px solid rgba(0, 0, 0, .08);
  flex: none;
  min-width: max-content;
  position: static;
}
.ribbon-group + .ribbon-group { padding-left: 12px; }
.ribbon-group::after { display: none; }
.ribbon-group:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.group-label {
  text-align: center;
  font: 600 10px/1.2 "DM Sans", sans-serif;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  margin: 0 0 4px;
}
.ribbon-controls, .rb-arrange { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: max-content; }
.rb-sep { width: 1px; background: rgba(0, 0, 0, .07); margin: 4px 3px; flex: none; }
.rb-stack { display: flex; flex-direction: row; gap: 2px; justify-content: center; align-items: center; height: auto; }
.rb-stack .ribbon-btn { width: auto; min-width: 32px; height: auto; padding: 4px 6px; flex-direction: row; gap: 0; justify-content: center; border-radius: 6px; }
.rb-stack .ribbon-btn svg { width: 16px; height: 16px; }
.font-controls { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.font-controls .ribbon-btn { min-width: 32px; padding: 4px 6px; }

/* ---------- Ribbon buttons (same structure as docs/slides) ---------- */
.ribbon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 60px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 6px;
  color: rgba(44, 62, 80, .8);
  font: 500 11px/1.2 "DM Sans", sans-serif;
  text-align: center;
  box-shadow: rgba(0, 0, 0, .05) 0 1px 3px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* opacity is in the list on purpose: the availability rules dim via
     opacity: .35, and the others reach it through the `all` shorthand
     (docs.css:627, slides.css:463, notes.css:246). Without it here the
     gray/un-gray snapped instead of fading. */
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, opacity .2s;
}
.ribbon-btn:hover { background: rgba(255, 255, 255, .9); border-color: var(--ui-accent-border); color: rgb(44, 62, 80); box-shadow: rgba(0, 0, 0, .08) 0 2px 6px; }
.ribbon-btn:active { background: rgba(255, 255, 255, .95); }
.ribbon-btn.active { background: rgba(35, 154, 77, .15); color: var(--ui-accent-strong); border-color: var(--ui-accent-border); box-shadow: inset 0 0 0 1px var(--ui-accent-border), rgba(35, 154, 77, .25) 0 2px 8px; }
.ribbon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ribbon-btn span { font: 500 10px/1.2 "DM Sans", sans-serif; color: inherit; white-space: nowrap; }
.ribbon-btn-icon {
  flex-direction: row;
  height: auto;
  min-width: 28px;
  gap: 0;
  padding: 5px 8px;
  border-radius: 6px;
}
.ribbon-btn-icon svg { width: 16px; height: 16px; }
.ribbon-btn-icon span { font-size: 12px; }
.ribbon-btn.tall-narrow { padding: 6px 8px; min-width: 34px; }
/* Arrange (Home) uses plain .ribbon-btn — no override. Notes/Docs/Slides keep
   icon-only buttons at the base 60px min-width (docs.css:681-683) and only
   .ribbon-btn-icon collapses to 28px, which is what .rb-stack used to force here.
   The label needs no nudge either: with the Merge caret gone the controls row is
   a plain 34px, so the centred .ribbon-group already leaves the usual 6px gap +
   4px label margin-bottom above it. */
/* Split-button caret (Borders, Merge, Delete, Format, AutoSum, Clear, ...).
   Matched glyph, size, colour and motion to the dropdown caret in
   .ms-dropdown-btn::after below, so the one ribbon reads as one set: same
   "▼" (U+25BC) rather than the smaller "▾", same 10px, same
   rgba(44,62,80,.6), same .2s rotate into the accent when the menu opens. */
.ribbon-btn.split { position: relative; }
.ribbon-btn.split::after {
  content: "▼";
  font-size: 10px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(44, 62, 80, .6);
  font-family: "Segoe UI Symbol", "Arial Unicode MS", "DejaVu Sans", sans-serif;
  transition: transform .2s;
}
.ribbon-btn.split[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
.ribbon-btn-icon.split::after { margin-top: 0; margin-left: 3px; }

/* Borders split button matches the Text/Highlights dropdown buttons */
.borders-btn svg { width: 14px; height: 14px; flex: none; margin-right: 4px; color: rgba(44, 62, 80, .6); }
.borders-btn svg * { stroke-width: 1.5; }
.borders-btn { min-width: 0 !important; padding-right: 20px; }
.borders-btn .dropdown-value { flex: 0 0 auto; }

/* ---------- ribbon availability (Notes/Slides/Docs parity) ---
   updateRibbonAvailability() flips [disabled] on any ribbon control whose
   precondition isn't met, so it greys out instead of running into a dead end.
   Same values as docs.css:4896 so all four apps dim identically. Group labels
   keep full strength — Notes and Slides dim controls only, never the label.
   .ms-dropdown-btn needs no opacity entry of its own: it already carries the
   `transition: .2s` shorthand (sheets.css:2136), same as docs.css:5037. */
.ribbon-btn[disabled], .ms-dropdown-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.ribbon-btn[disabled]:hover, .ms-dropdown-btn[disabled]:hover {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(0, 0, 0, .08);
  color: rgba(44, 62, 80, .8);
  box-shadow: none;
}
.rbtn-col {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 6px;
  color: rgba(44, 62, 80, .85);
  flex-shrink: 0;
}
.rbtn-col:hover { background: #fff; border-color: var(--ui-accent-border); }
.rbtn-col.on { background: rgba(35, 154, 77, .15); color: var(--ui-accent-strong); border-color: var(--ui-accent-border); }
.rbtn-col svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- MS dropdowns (suite component — same as docs/slides/notes) ---------- */
.ms-dropdown { position: relative; display: inline-block; }
.ms-dropdown-btn {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(0, 0, 0, .08);
  padding: 6px 24px 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  color: rgba(44, 62, 80, .8);
  transition: .2s;
  position: relative;
  min-width: 120px;
  text-align: left;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: rgba(0, 0, 0, .05) 0 1px 3px;
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
}
.color-preview {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 6px;
  transition: .2s;
  box-shadow: rgba(255, 255, 255, .8) 0 0 0 2px, transparent 0 0 0 3px;
  position: relative;
  flex: none;
}
.ms-dropdown-btn::after {
  content: "▼";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: rgba(44, 62, 80, .6);
  transition: transform .2s;
  font-family: "Segoe UI Symbol", "Arial Unicode MS", "DejaVu Sans", sans-serif;
}
.ms-dropdown-btn:hover { background: rgba(255, 255, 255, .95); border-color: var(--ui-accent-border); box-shadow: rgba(0, 0, 0, .06) 0 2px 6px; }
.ms-dropdown-btn[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); color: var(--ui-accent); }
.ms-dropdown-btn .dropdown-value { flex: 1 1 0%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, .2) 0 12px 40px;
  min-width: 180px;
  z-index: 10000;
  display: none;
  overflow: hidden;
  /* Long menus scroll (overflow-y is set inline by portalMsMenu). Contain the
     scroll chain, or hitting the end of the list chains the scroll to the
     document and the "close menus on scroll" handler fires on us. */
  overscroll-behavior: contain;
  margin-top: 4px;
  /* Open/close as transitions, mirroring the .show pattern in style.css, so both
     directions animate. The previous one-shot dropdownFadeIn keyframe only ever
     played on open — closing was an instant DOM removal. Shaped like docs.css's
     dropdownIn (scale .95 + 4px lift) but on a non-overshooting curve, since the
     bouncy var(--ease-bouncy) read as springy here. */
  transform-origin: top left;
  opacity: 0;
  transform: scale(.97) translateY(-4px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.ms-dropdown-menu.open {
  display: block;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease;
}
/* Stays in the DOM (and displayed) so the exit transition can actually play.
   Owns its own display because closeMsMenus drops .open when it starts the exit
   — without this the element would hit display:none and vanish instead of fading.
   Inert while it fades so it cannot swallow a click meant for the grid. */
.ms-dropdown-menu.closing {
  display: block;
  opacity: 0;
  transform: scale(.97) translateY(-4px);
  pointer-events: none;
  z-index: 999998;
  transition: opacity .14s ease, transform .14s ease;
}
.ms-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: .15s;
  color: rgba(44, 62, 80, .8);
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  font-family: var(--font-ui);
}
.ms-dropdown-item:last-child { border-bottom: none; }
.ms-dropdown-item:hover { background: var(--ui-accent-soft); color: rgb(44, 62, 80); }
.ms-dropdown-item.disabled { opacity: .45; pointer-events: none; }
.ms-dropdown-item.checked { font-weight: 600; }
.ms-dropdown-item .mi-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; color: rgba(44, 62, 80, .6); }
.ms-dropdown-item .mi-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-dd-label { flex: 1; white-space: nowrap; }
.ms-dropdown-item .mi-check { display: inline-flex; color: var(--ui-accent); flex: none; }
.ms-dropdown-item .mi-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-dropdown-item .mi-shortcut { margin-left: auto; color: rgba(44, 62, 80, .5); font-size: 11px; }
.ms-dropdown-sep { height: 1px; background: rgba(0, 0, 0, .07); margin: 4px 6px; }
.ms-dropdown-section-label { padding: 6px 14px 4px; font-size: 10px; color: rgb(156, 163, 175); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.ms-dropdown-section-label:first-child { border-top: none; }
.ms-dropdown-menu .style-chip { width: 100%; min-width: 100%; border: 1px solid var(--line-soft); margin: 3px 0; text-align: left; padding: 6px 10px; height: auto; justify-content: flex-start; box-shadow: none; line-height: 1.3; white-space: normal; word-break: break-word; }
.ms-dropdown-menu .style-chip:hover { outline: 2px solid var(--accent); outline-offset: 0; }
.color-grid-menu { min-width: 200px !important; padding: 10px !important; }
.color-list-menu { min-width: 180px !important; max-height: 240px !important; overflow-y: auto !important; padding: 0 !important; }
.color-list-menu .ms-dropdown-item { padding: 10px 16px; font-size: 13px; }
.color-list-menu .ms-dropdown-item .color-preview { box-shadow: none; }

/* ---------- Ribbon custom controls ---------- */
.rb-color-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  min-width: 0;
  padding: 0 8px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 6px;
  font: 500 10px/1 "DM Sans", sans-serif;
  color: rgba(44, 62, 80, .85);
  flex-shrink: 0;
}
.rb-color-btn:hover { background: #fff; border-color: var(--ui-accent-border); }
.rb-color-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-color-btn .swatch-bar { width: 18px; height: 4px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .15); }
.rb-select {
  height: 32px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 6px;
  background: #fff;
  font: 500 12px/1 "DM Sans", sans-serif;
  color: var(--ui-ink);
  padding: 0 26px 0 10px;
  max-width: 140px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  box-shadow: rgba(0, 0, 0, .03) 0 1px 2px;
}
.rb-select:hover { border-color: var(--ui-accent-border); }
.rb-select:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(35, 154, 77, .14); outline: none; }
.rb-size { width: 58px; }

/* ---------- Formula row (floating card — mirrors the ribbon card, no switcher) ---------- */
#formula-row {
  /* height of the collapsed bar; the side controls are pinned to this band so
     expanding/collapsing never shifts them — only the chevron rotates. */
  --fx-band-h: 36px;
  height: auto;
  min-height: 30px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  margin: 0 12px 12px;
  padding: 6px 12px;
  box-shadow: rgba(0, 0, 0, .04) 0 4px 10px, rgba(0, 0, 0, .06) 0 2px 8px;
  flex: none;
  position: relative;
  z-index: 45;
}
#formula-row.expanded #formula-bar-wrap { align-items: flex-start; }
#name-box-wrap { height: var(--fx-band-h); border-right: 1px solid rgba(0, 0, 0, .08); padding: 3px 10px 3px 0; }
#name-box {
  width: 88px;
  height: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: 600 12px/1 "DM Sans", system-ui, sans-serif;
  color: #374151;
  padding: 0 6px;
}
#name-box:hover { background: #fff; border-color: rgba(0, 0, 0, .12); }
#name-box:focus { border-color: var(--ui-accent-border); box-shadow: 0 0 0 3px rgba(35, 154, 77, .12); }
#name-box.error { border-color: #ef4444; background: #fef2f2; }
.namebox-dd { width: 18px; height: 24px; border-radius: 6px; }
.namebox-dd:hover { background: rgba(0, 0, 0, .06); }
.fx-group { height: var(--fx-band-h); border-right: 1px solid rgba(0, 0, 0, .08); gap: 2px; padding: 2px 10px 2px 6px; }
.fx-btn { font-size: 15px; color: var(--ui-accent); width: 32px; height: 24px; border-radius: 7px; font-style: italic; }
.fx-btn:hover { background: rgba(35, 154, 77, .1); color: var(--ui-accent-strong); }
#fx-cancel, #fx-confirm {
  width: 22px; height: 24px;
  border-radius: 7px;
  color: var(--ui-muted);
}
#fx-cancel:hover, #fx-confirm:hover { background: rgba(0, 0, 0, .06); color: var(--ui-ink); }
#fx-cancel svg, #fx-confirm svg { width: 15px; height: 15px; }
#formula-bar-wrap { padding: 3px 4px 3px 8px; }
#formula-input {
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: "SF Mono", "DM Mono", Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 20px;
  /* 30px box - 2px border - 8px padding = 20px = exactly one line box,
     so the collapsed text sits centred instead of riding the top edge. */
  padding: 4px 8px;
  background: transparent;
  caret-color: var(--ui-accent);
  height: 30px;
  transition: height .18s cubic-bezier(.4, 0, .2, 1);
}
#formula-row.expanded #formula-input { height: 90px; }
#formula-input:hover { background: #fff; border-color: rgba(0, 0, 0, .12); }
#formula-input:focus { border-color: var(--ui-accent-border); box-shadow: 0 0 0 3px rgba(35, 154, 77, .12); }
.expand-grip { height: var(--fx-band-h); color: var(--ui-faint); }
.expand-grip:hover { color: var(--ui-ink); }

/* ---------- Grid canvas backdrop (matches the app surface so transparent headers blend in) ---------- */
#grid-area { flex: 1; position: relative; overflow: hidden; background: #f5f5f5; min-height: 120px; }

/* ---------- Bottom bar: sheet tabs (left half) + count & zoom (right half) ---------- */
#status-bar {
  position: relative;
  z-index: 40;
  min-height: var(--status-h);
  margin: 10px;
  padding: 0 16px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  background: rgb(241, 245, 249);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 8px;
  font: 500 12px/1 "DM Sans", system-ui, sans-serif;
  color: var(--ui-muted);
  flex: none;
}
.sb-sheets { display: flex; align-items: stretch; gap: 2px; min-width: 0; flex: 1 1 50%; }
.tab-nav { display: flex; align-items: center; gap: 1px; padding: 0 4px; flex: none; }
.tab-nav .iconbtn { width: 26px; height: 26px; color: var(--ui-muted); border-radius: 7px; }
.tab-nav .iconbtn:hover { background: rgba(0, 0, 0, .06); color: var(--ui-ink); }
#sheet-tabs { display: flex; align-items: stretch; overflow: hidden; flex: 1; min-width: 0; }
.sheet-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border: none;
  background: transparent;
  font: 500 12px/1 "DM Sans", system-ui, sans-serif;
  color: #4b5563;
  position: relative;
  flex: none;
  max-width: 160px;
  white-space: nowrap;
  margin: 0;
  border-radius: 6px;
}
.sheet-tab:hover { background: rgba(0, 0, 0, .05); }
.sheet-tab.active {
  background: transparent;
  color: var(--ui-accent-strong);
  font-weight: 600;
  box-shadow: none;
}
.sheet-tab.active::before { content: none; }
.sheet-tab.active::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--ui-accent);
  transform-origin: center;
  animation: tabUnderline .2s cubic-bezier(.2, .8, .3, 1) both;
}
#add-sheet {
  width: 26px;
  height: 26px;
  flex: none;
  margin: 0;
  border-radius: 7px;
  color: var(--ui-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}
#add-sheet:hover { background: rgba(0, 0, 0, .06); color: var(--ui-ink); }
#add-sheet:active { background: rgba(0, 0, 0, .1); transform: scale(.94); }
#add-sheet svg { width: 16px; height: 16px; }

/* right half: selection count + zoom % */
.sb-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex: 0 1 50%; }
.statbar-item { padding: 0 4px; }
#sb-stats { color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18vw; }
#sb-stats b { color: inherit; font-weight: 500; }
.sb-sep { width: 1px; height: 14px; background: rgba(0, 0, 0, .1); flex: none; }
#sb-zoom-pct {
  min-width: 38px;
  text-align: right;
  color: var(--ui-muted);
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 3px 8px;
  font: 500 12px/1 "DM Sans", system-ui, sans-serif;
  letter-spacing: 0.01em;
  flex: none;
}
#sb-zoom-pct:hover { background: rgba(35, 154, 77, .14); color: var(--ui-accent-strong); }

@media (prefers-reduced-motion: reduce) {
  .save-indicator.saving { animation: none; }
  #ribbon-tabs .ribbon-tab::after, #ribbon-tabs .ribbon-tab:hover::after,
  #ribbon-tabs .ribbon-tab.active::after { transition: none; }
}

/* ==========================================================================
   File modal (Docs/Slides-style Backstage overlay)
   ========================================================================== */
@keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }
.file-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  z-index: 9999;
  padding: 20px;
}
.file-overlay.show { opacity: 1; visibility: visible; }
.file-overlay.closing { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.file-overlay-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 12px 40px;
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s;
}
.file-overlay.show .file-overlay-card { opacity: 1; animation: fadeInModal 0.25s ease both; }
.file-overlay.closing .file-overlay-card { opacity: 0; transition: opacity 0.2s; }
.file-overlay-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  position: relative;
}
.file-overlay-header-title {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(30, 41, 59, 0.92);
  letter-spacing: -0.02em;
  text-align: center;
}
.file-overlay-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(108, 117, 125, 0.5);
  transition: background 0.15s, color 0.15s;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.file-overlay-close-btn:hover { background: rgba(0, 0, 0, 0.06); color: rgba(44, 62, 80, 0.7); }
.file-overlay-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.file-overlay-section { display: flex; flex-direction: column; gap: 8px; }
.file-overlay-section-label {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: rgba(70, 70, 70, 0.5);
  font-weight: 500;
  margin-bottom: 4px;
}
.file-overlay-name-input {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(30, 41, 59, 0.92);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  letter-spacing: -0.01em;
}
.file-overlay-name-input:focus { border-color: rgba(35, 154, 77, 0.4); background: rgba(35, 154, 77, 0.03); }
.file-overlay-actions-row { display: flex; gap: 10px; }
.file-overlay-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(44, 62, 80, 0.82);
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  width: 100%;
  letter-spacing: -0.01em;
}
.file-overlay-action-btn:hover { background: rgba(0, 0, 0, 0.05); color: rgba(30, 41, 59, 0.95); border-color: rgba(0, 0, 0, 0.12); }
.file-overlay-action-btn svg { flex-shrink: 0; color: rgba(108, 117, 125, 0.45); transition: color 0.15s; }
.file-overlay-action-btn:hover svg { color: rgba(44, 62, 80, 0.65); }
.file-overlay-action-btn--danger {
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.12);
  background: rgba(220, 53, 69, 0.04);
}
.file-overlay-action-btn--danger:hover { color: #c82333; background: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.2); }
.file-overlay-action-btn--danger svg { color: #dc3545; }
.file-overlay-action-btn--danger:hover svg { color: #c82333; }
.file-overlay-action-btn[disabled] { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Docs/Slides-style modal skin (all custom dialogs)
   Centered card, circular icon badge above title, floating close button,
   generous 24px padding, centered action buttons, larger form fields.
   ========================================================================== */
#modal-root .modal-overlay {
  position: fixed;
  inset: 0;
  align-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#modal-root .modal {
  position: relative;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px;
  width: 480px;
  max-width: 92%;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#modal-root .modal > div { box-shadow: none; }
#modal-root .modal-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 24px 0;
  border-bottom: none;
  background: transparent;
  position: relative;
}
#modal-root .modal-head::after { content: none; }
#modal-root .modal-icon {
  width: 48px;
  height: 48px;
  background: var(--ui-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(35, 154, 77, 0.28);
}
#modal-root .modal-icon svg { width: 24px; height: 24px; }
#modal-root .modal-icon.danger {
  background: rgb(238, 90, 82);
  box-shadow: 0 4px 12px rgba(238, 90, 82, 0.3);
}
#modal-root .modal.danger .modal-foot .btn.primary {
  background: rgb(238, 90, 82);
  border-color: rgb(238, 90, 82);
  color: #fff;
}
#modal-root .modal.danger .modal-foot .btn.primary:hover {
  background: rgb(229, 57, 53);
  color: #fff;
  filter: none;
}
#modal-root .modal.danger .modal-foot .btn.primary:active { background: rgb(214, 48, 45); filter: none; color: #fff; }
#modal-root .modal-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.92);
  flex: none;
  text-align: center;
  letter-spacing: -0.02em;
}
#modal-root .modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: rgba(108, 117, 125, 0.5);
}
#modal-root .modal-x svg { width: 18px; height: 18px; stroke-width: 2.4; }
#modal-root .modal-x:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(44, 62, 80, 0.7);
  transform: none;
}
#modal-root .modal-body {
  padding: 20px 24px;
  font-size: 14px;
  color: rgba(44, 62, 80, 0.85);
  line-height: 1.5;
}
#modal-root .modal-foot {
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 24px 24px;
  border-top: none;
  background: transparent;
  border-radius: 0 0 12px 12px;
}
#modal-root .modal.confirm .modal-foot { justify-content: center; }
#modal-root .modal-foot.center { justify-content: center; }
#modal-root .modal.confirm .modal-body {
  text-align: center;
  font-size: 14px;
  color: rgba(44, 62, 80, 0.75);
  line-height: 1.55;
}
#modal-root .modal-foot:empty { display: none; }
#modal-root .modal-foot .btn {
  height: auto;
  padding: 10px 24px;
  min-width: 100px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}
#modal-root .modal-foot .btn.primary {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  box-shadow: none;
}
#modal-root .modal-foot .btn.primary:hover { background: var(--ui-accent-strong); filter: brightness(1.03); }
#modal-root .modal-foot .btn.primary:active { filter: brightness(0.96); }
#modal-root .modal-foot .btn.danger { border-color: rgba(220, 53, 69, 0.35); }
#modal-root .modal-foot .btn.danger:hover { background: #fdecec; }
#modal-root .form-row input[type="text"],
#modal-root .form-row input[type="number"],
#modal-root .form-row select,
#modal-root .form-row textarea,
#modal-root input[type="text"],
#modal-root input[type="number"],
#modal-root select,
#modal-root textarea {
  height: auto;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
}
#modal-root .form-row textarea, #modal-root textarea { min-height: 54px; }
#modal-root .form-row label { color: rgba(44, 62, 80, 0.8); font-size: 13px; }
#modal-root .hint { font-size: 12px; }
#modal-root .listbox { border-radius: 8px; }
#modal-root .progressbar { border-radius: 6px; height: 6px; }

/* ==========================================================================
   WELCOME SCREEN (home / workbook overview) — Docs/Slides-style
   ========================================================================== */
/* #grid-row must be hidden, not just #grid-area. #grid-row is `flex: 1`, so as
   a flex child of #app it claims its share of the height from its own flex
   basis — hiding only its children left it taking 50% of the viewport and
   squeezing .welcome-screen (also `flex: 1 1 0%`) into the other half, which
   clipped the welcome screen in half. Hiding the wrapper also covers the chart
   pane, which used to stay visible on the welcome screen. */
body.no-active-wb #ribbon,
body.no-active-wb #formula-row,
body.no-active-wb #grid-row,
body.no-active-wb #status-bar { display: none; }

/* Fade/slide when toggling between the welcome screen and the editor */
.screen-fade { animation: screenFade .24s ease-out; }
@keyframes screenFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.welcome-screen {
  display: none; /* JS toggles between flex (welcome) and none (editor) */
  align-items: stretch;
  justify-content: center;
  flex: 1 1 0%;
  width: 100%;
  min-height: 0;
  background: #FFF;
  position: relative;
  overflow: hidden;
}

.welcome-content {
  padding: 40px;
  max-width: 1200px;
  width: 100%;
  animation: sheetsWelcomeFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  overflow: hidden;
}

@keyframes sheetsWelcomeFadeIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.welcome-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
}

.welcome-header-top {
  display: flex;
  align-items: center;
  gap: 24px;
}

.welcome-logo {
  opacity: 0.9;
  filter: drop-shadow(rgba(35, 154, 77, 0.15) 0 4px 12px);
  animation: sheetsWelcomeBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

@keyframes sheetsWelcomeBounce {
  0%   { opacity: 0; transform: scale(0.8) translateY(-8px); }
  50%  { transform: scale(1.05); }
  100% { opacity: 0.9; transform: scale(1) translateY(0); }
}

.welcome-header-top h3 {
  margin: 0;
  color: rgba(30, 41, 59, 0.95);
}

.welcome-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.welcome-section-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: rgba(44, 62, 80, 0.9);
}

.welcome-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.create-sheet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ui-accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: rgba(35, 154, 77, 0.2) 0 4px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.create-sheet-btn:hover {
  background: var(--ui-accent-strong);
  box-shadow: rgba(35, 154, 77, 0.3) 0 8px 24px;
  transform: translateY(-2px);
}

.create-sheet-btn svg { width: 18px; height: 18px; }

.create-sheet-btn--secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #374151;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px;
}

.create-sheet-btn--secondary:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--ui-accent-border);
  color: var(--ui-accent-strong);
  box-shadow: rgba(35, 154, 77, 0.15) 0 4px 12px;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  overflow: hidden;
}

.sheet-list-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  overflow: hidden auto;
  padding-right: 8px;
  align-content: start;
  flex: 1 1 0%;
}

.sheet-list-display::-webkit-scrollbar { width: 8px; }
.sheet-list-display::-webkit-scrollbar-track { background: transparent; }
.sheet-list-display::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; }
.sheet-list-display::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

.workbook-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(3px);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px;
  animation: wbCardFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes wbCardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.workbook-card:hover {
  box-shadow: rgba(35, 154, 77, 0.12) 0 8px 24px;
  border-color: rgba(35, 154, 77, 0.2);
}

.workbook-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #fdfefe 0%, #f2f7f3 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workbook-card-thumb::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: calc(100% - 14px);
  background: #fff;
  border-radius: 6px 6px 0 0;
  box-shadow: rgba(15, 23, 42, 0.08) 0 -2px 10px, rgba(15, 23, 42, 0.06) 0 0 0 1px;
}

.wb-mini {
  position: relative;
  z-index: 1;
  width: 66%;
  aspect-ratio: 5 / 3;
  margin-top: 5%;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 2px;
  box-shadow: rgba(15, 23, 42, 0.05) 0 1px 6px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  padding: 5px;
  overflow: hidden;
}

.wb-cell {
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 1px;
  min-width: 0;
  min-height: 0;
}

.wb-cell.hdr { background: rgba(35, 154, 77, 0.22); border-color: transparent; }
.wb-cell.filled { background: rgba(35, 154, 77, 0.1); border-color: transparent; }
.wb-cell.hdr.filled { background: rgba(35, 154, 77, 0.3); }

.workbook-card-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workbook-card-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
}

.workbook-card-meta {
  font-size: 12px;
  color: rgba(71, 85, 105, 0.55);
  font-family: var(--font-ui);
}

.no-sheets-container {
  display: none; /* JS toggles to flex */
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
  text-align: center;
  overflow: hidden auto;
}

.no-sheets-img {
  max-width: 600px;
  height: auto;
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out, filter 0.45s ease-out;
  will-change: opacity, transform, filter;
}

.no-sheets-hint {
  font-size: 16px;
  color: rgba(44, 62, 80, 0.5);
  margin: 0;
}

@media (max-width: 960px) {
  .welcome-content { padding: 32px 24px; }
  .sheet-list-display { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .welcome-content { padding: 24px 16px; }
  .sheet-list-display { grid-template-columns: 1fr; }
}
/* ===================== Find & Replace / Go To bar (bottom-right) =====================
   Same compact design as the Notes app's findReplaceBar, with the Docs teal
   accent: rounded card pinned to the bottom-right corner, slide-in animation,
   find row with prev/next + live count, replace row, Go To row, options. */
#findBar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9500;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.14);
  padding: 12px 14px 10px;
  width: 320px;
  font-family: var(--font-ui);
  animation: frSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes frSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

#findBar .fr-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--ink-3);
}

#findBar .fr-title { font-size: 13px; font-weight: 600; flex: 1; }

#findBar .fr-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--ink-3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

#findBar .fr-close-btn:hover { background: var(--accent-tint); color: var(--ink-2); }

#findBar .fr-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  position: relative;
}

#findBar .fr-input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
  background: #fff;
  color: var(--ink-2);
}

#findBar .fr-input:focus { border-color: var(--accent); }
#findBar .fr-input.fr-no-match { border-color: #ef4444; background: #fff5f5; }

#findBar .fr-goto-num { flex: 0.8; }

#findBar .fr-nav-btn {
  background: #f3f4f6;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  color: var(--ink-3);
  transition: background 0.15s;
  flex-shrink: 0;
}

#findBar .fr-nav-btn:hover { background: var(--accent-tint); }
#findBar .fr-nav-btn:disabled { opacity: 0.4; cursor: default; }

#findBar .fr-count {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

#findBar .fr-action-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}

#findBar .fr-action-btn:hover { background: var(--accent-dark); }
#findBar .fr-action-btn:disabled { opacity: 0.4; cursor: default; }

#findBar .fr-divider {
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 8px 0 9px;
}

#findBar .fr-goto-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

#findBar .fr-options { margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap; }

#findBar .fr-opt-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}

#findBar .fr-opt-label input { cursor: pointer; accent-color: var(--accent); }


@media print {
  #findBar { display: none !important; }
}