/* Layout constraints */
.container { max-width: 1200px; }
.site-header { margin-top: 1rem; margin-bottom: 1rem; }
.content-wrap { margin: 0 auto; }
.small-text { font-size: 0.95rem; }

/* Visually hidden input for a11y */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Grid */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Label-based tiles */
.tiles-grid .tile {
  display: block;
  width: 100%;
  padding: 1rem;
  border: 1px solid #cfd8dc;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #1f2d3d;
  text-align: left;
  min-height: 120px;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
}

.tiles-grid input[type="radio"]:focus + .tile,
.tiles-grid .tile:hover { border-color: #0d6efd; background: #f6f8fa; }

.tiles-grid input[type="radio"]:checked + .tile { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,.15); }

.nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.nav-row > :first-child { justify-self: start; }
.nav-row > :nth-child(2) { justify-self: center; }
.nav-row > :nth-child(3) { justify-self: end; }

/* AI result styling */
.ai-result {
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  padding: 1rem;
  color: #25303b;
  background: #fafcff;
  margin-top: .5rem;
  min-height: 3rem;
}
.ai-result h2, .ai-result h3 { color: #1d2630; }

/* Spinner */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid #e1e7ef; border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block; margin-right: .5rem; vertical-align: middle;
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 768px) {
  .tiles-grid { grid-template-columns: 1fr; }
}

.flash.error { color: #842029; background: #f8d7da; padding: .5rem; border-radius: .25rem; }
