/* Styles for card types tiles */
.group-block { margin-bottom:1rem; }
.group-title { margin:0 0 0.5rem 0; font-size:1.05rem; color:var(--mud-palette-text); }
.tiles-grid { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:flex-start; }
.tile-card { flex: 0 0 260px; max-width: 100%; border-radius:10px; padding:0.6rem; background:var(--mud-palette-surface); box-shadow:var(--mud-elevation-1); display:flex; flex-direction:column; gap:0.35rem; }
.black .tile-card,
body.black .tile-card {
  /* In Black theme, tiles should contrast the page: white background with black text */
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

.black .tile-title, body.black .tile-title {
  color: #000000 !important;
}
.tile-header { display:flex; gap:0.5rem; align-items:center; }
.tile-title { font-weight:700; font-size:0.98rem; color:var(--mud-palette-text); }
.tile-body { font-size:0.85rem; color:var(--mud-palette-text); display:flex; flex-direction:column; gap:0.25rem; }
.tile-meta { font-size:0.82rem; opacity:0.9; color:var(--mud-palette-text-secondary); }
.tile-keywords { font-size:0.78rem; color:var(--mud-palette-text-secondary); }
.tile-footer { margin-top:0.25rem; }
.emoji { margin-left:6px; }
.line { display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
.separator { opacity:0.6; }
.cardtype-selected { font-weight:600; }

/* Toolbar for card types page */
.cardtype-toolbar {
  display:flex;
  gap:0.75rem;
  align-items:center;
  margin-bottom:0.75rem;
}

/* Icon sizing for tile icons; color may be set per-card via dynamic attribute if required */
.tile-icon {
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 800px) {
  .tile-card { width:100%; }
}