/* Increment the version in config/assets.php whenever this immutable file changes. */
:root {
  --surface-raised: var(--bg-secondary);
  --surface-muted: var(--bg-gray);
  --text-muted: var(--text-secondary);
  --focus-ring: 0 0 0 3px rgba(50, 115, 246, .28);
  --card-radius: 18px;
}

html[dir="rtl"] body { direction: rtl; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 18px;
}

.tool-card,
.tool-placeholder,
.location-data-pending,
.datacenter__block--availability {
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: var(--card-radius);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .12);
}

.tool-card { display: flex; flex-direction: column; padding: 22px; min-height: 190px; }
.tool-card h3 { margin: 0 0 10px; }
.tool-card p { color: var(--text-muted); flex: 1; }
.tool-card .btn { align-self: flex-start; }
.tool-placeholder { padding: clamp(24px, 5vw, 54px); text-align: center; }
.tool-placeholder__icon { color: var(--color-primary); font-size: 54px; }
.tool-placeholder__status { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: var(--surface-muted); color: var(--text-muted); font-weight: 600; }
.tool-placeholder .btn[disabled] { cursor: not-allowed; opacity: .58; }
.tools-category { margin-top: 42px; }
.tools-category h2 { margin-bottom: 18px; }
.location-data-pending { padding: 28px; width: 100%; }
.datacenter__block--availability { padding: 28px; }

@media (max-width: 680px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 0; }
}