/* KROY Instruments — additive enhancements only.
   Layout, grids, media queries and hover presets come from the design's own CSS,
   inlined per page. Nothing here overrides those. */
html { scroll-behavior: smooth; }
img { max-width: 100%; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #0057B8 !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 184, .12);
}

.kroy-tab { transition: color .15s ease, border-color .15s ease; user-select: none; }
.kroy-tab:hover { color: #0057B8 !important; }
.kroy-tab.is-active { color: #0057B8 !important; border-bottom: 3px solid #0057B8 !important; }
.kroy-tab:not(.is-active) { color: #8a91a0 !important; border-bottom: 3px solid transparent !important; }
.kroy-tabpane { animation: fadeUp .35s ease; }

.kroy-pill { transition: background .15s ease, color .15s ease, border-color .15s ease; user-select: none; }
.kroy-pill.is-active { background: #0057B8 !important; color: #fff !important; border-color: #0057B8 !important; }
.kroy-empty-note { padding: 60px 20px; text-align: center; color: #8a91a0; font-size: 15px; grid-column: 1 / -1; }

.kroy-thumb-active { border-color: #0057B8 !important; }
.kroy-thumb-img { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Fix: on phones a grid item's minimum content width kept its track from
   shrinking, pushing the page ~30px wider than the screen (a quirk in the
   original design too). min-width:0 lets tracks shrink; the design's own
   column definitions are left untouched. */
.kroy-head-grid, .kroy-overview-grid, .kroy-hero-grid { box-sizing: border-box; }
.kroy-head-grid > *, .kroy-overview-grid > *, .kroy-hero-grid > *,
.kroy-grid-3 > *, .kroy-grid-4 > *, .kroy-grid-6 > *, .kroy-footer-grid > * { min-width: 0; }