/* kql-box.css — in-page KQL sandbox, styled to the class page's paper/ink system.
   Relies on the page's own custom properties (--paper, --ink, --pen, --mono, --sans, --rule). */
.kqlb{
  border:1px solid var(--ink, #16130F);
  background:var(--paper-3, #FBF8F1);
  padding:26px 26px 24px;
  margin:26px 0 40px;
  box-shadow:6px 6px 0 var(--paper-2, #EBE5D8), 6px 6px 0 1px var(--rule, #CFC7B6);
}
.kqlb-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--ink, #16130F);
}
.kqlb-tag{
  font-family:var(--mono, monospace);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pen, #C4360E);
}
.kqlb-hint{
  font-family:var(--mono, monospace);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3, #6B6357);
}
.kqlb-label{
  display:block;font-family:var(--sans, sans-serif);font-size:13px;color:var(--ink-2, #4A443B);
  margin-bottom:8px;
}
.kqlb-input{
  width:100%;min-width:0;box-sizing:border-box;
  font-family:var(--mono, monospace);font-size:13.5px;line-height:1.7;color:var(--ink, #16130F);
  background:var(--paper, #F3EFE6);border:1px solid var(--rule, #CFC7B6);border-left:2px solid var(--pen, #C4360E);
  padding:12px 14px;resize:vertical;
}
.kqlb-input:focus{outline:none;border-color:var(--ink, #16130F);border-left-color:var(--pen, #C4360E)}
.kqlb-actions{
  display:flex;align-items:center;gap:16px;margin-top:12px;
}
.kqlb-run{
  font-family:var(--mono, monospace);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink, #16130F);color:var(--paper, #F3EFE6);border:1px solid var(--ink, #16130F);
  padding:11px 20px;cursor:pointer;transition:background .14s;
}
.kqlb-run:hover{background:var(--pen, #C4360E);border-color:var(--pen, #C4360E)}
.kqlb-run:focus-visible{outline:2px solid var(--pen, #C4360E);outline-offset:3px}
.kqlb-count{
  font-family:var(--mono, monospace);font-size:11px;letter-spacing:.06em;color:var(--ink-3, #6B6357);
}
.kqlb-results{margin-top:18px;min-width:0}
.kqlb-table-wrap{
  overflow-x:auto;max-width:100%;border-top:1px solid var(--ink, #16130F);
}
table.kqlb-table{
  width:auto;min-width:100%;border-collapse:collapse;font-size:13px;
}
table.kqlb-table th{
  font-family:var(--mono, monospace);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3, #6B6357);text-align:left;border-bottom:1px solid var(--ink, #16130F);
  padding:8px 12px 8px 0;white-space:nowrap;
}
table.kqlb-table td{
  border-bottom:1px dotted var(--rule, #CFC7B6);padding:8px 12px 8px 0;
  color:var(--ink-2, #4A443B);font-family:var(--mono, monospace);white-space:nowrap;
}
.kqlb-error{
  font-family:var(--mono, monospace);font-size:12.5px;line-height:1.7;color:var(--pen, #C4360E);
  background:var(--paper-2, #EBE5D8);border-left:2px solid var(--pen, #C4360E);padding:12px 14px;
}
.kqlb-empty{
  font-family:var(--mono, monospace);font-size:11.5px;color:var(--ink-3, #6B6357);padding:10px 0 0;
}
.kqlb-tries{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule, #CFC7B6)}
.kqlb-tries-head{
  font-family:var(--mono, monospace);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3, #6B6357);margin-bottom:12px;
}
.kqlb-try{padding:14px 0;border-bottom:1px dotted var(--rule, #CFC7B6)}
.kqlb-try:last-child{border-bottom:none}
.kqlb-try-label{
  font-family:var(--sans, sans-serif);font-weight:600;font-size:13.5px;color:var(--ink, #16130F);
  margin-bottom:4px;
}
.kqlb-try-p{
  font-family:var(--sans, sans-serif);font-size:14px;line-height:1.55;color:var(--ink-2, #4A443B);
  margin:0 0 10px;max-width:64ch;
}
.kqlb-try-load{
  font-family:var(--mono, monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--ink, #16130F);border:1px solid var(--ink, #16130F);
  padding:9px 14px;cursor:pointer;transition:background .12s,color .12s;
}
.kqlb-try-load:hover{background:var(--ink, #16130F);color:var(--paper, #F3EFE6)}
.kqlb-try-load:focus-visible{outline:2px solid var(--pen, #C4360E);outline-offset:3px}
.kqlb-reveal{margin-top:10px}
.kqlb-reveal summary{
  font-family:var(--mono, monospace);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pen, #C4360E);cursor:pointer;
}
.kqlb-reveal summary:focus-visible{outline:2px solid var(--pen, #C4360E);outline-offset:3px}
.kqlb-reveal p{
  font-family:var(--mono, monospace);font-size:12px;color:var(--ink-2, #4A443B);margin:8px 0 0;
}

@media (max-width:640px){
  .kqlb{padding:20px 18px 18px}
  .kqlb-input{font-size:13px}
}