/*
  theme-picker.css — the swatch-card grid inside the "Choose a theme"
  modal (js/theme_picker.js). Cards reuse the active theme's own
  --bg-card/--border/--radius so the picker itself re-skins live, but
  the little swatch preview inside each card is deliberately NOT
  theme-variable-driven (fixed radius, inline colors from each
  theme's own registry entry) — it has to look the same regardless of
  which theme is currently active, since it's a preview of a
  *different* theme's palette.
*/

.theme-picker-search {
  /* .search-bar's own base rule caps at 440px (tuned for the narrower
     subject-search layout it was built for) — that reads as an odd
     stray gap now that this modal can stretch to 900px wide. */
  max-width: none;
  margin-bottom: 0.9rem;
}

.theme-picker-grid {
  display: grid;
  /* Fills as many ~200px columns as the modal (now .modal-lg on desktop
     — see css/modal.css) actually has room for, instead of a flat 2,
     so a wide viewport shows more of the 14-theme grid without scrolling. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem;
}

@media (max-width: 480px) {
  .theme-picker-grid {
    grid-template-columns: 1fr;
  }
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--bg-card2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color var(--transition), transform var(--transition);
}
.theme-card:hover {
  border-color: var(--accent);
}
.theme-card.selected {
  border-color: var(--accent);
  border-width: 2px;
}
.theme-card:active {
  transform: scale(0.98);
}

.theme-card-swatch {
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.theme-card-swatch-card {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 60%;
  height: 22px;
  border-radius: 3px;
}

.theme-card-swatch-accent {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.theme-card-swatch-text {
  position: absolute;
  bottom: 11px;
  left: 11px;
  width: 30%;
  height: 4px;
  border-radius: 2px;
}

.theme-card-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

.theme-card-check {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}
.theme-card-check svg {
  width: 100%;
  height: 100%;
}

.theme-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  /* Clamp to 2 lines regardless of description length, so every card
     in the grid is the same height (descriptions otherwise wrap to
     2-3 lines depending on wording, making the grid look uneven). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}