/* Vonk — GRID, the lab's own spreadsheet (lab/grid/view.js).
 * Looks like a spreadsheet on purpose: grey headers, gridlines, a formula bar,
 * so what pupils learn here they recognise in Excel or Sheets. Vonk's own
 * colours only where they help: teal for the selection, orange for the
 * thing to act on. */
.grid-app{--g-line:#E2DDD2; --g-head:#F3F0EA; --g-head-on:#DCEFF0; --g-sel:rgba(12,129,140,.12); --g-act:#0C818C;
  position:relative; display:flex; flex-direction:column; background:#fff; border-radius:12px; box-shadow:0 0 0 1.5px var(--line, #ECE6DA);
  min-height:0; font-family:var(--font-body, Inter, system-ui, sans-serif); color:var(--ink, #243244); overflow:hidden;}
.grid-app [hidden]{display:none !important;}

/* toolbar */
.g-tools{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:6px 8px; background:var(--warm, #FBF7F0); border-bottom:1px solid var(--g-line); position:relative;}
.g-tb{display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; border-radius:8px; padding:6px 9px; cursor:pointer;
  font:600 13px/1 var(--font-body, Inter, sans-serif); color:var(--navy, #052950);}
.g-tb:hover, .g-tb:focus-visible{background:#fff; box-shadow:0 0 0 1.5px var(--g-line);}
.g-tb[aria-pressed="true"]{background:#E3F2F3; box-shadow:inset 0 0 0 1.5px #8FCBD0;}
.g-tb:disabled{opacity:.35; cursor:default; background:none; box-shadow:none;}
.g-tb.icon-only span{display:none;}
.g-tb.dec{font:700 12px/1 ui-monospace, Menlo, Consolas, monospace; padding:6px 7px;}
.g-sep{width:1px; height:20px; background:var(--g-line); margin:0 4px;}
.g-fmt{font:600 13px/1 var(--font-body, Inter, sans-serif); color:var(--navy, #052950); border:1.5px solid var(--g-line); border-radius:8px; padding:5px 6px; background:#fff;}
.g-menu{position:absolute; z-index:30; top:100%; margin-top:-2px; background:#fff; border-radius:10px; box-shadow:0 0 0 1.5px var(--g-line), 0 10px 24px rgba(5,41,80,.16); padding:4px; display:flex; flex-direction:column; min-width:200px;}
.g-menu button{border:none; background:none; text-align:left; padding:8px 10px; border-radius:7px; cursor:pointer; font:500 14px/1.2 var(--font-body, Inter, sans-serif); color:var(--ink, #243244);}
.g-menu button:hover, .g-menu button:focus-visible{background:var(--warm, #FBF7F0);}

/* name box and formula bar */
.g-fbar{display:flex; align-items:center; gap:6px; padding:5px 8px; border-bottom:1px solid var(--g-line);}
.g-name{width:84px; flex:none; font:600 13px/1 ui-monospace, Menlo, Consolas, monospace; color:var(--navy, #052950); border:1.5px solid var(--g-line); border-radius:6px; padding:5px 7px; text-align:center;}
.g-fx{flex:none; color:var(--muted, #5C6572); font:italic 600 14px/1 Georgia, serif; padding:0 4px;}
.g-fx sub{font-size:9px;}
.g-input{flex:1; min-width:0; font:14px/1.2 ui-monospace, Menlo, Consolas, monospace; color:var(--ink, #243244); border:1.5px solid var(--g-line); border-radius:6px; padding:5px 8px;}
.g-name:focus, .g-input:focus{outline:none; border-color:var(--g-act);}

/* the grid */
.g-wrap{position:relative; flex:1; min-height:120px; overflow:auto; outline:none;}
.g-wrap:focus-visible{box-shadow:inset 0 0 0 2px rgba(12,129,140,.35);}
.g-table{border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:14px; font-variant-numeric:tabular-nums; user-select:none; -webkit-user-select:none;}
.g-table col.rh{width:44px;}
.g-table th{background:var(--g-head); color:#6B6F78; font:600 12px/1 var(--font-body, Inter, sans-serif); border-right:1px solid var(--g-line); border-bottom:1px solid var(--g-line);
  height:24px; padding:0 4px; text-align:center; position:sticky; z-index:2; cursor:default;}
.g-table thead th{top:0; z-index:3;}
.g-table thead th.corner{left:0; z-index:4;}
.g-table tbody th{left:0; text-align:right; padding-right:7px;}
.g-table th.on{background:var(--g-head-on); color:var(--teal, #0C818C);}
.g-table th.filt{color:#1F5FBF;}
.g-table th.ch{position:sticky;}
.g-rs{position:absolute; right:-3px; top:0; bottom:0; width:7px; cursor:col-resize; z-index:5;}
.g-table td{height:26px; padding:0; border-right:1px solid var(--g-line); border-bottom:1px solid var(--g-line); position:relative; background:#fff; cursor:cell;}
.g-table td > div{padding:0 6px; white-space:nowrap; overflow:hidden; line-height:25px;}
.g-table td.num > div{text-align:right;}
.g-table td.mid > div{text-align:center;}
.g-table td.spill{overflow:visible; z-index:1;}
.g-table td.spill > div{overflow:visible;}
.g-table td.empty{background:transparent;}
.g-table td[colspan] > div, .g-table td[rowspan] > div{text-align:center;}
.g-table td.sel{background:var(--g-sel);}
.g-table td.act{box-shadow:inset 0 0 0 2px var(--g-act); z-index:2;}
.g-table td.cut{background-image:repeating-linear-gradient(90deg, var(--g-act) 0 4px, transparent 4px 8px); background-size:100% 1.5px; background-repeat:no-repeat;}
.g-table.show-f td > div{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; text-align:left;}
.g-drop{position:absolute; right:2px; top:3px; width:19px; height:19px; border:1px solid #C9C3B6; border-radius:4px; background:#fff; color:#6B6F78; font-size:11px; line-height:1; padding:0; cursor:pointer; z-index:3;}
.g-drop.on{background:#1F5FBF; color:#fff; border-color:#1F5FBF;}
.g-handle{position:absolute; width:9px; height:9px; background:var(--g-act); border:1.5px solid #fff; border-radius:2px; cursor:crosshair; z-index:6; box-sizing:border-box;}
/* the square is small; the place you can grab it is not (trackpads, touch) */
.g-handle::before{content:""; position:absolute; inset:-8px;}
.g-fillbox{position:absolute; border:2px dashed var(--g-act); pointer-events:none; z-index:5;}
.g-editor.idle{opacity:0; pointer-events:none; caret-color:transparent; z-index:0;}
.g-editor{position:absolute; z-index:8; box-sizing:border-box; font:14px/1 var(--font-body, Inter, sans-serif); padding:0 6px; border:2px solid var(--g-act); border-radius:0; background:#fff; outline:none;}

/* status bar and sheet tabs */
.g-status{min-height:28px; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:4px 12px; font-size:13px; color:var(--muted, #5C6572); border-top:1px solid var(--g-line); background:var(--warm, #FBF7F0);}
.g-status b{color:var(--navy, #052950); font-weight:700;}
.g-status .g-dot{opacity:.5;}
.g-status .g-found{margin-right:auto; color:#1F5FBF; font-weight:600;}
.g-status .g-msg{margin-right:auto; color:#B4232A; font-weight:600;}
.g-tabs{display:flex; gap:2px; padding:0 8px 6px; background:var(--warm, #FBF7F0);}
.g-tab{border:none; background:transparent; padding:6px 14px; border-radius:0 0 8px 8px; font:600 13px/1 var(--font-body, Inter, sans-serif); color:var(--muted, #5C6572); cursor:pointer;}
.g-tab.on{background:#fff; color:var(--navy, #052950); box-shadow:0 2px 0 var(--g-act) inset;}

/* sort warning and filter menu */
.g-dlg{position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(3,24,47,.35); padding:12px;}
.g-dlg-card{background:#fff; border-radius:14px; padding:16px 18px; max-width:440px; box-shadow:0 0 0 3px var(--gold, #F2AD20), 0 16px 40px rgba(0,0,0,.3);}
.g-dlg-card h3{margin:0 0 6px; font:700 16px/1.3 var(--font-body, Inter, sans-serif); color:var(--navy, #052950);}
.g-dlg-card p{margin:0 0 12px; font-size:14.5px;}
.g-dlg-btns{display:flex; flex-direction:column; gap:6px;}
.g-dlg-btns button, .g-pop button{border:none; border-radius:9px; padding:9px 12px; cursor:pointer; font:600 14px/1.2 var(--font-body, Inter, sans-serif); background:var(--warm, #FBF7F0); color:var(--navy, #052950); text-align:left;}
.g-dlg-btns button.main, .g-pop button.main{background:var(--navy, #052950); color:#fff;}
.g-dlg-btns button:hover, .g-pop button:hover{box-shadow:0 0 0 2px var(--gold, #F2AD20);}
.g-pop{position:absolute; z-index:35; width:240px; background:#fff; border-radius:12px; padding:8px; box-shadow:0 0 0 1.5px var(--g-line), 0 14px 30px rgba(5,41,80,.2); font-size:14px;}
.g-pop-sort{display:flex; flex-direction:column; gap:4px; padding-bottom:6px; border-bottom:1px solid var(--g-line);}
.g-pop-h{margin:8px 2px 4px; font-size:12px; font-weight:600; color:var(--muted, #5C6572);}
.g-pop-list{max-height:170px; overflow:auto; border:1px solid var(--g-line); border-radius:8px; padding:4px 6px;}
.g-pop-list label{display:flex; align-items:center; gap:4px; padding:3px 0; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.g-pop-num{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; color:var(--muted, #5C6572);}
.g-pop-num select, .g-pop-num input{font:14px/1 var(--font-body, Inter, sans-serif); border:1.5px solid var(--g-line); border-radius:6px; padding:4px;}
.g-pop-num input{width:64px;}
.g-pop-btns{display:flex; justify-content:flex-end; gap:6px; margin-top:8px;}

@media (max-width:640px){
  .g-tb span{display:none;}
  .g-name{width:60px;}
}
@media print{ .g-tools, .g-fbar, .g-handle, .g-status{display:none;} }

/* the cells and, beside them, the chart dock (lab/grid/chart.js) */
.g-body{flex:1; min-height:0; display:flex;}
.g-body .g-wrap{flex:1 1 auto; min-width:0;}
.g-dock{flex:0 0 min(380px,42%); overflow:auto; border-left:1px solid var(--g-line); background:var(--warm, #FBF7F0); padding:8px; display:flex; flex-direction:column; gap:10px;}
.g-chart{background:#fff; border-radius:10px; box-shadow:0 0 0 1px var(--g-line); overflow:hidden; flex-shrink:0;}
.g-chart-pic svg{display:block; width:100%; height:auto;}
.g-chart-set{display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; padding:8px 10px 10px; border-top:1px solid var(--g-line); font-size:12px;}
.g-chart-set label{display:flex; flex-direction:column; gap:2px; color:var(--muted, #5C6572); font-weight:600; min-width:0;}
.g-chart-set label:has(input[type=checkbox]){flex-direction:row; align-items:center; gap:6px; align-self:end;}
.g-chart-set select, .g-chart-set input[type=text]{font:13px/1.2 var(--font-body, Inter, sans-serif); color:var(--ink, #243244); border:1.5px solid var(--g-line); border-radius:6px; padding:4px 6px; min-width:0; width:100%; box-sizing:border-box;}
.g-chart-del{grid-column:1 / -1; justify-self:start; border:none; background:none; color:#B4232A; font:600 12.5px/1 var(--font-body, Inter, sans-serif); cursor:pointer; padding:4px 0; text-decoration:underline;}
.g-dlg-in{font:15px/1 var(--font-body, Inter, sans-serif); border:1.5px solid var(--g-line); border-radius:8px; padding:8px; width:100%; margin-bottom:10px;}
.g-dlg-row{flex-direction:row; justify-content:flex-end;}
@media (max-width:760px){ .g-body{flex-direction:column;} .g-dock{flex:0 0 auto; border-left:none; border-top:1px solid var(--g-line);} }

/* ---- data tools (phases 3–4): tables, trace, spill, validation ---- */
.g-table td.tbh{background:#0C818C; color:#fff; font-weight:700;}
.g-table td.tbb{background:#E8F3F4;}
.g-table td.tbw{background:#fff;}
.g-table td.tr{box-shadow:inset 0 0 0 2px var(--trc,#2457A6);}
.g-table td.tr0{--trc:#2457A6;} .g-table td.tr1{--trc:#C83B14;} .g-table td.tr2{--trc:#7A4FB5;} .g-table td.tr3{--trc:#137A47;}
.g-table td.spl{box-shadow:inset 0 0 0 1px #4F8FD6; background-image:linear-gradient(rgba(79,143,214,.06),rgba(79,143,214,.06));}
.g-table td.inv{background-image:radial-gradient(ellipse 52% 46% at 50% 50%, transparent 86%, #D21F1F 88%, #D21F1F 96%, transparent 98%);}
.g-table td{position:relative;}
.g-vdrop{position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:18px; height:20px; border:1px solid #9AA6B2; background:#F4F1EA; border-radius:3px; font-size:11px; line-height:1; cursor:pointer; padding:0; color:#243244; z-index:2;}
.g-vlist{min-width:140px; max-height:220px; overflow:auto; display:flex; flex-direction:column; padding:4px;}
.g-vlist button{border:none; background:none; text-align:left; padding:6px 10px; border-radius:6px; font:500 14px var(--font-body, Inter, sans-serif); cursor:pointer;}
.g-vlist button:hover, .g-vlist button:focus-visible{background:#E8F3F4;}
.g-dlg-wide{max-width:min(560px, 94vw); width:100%;}
.g-dlg-f{display:flex; flex-direction:column; gap:4px; margin:8px 0; font-size:13px; font-weight:600; color:#243244;}
.g-dlg-f input, .g-dlg-f select, .g-dlg-ta{font:500 14px var(--font-body, Inter, sans-serif); padding:7px 9px; border:1.5px solid #CFC7B8; border-radius:8px; background:#fff;}
.g-dlg-ta{font-family:ui-monospace, Menlo, monospace; font-size:13px; width:100%; resize:vertical;}
.g-dlg-chk{display:flex; gap:6px; align-items:center; font-size:14px; margin:4px 0;}
.g-dlg-cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:2px 12px; max-height:180px; overflow:auto;}
.g-dlg-p{margin:10px 0 4px; font-size:13px; color:#5C6572;}
.g-dlg-row2{display:flex; gap:16px; flex-wrap:wrap;}
.g-dlg-rad{border:1.5px solid #E2DACB; border-radius:10px; padding:6px 10px; display:flex; flex-direction:column; gap:3px; font-size:14px;}
.g-dlg-rad legend{font-size:12px; font-weight:700; color:#5C6572; padding:0 4px;}
.g-dlg-pv{overflow:auto; max-height:140px; border:1px solid #E2DACB; border-radius:8px;}
.g-dlg-pv table{border-collapse:collapse; font-size:12.5px;}
.g-dlg-pv td{border:1px solid #ECE6DA; padding:3px 8px; white-space:nowrap;} .g-dlg-pv td.n{text-align:right;}
.g-dlg-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px;}
.g-dlg-grid .g-dlg-f{margin:5px 0;}
@media (max-width:520px){ .g-dlg-grid{grid-template-columns:1fr;} }