/* Result-level popups for the running example (directives/running-example/
   result-popups.md).  Chips sit in result headings; panels are inset cards in
   the sidebar's visual language.  Reuses the gqx- custom properties and the
   global gqx-chk / gqx-mono / gqx-dimtxt classes from example-sidebar.css,
   which always loads on the same page. */

.gqxp-chip {
  display: inline-block; vertical-align: middle; margin-left: .6em;
  padding: 1px 9px; border: 1px solid var(--gqx-tintline); border-radius: 999px;
  background: var(--gqx-tint); color: var(--gqx-accent);
  font: 600 11px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: .05em; cursor: pointer; white-space: nowrap;
}
.gqxp-chip:hover { border-color: var(--gqx-accent); }
.gqxp-chip[aria-expanded="true"] { background: var(--gqx-accent); color: var(--gqx-accent-ink); border-color: var(--gqx-accent); }
.gqxp-chip:focus-visible { outline: 2px solid var(--gqx-focus); }
summary .gqxp-chip { margin-right: .4em; }

.gqxp-panel {
  background: var(--gqx-tint); border: 1px solid var(--gqx-tintline); border-radius: 8px;
  padding: 10px 14px 12px; margin: 10px 0 14px;
  font: 13px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--gqx-ink);
}
.gqxp-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.gqxp-head .gqxp-title { font-size: 10.5px; letter-spacing: .08em; color: var(--gqx-accent); font-weight: 700; }
.gqxp-head button {
  margin-left: auto; border: 1px solid var(--gqx-tintline); background: transparent; color: var(--gqx-muted);
  border-radius: 6px; padding: 0 7px; cursor: pointer; font-size: 12px; line-height: 1.5;
}
.gqxp-body p { margin: 0 0 7px; }
.gqxp-body p:last-child { margin-bottom: 0; }
.gqxp-body .gqx-chk { margin-right: 4px; }
.gqxp-num { font-variant-numeric: tabular-nums; }
.gqxp-num b { color: var(--gqx-accent); }

.gqxp-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gqxp-btn {
  border: 1px solid var(--gqx-accent); border-radius: 999px; background: transparent; color: var(--gqx-accent);
  padding: 1px 10px; cursor: pointer; font-size: 11.5px; font-weight: 600;
}
.gqxp-btn:hover { background: var(--gqx-accent); color: var(--gqx-accent-ink); }
.gqxp-btn:focus-visible { outline: 2px solid var(--gqx-focus); }

table.gqxp-table { border-collapse: collapse; margin: 6px 0 2px; font-size: 12.5px; }
table.gqxp-table td, table.gqxp-table th {
  padding: 2px 12px 2px 0; text-align: left; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--gqx-tintline);
}
table.gqxp-table th { font-size: 10.5px; letter-spacing: .06em; color: var(--gqx-muted); font-weight: 600; }
table.gqxp-table tr:last-child td { border-bottom: 0; }