/**
 * Site 011 — Free Number Search
 * Phase 1: Interaction enhancement styles
 * search-puzzle archetype with aggregation navigation
 */

/* ════════════════════════════════════════════════
   PHASE 1 — NUMBER SEARCH INTERACTION ENHANCEMENTS
   ════════════════════════════════════════════════ */

/* ── Grid Cell Selection ──────────────────────── */
.ns-grid-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.ns-grid-cell:hover { background: rgba(3,102,214,0.08); }
.ns-grid-cell.is-selected {
  background: var(--site-primary, #0366d6);
  color: #fff;
  border-radius: 4px;
}
.ns-grid-cell.is-found {
  background: rgba(40,167,69,0.15);
  color: #166534;
  font-weight: 700;
}
.ns-grid-cell:focus-visible {
  outline: 2px solid var(--site-primary, #0366d6);
  outline-offset: 1px;
}

/* ── Target List ──────────────────────────────── */
.ns-target-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.ns-target {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #d1d5da;
  border-radius: 6px;
  background: #fff;
  color: #24292e;
  min-height: 44px;
  transition: opacity 0.2s, text-decoration 0.2s;
}
.ns-target.is-found {
  opacity: 0.5;
  text-decoration: line-through;
  border-color: #28a745;
  background: #f0fdf4;
}

/* ── Settlement Card ──────────────────────────── */
.ns-settlement {
  padding: 1.25rem;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  text-align: center;
  margin-top: 1.5rem;
}
.ns-settlement__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #24292e;
  margin-bottom: 0.75rem;
}
.ns-settlement__stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.ns-settlement__stat {
  text-align: center;
}
.ns-settlement__stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--site-primary, #0366d6);
}
.ns-settlement__stat-label {
  font-size: 0.75rem;
  color: #586069;
}
.ns-settlement__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* ── Recent / Favorites Panel ─────────────────── */
.ns-recents {
  padding: 0.75rem;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.ns-recents__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #24292e;
  margin-bottom: 0.5rem;
}
.ns-recents__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ns-recents__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  border: 1px solid #d1d5da;
  border-radius: 6px;
  background: #fff;
  color: #24292e;
  cursor: pointer;
  min-height: 44px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.ns-recents__item:hover { border-color: var(--site-primary, #0366d6); }

/* ── Recommendation Engine ────────────────────── */
.ns-recommend {
  padding: 0.75rem;
  background: linear-gradient(135deg, #f0f7ff, #f6f8fa);
  border: 1px solid #c8e1ff;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.ns-recommend__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--site-primary, #0366d6);
  margin-bottom: 0.5rem;
}
.ns-recommend__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}
.ns-recommend__card {
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ns-recommend__card:hover {
  border-color: var(--site-primary, #0366d6);
  box-shadow: 0 2px 8px rgba(3,102,214,0.1);
}

/* ── Heatmap (Activity Distribution) ──────────── */
.ns-heatmap {
  padding: 0.75rem;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.ns-heatmap__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #24292e;
  margin-bottom: 0.5rem;
}
.ns-heatmap__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.ns-heatmap__cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: #ebedf0;
}
.ns-heatmap__cell--l1 { background: #9be9a8; }
.ns-heatmap__cell--l2 { background: #40c463; }
.ns-heatmap__cell--l3 { background: #30a14e; }
.ns-heatmap__cell--l4 { background: #216e39; }

/* ── Phase 1 Print Suppression ────────────────── */
@media print {
  .ns-settlement,
  .ns-recents,
  .ns-recommend,
  .ns-heatmap { display: none !important; }
}