/* Query Grid (information-technology/query-grid.php). The page chrome is the one-screen layout in /css/resource.css.
   On a laptop or desktop: the task and the table on the left; the query design grid across the top on the right, with
   the SQL and the result under it (each scrolls inside its panel). On smaller screens they stack. Theme tokens only. */
.rp-main{gap:10px}
.qg-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,350px) minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"left design design" "left sql result";gap:12px}
.qg-work>.panel{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px}
.qg-left{grid-area:left}.qg-design{grid-area:design}.qg-sql{grid-area:sql}.qg-result{grid-area:result}
.qg-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.qg-row .btn{margin-left:auto}
.qg-small{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.qg-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px}
.qg-sec{display:flex;flex-direction:column;gap:8px}
.qg-sec+.qg-sec{border-top:1px solid var(--line);padding-top:12px}
.qg-sec:empty{display:none}

/* the task */
.qg-lvl{font:700 11px/1 var(--font-mono);padding:3px 7px;border-radius:3px;background:var(--accent-tint);color:var(--accent-deep)}
.qg-lvl.as{background:var(--accent-b-tint);color:var(--accent-b-deep)}
.qg-pips{display:flex;flex-wrap:wrap;gap:4px}
.qg-pip{min-width:26px;height:26px;padding:0 4px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);font:600 11.5px/1 var(--font-mono);cursor:pointer}
.qg-pip:hover{border-color:var(--accent)}
.qg-pip.now{outline:2px solid var(--accent);outline-offset:1px}
.qg-pip.first{background:var(--ok);border-color:var(--ok);color:#fff}
.qg-pip.done{background:var(--ok-tint);border-color:var(--ok);color:var(--ink)}
.qg-pip.shown{background:var(--hint-tint);border-color:var(--hint);color:var(--ink)}
.qg-pip.tried{border-color:var(--bad)}
.qg-pip.qg-rev{font-family:var(--font-display);padding:0 8px}
.qg-pip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.qg-task{margin:0;font:600 15.5px/1.45 var(--font-display);color:var(--ink);text-wrap:pretty}
.qg-btns{display:flex;gap:8px;flex-wrap:wrap}
.qg-bad{margin:0;padding:9px 12px;border-left:3px solid var(--bad);background:var(--bad-tint);border-radius:0 6px 6px 0;font-size:14px;line-height:1.5;color:var(--ink)}
.qg-err{color:var(--bad);font-family:var(--font-body);white-space:normal}
.cq-working.shown{border-left-color:var(--hint)}
.cq-working.shown h4{color:var(--hint)}
.qg-sum{margin:0;font-size:14px;color:var(--ink)}
.qg-review{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.qg-review li{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--panel-2)}
.qg-rq{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--ink-soft);font:13px/1.45 var(--font-body)}
.qg-st{font:700 10.5px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;border-radius:3px;margin-right:4px}
.qg-st.first{background:var(--ok);color:#fff}.qg-st.later{background:var(--ok-tint);color:var(--ok)}.qg-st.shown{background:var(--hint-tint);color:var(--hint)}.qg-st.todo{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.qg-rm{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft)}

/* the table's fields and records */
.qg-fields{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.qg-field{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:5px 8px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;font:13px/1.2 var(--font-body)}
.qg-field b{font:600 12.5px var(--font-mono)}
.qg-field span{font-size:11px;color:var(--muted)}
.qg-field:hover{border-color:var(--accent);background:var(--accent-tint)}
.qg-field:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.qg-data{overflow:auto;max-height:340px;border:1px solid var(--line);border-radius:5px}
table.qg-table{border-collapse:collapse;width:100%;font:12.5px/1.35 var(--font-mono);margin:0}
table.qg-table th,table.qg-table td{border-bottom:1px solid var(--line);padding:4px 8px;text-align:left;white-space:nowrap}
table.qg-table thead th{position:sticky;top:0;background:var(--accent-tint);color:var(--accent-deep);font:700 11px/1.2 var(--font-mono);text-transform:none;letter-spacing:0}
table.qg-table td{color:var(--ink)}

/* the design grid */
.qg-gridwrap{overflow:auto;border:1px solid var(--line-strong);border-radius:5px;background:var(--panel-2)}
table.qg-grid{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;table-layout:fixed;margin:0;font-size:13px}
table.qg-grid th{width:78px;text-align:right;padding:2px 8px;font:600 12px/1 var(--font-display);color:var(--ink-soft);text-transform:none;letter-spacing:0;background:var(--panel-2);border-bottom:1px solid var(--line)}
table.qg-grid td{padding:2px 3px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
table.qg-grid input[type=text],table.qg-grid select{width:100%;min-width:0;font:13px/1.2 var(--font-mono);color:var(--ink);background:transparent;border:1px solid transparent;border-radius:3px;padding:4px 5px}
table.qg-grid select{font-family:var(--font-body)}
table.qg-grid input[type=text]:focus,table.qg-grid select:focus{outline:2px solid var(--focus);outline-offset:-1px;background:var(--paper)}
.qg-r-field input{font-weight:700}
.qg-r-field td{background:var(--accent-tint)}
.qg-tbl{font:12px var(--font-mono);color:var(--muted);padding-left:8px !important}
.qg-show{text-align:center}
.qg-show input{width:17px;height:17px;accent-color:var(--accent)}
.qg-show input.qg-off{visibility:hidden}
@media (min-width:901px) and (max-height:700px){table.qg-grid th,table.qg-grid td{padding-top:1px;padding-bottom:1px}}
.qg-r-crit0 td{border-top:2px solid var(--line-strong)}

/* the SQL and the result */
.qg-code{margin:0;flex:1;min-height:0;overflow:auto;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;font:13.5px/1.55 var(--font-mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.qg-code b{color:var(--accent-deep)}
.qg-code .s{color:var(--ok)}
.cq-working .qg-code,.qg-small-code{flex:none;font-size:12.5px;padding:8px 10px;margin-top:4px;background:var(--panel)}
.qg-notes{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-soft)}
.qg-notes:empty{display:none}
.qg-count{font:600 12.5px var(--font-mono);color:var(--accent-deep)}
.qg-reswrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:5px}
.qg-none{padding:12px}

@media (min-width:901px) and (max-width:1250px){
  .qg-work{grid-template-columns:minmax(270px,300px) minmax(0,.8fr) minmax(0,1.2fr)}
  .qg-code{font-size:12.5px;padding:8px 10px}
}
@media (min-width:901px) and (max-height:700px){
  .qg-work>.panel{padding:8px 12px 10px;gap:6px}
  table.qg-grid input[type=text],table.qg-grid select{padding:2px 5px}
  .qg-task{font-size:14.5px}
}
@media (max-width:900px){
  .qg-work{display:flex;flex-direction:column}
  .qg-scroll{overflow:visible}
  .qg-code{flex:none}
  .qg-reswrap{max-height:60vh}
  .qg-pip{min-width:40px;height:40px;font-size:13px}
  .qg-field{min-height:40px}
  .btn{min-height:40px}
  .seg-toggle button{min-height:40px}
  .rp-controls{width:100%}
  table.qg-grid input[type=text],table.qg-grid select{min-height:40px;font-size:16px}
  .qg-show input{width:24px;height:24px}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .qg-work>.panel{padding:10px}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;padding:8px 6px;min-width:0}
}