/*
 * directory.css - the app's recipe directory, worn by static pages.
 *
 * This is a faithful port of the app catalog's look: RecipeCard.js (left
 * cuisine rail, 16px bold name, two-line 12px description, 12px meta row),
 * RecipeTreeView.js (radius-16 accordion groups, primary count badge,
 * rotating chevron), RecipeFilterDrawer.js (bottom sheet, chip groups), and
 * the Default theme's tokens from ThemeContext.js. Change those and this file
 * together - the numbers below are THEIRS, not free choices:
 *
 *   primary #FF6B6B  primaryLight #FFD1D1  background #FFF8EE  card #FFFFFF
 *   text #333333  textSecondary #666666  border #F0F0F0  accent #2A9D8F
 *   onPrimary #3B1010
 *
 * Cuisine rail colors are NOT here: they are generated into
 * /directory-palette.css from the app's tagColors.js by
 * scripts/generate-recipe-pages.mjs, so the palette cannot drift.
 * Used by: /recipes/ index + hubs (generated) and /kitchen/{slug}/ (the
 * creatorPages function). Everything is scoped under .tcd or .tcd-sheet.
 */

.tcd {
  --tcd-primary: #ff6b6b;
  --tcd-primary-light: #ffd1d1;
  --tcd-bg: #fff8ee;
  --tcd-card: #ffffff;
  --tcd-text: #333333;
  --tcd-text2: #666666;
  --tcd-border: #f0f0f0;
  --tcd-accent: #2a9d8f;
  --tcd-on-primary: #3b1010;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--tcd-text);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.35;
}
.tcd * { box-sizing: border-box; }

/* ---- toolbar (SearchBar + group-by row + funnel, app RecipesScreen) ---- */
.tcd-toolbar[hidden] { display: none; }
.tcd-toolbar { margin: 0 0 12px; }
.tcd-searchrow { position: relative; margin-bottom: 12px; }
.tcd-search {
  width: 100%;
  height: 48px;
  border: 1px solid var(--tcd-border);
  border-radius: 12px;
  background: var(--tcd-card);
  padding: 0 16px 0 42px;
  font: inherit;
  font-size: 15px;
  color: var(--tcd-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.tcd-search:focus { outline: 2px solid var(--tcd-primary); outline-offset: -1px; }
.tcd-search-ic {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tcd-text2);
  pointer-events: none;
}
.tcd-controls { display: flex; align-items: center; gap: 8px; }
.tcd-groupby {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  padding: 2px;
  scrollbar-width: none;
}
.tcd-groupby::-webkit-scrollbar { display: none; }
/* Desktop-only manual scroll for the pill row: the scrollbar is hidden and a
   mouse has no horizontal swipe, so pointer-fine devices get arrow buttons.
   JS adds .tcd-scroll-on only while the row actually overflows. */
.tcd-scroll {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 34px;
  border: 1px solid var(--tcd-border);
  background: var(--tcd-card);
  color: var(--tcd-text2);
  border-radius: 17px;
  padding: 0 0 2px;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tcd-scroll[disabled] { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .tcd-scroll.tcd-scroll-on { display: inline-flex; }
}
.tcd-pill {
  flex: none;
  border: 1px solid var(--tcd-border);
  background: var(--tcd-card);
  color: var(--tcd-text2);
  border-radius: 20px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tcd-pill[aria-pressed='true'] {
  background: var(--tcd-primary);
  border-color: var(--tcd-primary);
  color: var(--tcd-on-primary);
}
.tcd-funnel {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--tcd-border);
  background: var(--tcd-card);
  color: var(--tcd-text2);
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tcd-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--tcd-primary);
  color: var(--tcd-on-primary);
  border-radius: 12px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.tcd-badge[hidden] { display: none; }
.tcd-sort {
  flex: none;
  height: 40px;
  border: 1px solid var(--tcd-border);
  background: var(--tcd-card);
  color: var(--tcd-text2);
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px;
  cursor: pointer;
}
.tcd-status { font-size: 13px; color: var(--tcd-text2); margin: 8px 2px; }

/* ---- accordion groups (RecipeTreeView) ---- */
.tcd-group {
  background: var(--tcd-card);
  border-radius: 16px;
  margin: 0 0 12px;
  padding: 0; /* the landing stylesheet pads sections; never inherit that */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.tcd-group-h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 0;
  border-left: 4px solid var(--tcd-primary);
  background: var(--tcd-card);
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: inherit;
  text-decoration: none;
}
.tcd-group.tcd-open .tcd-group-h { background: var(--tcd-primary-light); }
.tcd-group-name { font-size: 16px; font-weight: 700; color: var(--tcd-text); }
.tcd-group-right { display: flex; align-items: center; gap: 8px; }
.tcd-count {
  background: var(--tcd-primary);
  color: var(--tcd-bg);
  border-radius: 12px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.tcd-chev { color: var(--tcd-text2); transition: transform 0.15s ease; }
.tcd-open .tcd-chev { transform: rotate(90deg); }
.tcd-group-c { padding: 12px 12px 16px; }
.tcd-group:not(.tcd-open) .tcd-group-c { display: none; }

/* ---- the card (RecipeCard) ---- */
.tcd-card {
  position: relative;
  display: block;
  background: var(--tcd-card);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}
.tcd-card:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); }
.tcd-card[hidden] { display: none; }
.tcd-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tcd-accent); /* tagColors fallback = theme accent */
}
.tcd-body { display: block; padding: 16px 16px 20px; }
.tcd-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--tcd-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcd-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--tcd-text2);
  margin-bottom: 8px;
}
.tcd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12px;
  color: var(--tcd-text2);
}
.tcd-mi { display: inline-flex; align-items: center; gap: 4px; margin: 0 12px 4px 0; }
.tcd-mi svg { flex: none; }
.tcd-chip {
  /* TagChips.TextChip: no pill background, 12px/600, text color */
  display: inline-flex;
  align-items: center;
  margin: 0 10px 4px 0;
  padding: 2px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tcd-text);
}

/* ---- empty state (gotcha 11: say WHY it is empty) ---- */
.tcd-empty {
  background: var(--tcd-card);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--tcd-text2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.tcd-empty[hidden] { display: none; }
.tcd-reset {
  display: inline-block;
  margin-top: 10px;
  border: 0;
  background: var(--tcd-primary);
  color: var(--tcd-on-primary);
  border-radius: 20px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- filter drawer (RecipeFilterDrawer: phone-shaped bottom sheet) ---- */
.tcd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tcd-backdrop[hidden] { display: none; }
.tcd-sheet {
  width: 100%;
  max-width: 760px; /* app drawers are phone-shaped on desktop */
  max-height: 80vh;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 8px 16px 24px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #333333;
}
.tcd-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #cccccc;
  margin: 4px auto 12px;
}
.tcd-sheet-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tcd-sheet-h svg { color: #ff6b6b; }
.tcd-sheet-title { flex: 1; font-size: 16px; font-weight: 700; }
.tcd-sheet-reset {
  border: 0;
  background: none;
  color: #ff6b6b;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tcd-fgroup-t {
  font-size: 13px;
  font-weight: 700;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 8px;
}
.tcd-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.tcd-fchip {
  border: 1px solid #f0f0f0;
  background: #ffffff;
  color: #333333;
  border-radius: 16px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tcd-fchip[aria-pressed='true'] {
  background: #ff6b6b;
  border-color: #ff6b6b;
  color: #3b1010;
  font-weight: 600;
}
.tcd-sheet-done {
  display: block;
  width: 100%;
  margin-top: 18px;
  border: 0;
  background: #ff6b6b;
  color: #3b1010;
  border-radius: 12px;
  padding: 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* ---- index page: hub links restyled as app-like rows ---- */
.tcd-hublinks { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.tcd-hublink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--tcd-border);
  background: var(--tcd-card);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tcd-text);
  text-decoration: none;
}
.tcd-hublink:hover { border-color: var(--tcd-primary); }
.tcd-hublink .n { color: var(--tcd-text2); font-weight: 400; }