/* Shared UI controls — canonical chrome patterns for product pages.
 *
 * Sources (see docs/reports/PRODUCT_DESIGN_ANALYSIS_2026-07-31.md §三.5):
 *   .hbtn          — VEQ light-topbar button (products/veq-studio/web/veq.css)
 *   .velo-field    — form control baseline, 34-42px high, 1px --velo-line
 *                    border (veq.css compact-field + shared-account.css input)
 *   .empty-state   — dashed empty placeholder (products/fusion-hub/hub.css)
 *   :focus-visible — global focus ring (products/lawson/web/lawson.css),
 *                    coloured with --velo-accent so products keep identity.
 *
 * Products whose historical rules differ keep them as overrides: product
 * stylesheets load after this file, so equal-specificity product rules win,
 * and more specific product rules (e.g. `.hbtn:focus-visible`) always win.
 */

/* ---- topbar button (VEQ light-topbar baseline) ---- */
.hbtn {
  padding: 5px 10px;
  border: 1px solid var(--velo-line, #dce3ea);
  border-radius: 8px;
  background: #fff;
  color: var(--velo-ink, #14233a);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.hbtn:hover { border-color: var(--velo-accent, #1f65d6); color: var(--velo-accent, #1f65d6); }

/* ---- form controls (opt-in via .velo-field on the label wrapper) ----
   39px default height sits between the 34px compact rows (VEQ input grid)
   and the 42px account-dialog fields; .velo-field--compact pins 34px. */
.velo-field input,
.velo-field select {
  width: 100%;
  height: 39px;
  padding: 0 10px;
  border: 1px solid var(--velo-line, #dce3ea);
  border-radius: 9px;
  background: #fff;
  color: var(--velo-ink, #14233a);
  font: inherit;
  font-size: 13px;
}
.velo-field--compact input,
.velo-field--compact select { height: 34px; }
.velo-field input:focus,
.velo-field select:focus {
  border-color: var(--velo-accent, #1f65d6);
  outline: 3px solid rgba(31, 101, 214, .1);
}

/* ---- empty state (Hub dashed-box baseline) ---- */
.empty-state {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  border: 1px dashed var(--velo-line, #dce3ea);
  border-radius: 12px;
  color: var(--velo-muted, #68768a);
  text-align: center;
}

/* ---- global focus ring (Lawson baseline, accent-coloured) ---- */
:focus-visible {
  outline: 3px solid var(--velo-accent, #1f65d6);
  outline-offset: 3px;
}