body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body.font-atkinson .list-details {
  font-family: "Atkinson Hyperlegible", sans-serif;
}


section {
  margin: 0;
  padding: 0;
}

h3 {
  margin: 0;
}

/* Base list group styling */
.list-group {
  margin: 1rem 0;
  padding: 0;
  border-radius: 10px; /* top and bottom rounded */
  overflow: hidden;    /* clip header and last card for smooth rounding */
  background: rgba(255,255,255,0.6); /* unified background for the whole list */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Header inside the list group */
.list-group-header {
  padding: 0.8rem 1rem;      /* space around header text */
  background: rgba(195, 216, 255, 0.95); /* subtle distinct color */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 1;
  position: relative;        /* so it sits above content if needed */
}

/* Header text */
.list-group-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #40484d;
}

/* Optional: separate list cards from header with tiny gap (top bevel effect) */
.list-preview:first-of-type {
  margin-top: -2px; /* slightly overlap the header for that “beveled” feel */
}


/* Plus button */
.expand-toggle {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.list-card.expanded .expand-toggle {
  transform: rotate(45deg);
}

.list-card.expanded {
  grid-template-areas:
    "header"
    "details"
    "meta";
}

/* Header row */
.list-header {
  grid-area: header;
  padding: 0.75rem 0.75rem 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;

  background: rgba(255, 255, 255, 0.55);
  color: #647a8b; /* your chosen tone */
  font-family: system-ui, sans-serif;
  border-bottom: 1px solid rgba(0,0,0,0.05);

  margin-top: 2px;
  margin-bottom: 0;
}

.list-header img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}


.list-header h3 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;

  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;

}


.list-details {
  grid-area: details;
  display: block;
  
  background: rgba(255, 255, 255, 0.45);
  color: #44516b;
  font-size: 0.8rem;
  
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0 0 0.75rem 0.75rem; /*border-radius: 0; */
  margin-top: 0;
  padding: 0 0.75rem; /* padding-top: 0; */
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;

  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.55;

  /* Polish */
  transform: translateY(-6px);
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.list-details > *:first-child {
  margin-top: 0.5rem;
}


.list-details ul {
  padding-left: 1.1rem;
  font-size: 0.75rem;
}

.list-details li {
  margin-bottom: 0.25rem;
}


/* Meta chips */
.list-meta {
  grid-area: meta;
  background: rgba(255, 255, 255, 0.35);
  color: #a8b4c7eb;
  /* padding: 0.4rem 0.6rem; */
  border-radius: 0.5rem; /* border-radius: 0 0 0.75rem 0.75rem;*/
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;

  margin-top: 0.25rem;

  position: relative;
  z-index: 2;

  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  opacity: 0.85;
}

.list-meta .chip {
  background: rgba(176, 206, 249, 0.08);
  color: #1d293deb;
}


.list-card.expanded .list-meta {
  border-radius: 0; /*border-radius: 0 0 0.75rem 0.75rem; */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.chip {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
}

.list-card:not(.expanded) .list-details {
  opacity: 0;
}


.list-card.expanded .list-details {
  transform: translateY(0);
  max-height: 1000px;
  border-radius: 0 0 0 0; /* border-radius: 0; */
  padding: 0.6rem 0.75rem 0.75rem;
  opacity: 1;
}

/* Card container */
.list-card {
  display: grid;
  grid-template-areas:
    "header"
    "meta"
    "details";
  /* background: var(--panel-bg);
  color: #8ba1c2;*/
  background: transparent;
  color: inherit;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  /* margin-bottom: 0.4rem;  control spacing here */
  cursor: pointer;
  /*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);*/
  border-radius: var(--card-radius, 10px);
  box-shadow: var(--card-shadow, 0 6px 18px rgba(0,0,0,0.08));
}


:root {
  --panel-bg: rgba(255, 255, 255, 0.6);
  --panel-border: rgba(0, 0, 0, 0.08);
}

.list-meta,
.list-details {
  margin: 0;
}

.creator-rating {
  margin-left: auto;
  opacity: 0.4;
  font-size: 0.9rem;
  pointer-events: none;
}

.sort-chip {
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem;
  background: #f1f1f1;
  font-size: 0.85rem;
  cursor: pointer;
}

.sort-chip.active {
  background: #dfefff;
}

.sort-chip.inactive {
  opacity: 0.5;
}



/* --- Demo controls --- */
.demo-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1.25rem;
}

.toggle {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
  color: #40484d;
  background: rgba(255,255,255,0.45);
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
}

/* --- Group header layout enhancements --- */
.list-group-header {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}

.group-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.group-subtitle {
  font-size: 0.85rem;
  opacity: 0.8;
  color: #40484d;
}

/* --- Fake sorting UI --- */
.sort-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.sort-chip {
  border: 0;
  background: rgba(255,255,255,0.55);
  color: #40484d;
}

.sort-chip:focus-visible {
  outline: 2px solid rgba(64, 72, 77, 0.35);
  outline-offset: 2px;
}

/* --- Like button --- */
.like-btn {
  background: rgba(255,255,255,0.35);
  border: 0;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.2;
  opacity: 0.9;
}

.like-btn.liked {
  background: rgba(195, 216, 255, 0.95);
}

.like-btn .like-count {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-left: 0.25rem;
}

/* --- Rating styles --- */
.rating-stars {
  letter-spacing: 0.06em;
  opacity: 0.55; /* keep “quiet” */
}

.rating-numeric {
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

.rating-fire {
  opacity: 0.55;
}

/* --- Sticky header: only when enabled --- */
/* Use a CSS variable so you can match your nav height without hardcoding */
:root {
  --nav-offset: 64px; /* adjust if your header is taller/shorter */
}

/* We'll apply this class in JS when sticky is enabled */
.list-group-header.is-sticky {
  position: sticky;
  top: var(--nav-offset);
  z-index: 5;
  /* Optional: helps readability when overlapping cards */
  backdrop-filter: blur(2px);
}

/* If public likes are disabled, hide like buttons cleanly */
body.likes-off .like-btn {
  display: none !important;
}

/* If a list header contains a public like button, demote the expand toggle */
.list-header:has(.like-btn) .expand-toggle {
  opacity: 0.45;
  transform: scale(0.9);
}

.list-header:has(.like-btn) .expand-toggle:hover {
  opacity: 0.75;
}

.list-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255,255,255,0.45);
  border: 0;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.9;
}

.list-like-btn.liked {
  background: rgba(195, 216, 255, 0.95);
}

.list-like-btn .like-count {
  font-size: 0.75rem;
  opacity: 0.8;
}

.list-like-summary {
  font-size: 0.75rem;
  opacity: 0.6;
  padding: 0.25rem 1rem 0;
}