/* The spreadsheet grid and formula bar shared by the IT spreadsheet resources (Formula Gym, Fill-Down Lab, What-If
   Models): LiwmGrid in sheet.js draws the grid. Theme tokens only; the page's own names below point at
   them: the colours a formula's references are outlined in (as a spreadsheet colours them while a formula is typed),
   the colours of a fill's moved and fixed parts, and the grid's lines and headings. */
:root{
  --ref-1:var(--viz-1);--ref-2:var(--viz-5);--ref-3:var(--viz-4);--ref-4:var(--viz-3);--ref-5:var(--viz-2);--ref-6:var(--viz-6);
  --moved:var(--viz-7);--moved-tint:var(--viz-7-tint);--fixed:var(--viz-1);--fixed-tint:var(--viz-1-tint);
  --sg-grid:var(--line);--sg-head:var(--panel-2);
}

/* ---------- the grid ---------- */
.sg-wrap{overflow:auto;min-height:0;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);-webkit-overflow-scrolling:touch}
table.sg{border-collapse:separate;border-spacing:0;width:100%;min-width:560px;table-layout:fixed;font:13px/1.2 var(--font-body);margin:0}
table.sg th,table.sg td{padding:0;border:0;text-transform:none;letter-spacing:0}
table.sg col.sg-rh{width:34px}
table.sg thead th{position:sticky;top:0;z-index:2;background:var(--sg-head);color:var(--muted);font:600 11.5px/1 var(--font-mono);text-align:center;height:22px;border-right:1px solid var(--sg-grid);border-bottom:1px solid var(--line-strong)}
table.sg th.sg-rhd{position:sticky;left:0;z-index:1;background:var(--sg-head);color:var(--muted);font:600 11.5px/1 var(--font-mono);text-align:center;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--sg-grid)}
table.sg th.sg-corner{left:0;z-index:3}
table.sg th.on{background:var(--accent-tint);color:var(--accent-deep)}
td.sg-c{background:var(--panel)}
table.sg td.sg-c{position:relative;height:var(--sg-row,27px);border-right:1px solid var(--sg-grid);border-bottom:1px solid var(--sg-grid);color:var(--ink);cursor:cell;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.sg-v{display:block;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--sg-row,27px)}
td.sg-num .sg-v,td.sg-bool .sg-v,td.sg-err .sg-v{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px}
td.sg-bool .sg-v,td.sg-err .sg-v{text-align:center}
td.sg-err .sg-v{color:var(--bad);font-weight:700}
td.sg-showf .sg-v{font:12px/var(--sg-row,27px) var(--font-mono);color:var(--accent-deep)}
td.sg-head{background:var(--panel-2);font-weight:700}
td.sg-head .sg-v{font-family:var(--font-display);font-size:12.5px}
td.sg-input{background:var(--accent-b-tint)}
td.sg-input .sg-v{color:var(--accent-b-deep);font-weight:700}
td.sg-out .sg-v{font-weight:700}
td.sg-label .sg-v{color:var(--ink-soft)}

/* the selected cell, and the cells a question wants an answer in */
td.sg-c.sg-sel{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}
td.sg-ans{background:var(--warn-tint)}
td.sg-ans .sg-v:empty::after{content:"?";color:var(--warn);font:700 12px/var(--sg-row,27px) var(--font-mono);display:block;text-align:center}
td.sg-ok{background:var(--ok-tint)}
td.sg-bad{background:var(--bad-tint)}
td.sg-bad .sg-v{color:var(--bad)}

/* a formula's references: outlined in their own colour, as a spreadsheet does while one is typed */
td.sg-lit{background:color-mix(in srgb,var(--ref) 12%,var(--panel))}
td.sg-lit::after{content:"";position:absolute;inset:0;pointer-events:none;border:0 solid var(--ref)}
td.sg-rt::after{border-top-width:2px}
td.sg-rb::after{border-bottom-width:2px}
td.sg-rl::after{border-left-width:2px}
td.sg-rr::after{border-right-width:2px}

/* the fill handle, and the cells a fill is about to cover */
.sg-handle{position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;background:var(--accent);border:2px solid var(--panel);z-index:3;cursor:crosshair;touch-action:none}
.sg-handle::before{content:"";position:absolute;inset:-12px}
td.sg-filling{outline:2px dashed var(--accent);outline-offset:-3px}

/* ---------- the formula bar ---------- */
.fbar{display:flex;align-items:stretch;gap:0;border:1px solid var(--line-strong);border-radius:5px;background:var(--paper);overflow:hidden;flex:none}
.fbar .fbar-name{flex:none;min-width:56px;display:flex;align-items:center;justify-content:center;padding:0 10px;font:700 13px/1 var(--font-mono);color:var(--ink);background:var(--panel-2);border-right:1px solid var(--line-strong)}
.fbar .fbar-fx{flex:none;display:flex;align-items:center;padding:0 8px;font:italic 700 14px/1 Georgia,serif;color:var(--muted);border-right:1px solid var(--line)}
.fbar input,.fbar .fbar-text{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:15px/1.4 var(--font-mono);padding:8px 10px}
.fbar input:focus{outline:none}
.fbar:focus-within{outline:2px solid var(--focus);outline-offset:1px}
.fbar .btn{border-radius:0;border-width:0 0 0 1px;border-color:var(--line-strong)}
.fbar-ghost{position:absolute;inset:0;pointer-events:none;white-space:pre;overflow:hidden;color:transparent}

/* a formula written out with its references coloured (the parts a fill moved, and kept) */
.ftext{font:14px/1.6 var(--font-mono);color:var(--ink);overflow-wrap:anywhere}
.ftext .r{font-weight:700;color:var(--ref);border-bottom:2px solid var(--ref)}
.ftext .mv{background:var(--moved-tint);color:var(--moved);border-radius:3px;font-weight:700;padding:0 1px}
.ftext .fx{background:var(--fixed-tint);color:var(--fixed);border-radius:3px;font-weight:700;padding:0 1px}
.ftext .dol{color:var(--fixed);font-weight:700}
.ftext .brk{background:var(--bad-tint);color:var(--bad);font-weight:700;border-radius:3px;padding:0 2px}

.sg-small table.sg{font-size:12px}
.sg-small td.sg-num .sg-v{font-size:11.5px}
@media (max-width:900px){
  table.sg td.sg-c{--sg-row:40px}
  .sg-wrap table.sg{min-width:640px !important}   /* (over a page's own laptop width) */
  .fbar input{font-size:16px;min-height:44px}
  .fbar .btn{min-height:44px}
}