/* Demo-only chrome. Loaded after varchar.css so the product stylesheet stays
   byte-for-byte identical to what ships. Nothing here changes product behaviour;
   it only styles the demo's "Reset" affordance and keeps the busier demo top bar
   comfortable on small screens. */

/* The demo's wordmark links home. The product's varchar.css never resets anchor
   styling (its wordmark is a <div>), so neutralize the UA link color/underline
   here and keep it reading as the product wordmark. */
.wordmark { color: var(--ink); text-decoration: none; transition: opacity .15s ease; }
.wordmark:hover { color: var(--ink); opacity: .82; }
.wordmark .semi { color: var(--accent); }

.btn-reset .reset-glyph { font-family: var(--mono); font-size: 14px; line-height: 1; display: inline-block; }
.btn-reset .reset-label { line-height: 1; }

/* The product top bar carries 3 actions; the demo adds Reset. The bar already
   gets tight once the database context + connection status are still showing
   (they only hide at <=860 via the product's .hide-sm), so collapse the Reset
   label to its glyph from 1024px down — that's where the cluster first crowds —
   and keep every label on one line so nothing wraps. */
@media (max-width: 1024px) {
  .btn-reset .reset-label { display: none; }      /* glyph-only */
  .topbar .btn-reset { padding: 7px 8px; }         /* beat .topbar .btn specificity */
  .topbar { gap: 12px; }
  .topbar .btn, .conn, .chip { white-space: nowrap; }
}
@media (max-width: 560px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .btn { padding: 6px 8px; font-size: 12px; min-height: 32px; }  /* keep tap targets ~>=32px */
  .wordmark { font-size: 16px; }
}
@media (max-width: 380px) {
  .topbar .btn { padding: 6px 7px; font-size: 11.5px; min-height: 32px; }
}