:root {
  --card-radius: 10px;
  --check-indent: 1.4rem;
}

.brand { text-decoration: none; }

.muted { color: var(--pico-muted-color); }
.small { font-size: 0.85em; }

/* Index: lista kart */
.item-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.item-card {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--card-radius);
  padding: 1rem;
  transition: border-color 120ms, transform 120ms;
}
.item-card:hover { border-color: var(--pico-primary); transform: translateY(-1px); }
.item-card a { text-decoration: none; color: inherit; }
.item-card h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.item-card p { margin: 0.3rem 0; }
.item-card.do-sprobowania { border-left: 3px solid var(--pico-primary); }

/* Meta / badges */
.meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--pico-muted-border-color);
  color: var(--pico-contrast-inverse);
  white-space: nowrap;
}
.badge-recipe { background: #d3e6c7; color: #2b4a1a; }
.badge-article { background: #cfe2f3; color: #274562; }
.badge.muted { background: transparent; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); }
.badge.todo { background: #ffeedd; color: #7a3e00; }

/* Tagi */
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag, .tag-chip {
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  white-space: nowrap;
}
.tag-chip {
  background: transparent;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  margin: 0;
}
.tag-chip-active {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  border-color: var(--pico-primary);
}
.tag-filter { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }

/* Doc body (renderowany przepis/artykuł) */
.doc-body h1 { margin-top: 1.8rem; font-size: 1.4rem; border-bottom: 1px solid var(--pico-muted-border-color); padding-bottom: 0.3rem; }
.doc-body h2 { margin-top: 1.3rem; font-size: 1.15rem; }
.doc-body h3 { margin-top: 1rem; font-size: 1rem; }

/* Listy: zachowaj wcięcie dla nagłębień */
.doc-body ul { padding-left: 1.4rem; }
.doc-body li[data-level="1"] { margin-left: 1.2rem; list-style: circle; }
.doc-body li[data-level="2"] { margin-left: 2.4rem; list-style: square; }

/* Checklist */
.doc-body ul.checklist {
  list-style: none;
  padding-left: 0;
}
.doc-body ul.checklist li {
  padding-left: calc(var(--check-indent) * (1 + var(--level, 0)));
  position: relative;
  line-height: 1.5;
  margin: 0.35rem 0;
}
.doc-body ul.checklist li[data-level="1"] { --level: 1; list-style: none; }
.doc-body ul.checklist li[data-level="2"] { --level: 2; list-style: none; }
.doc-body ul.checklist li input[type="checkbox"] {
  position: absolute;
  left: calc(var(--check-indent) * var(--level, 0));
  top: 0.35em;
  margin: 0;
}
.doc-body ul.checklist li.checked > :not(input) { opacity: 0.45; text-decoration: line-through; }

/* Plain list (Docs "lista z wcięciem" bez markera) */
.doc-body ul.bare { list-style: none; padding-left: 0; }
.doc-body ul.bare li { padding-left: 0.6rem; }

.link-list { padding-left: 1.2rem; }

.lead { font-size: 1.1rem; color: var(--pico-muted-color); }