/* static/prep_list.css
   The prep list (prep_list.py): the banner under the header, the list
   modal, the pin button on a locked recipe card and the pinned mark on the
   Recipes tab. Loaded on every page from base.html. */

/* ---------------- Banner ----------------
   Same strip as the guest banner, in kitchen brown; green when the dish is
   complete. A button, so the whole strip opens the list. */
.prep-banner {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-bottom: 1px solid #e2d3bf;
  background: #f3ebdf;
  color: #6e5440;
  font: inherit;
  font-size: 0.875em;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.prep-banner:hover,
.prep-banner:focus-visible { background: #ede2d2; }
.prep-banner:focus-visible { outline: 2px solid #b08d6e; outline-offset: -2px; }
.prep-banner-name { font-weight: 600; }
.prep-banner-sep { margin: 0 0.2rem; opacity: 0.6; }
.prep-banner-ticks { letter-spacing: 0.05em; margin-right: 0.15rem; }

.prep-banner.is-complete {
  background: #e4eed6;
  border-bottom-color: #cadcb2;
  color: #46622b;
}
.prep-banner.is-complete:hover,
.prep-banner.is-complete:focus-visible { background: #dbe8ca; }

/* Once a day: a soft sweep of light, and the ticks settle in */
.prep-banner.is-celebrating {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: prep-sweep 1.4s ease-out 0.4s 1 both;
}
.prep-banner.is-celebrating .prep-banner-ticks {
  display: inline-block;
  animation: prep-pop 0.6s ease-out 0.3s 1 both;
}
@keyframes prep-sweep {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
@keyframes prep-pop {
  0%   { transform: scale(0.6); opacity: 0.2; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------------- The list ---------------- */
.prep-lines {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
}
.prep-line {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--color-border-light, #e6dccf);
  font-size: 0.9rem;
}
.prep-line:last-child { border-bottom: 0; }
.prep-line-label { min-width: 0; font-weight: 600; }
.prep-line-found {
  display: block;
  font-size: 0.72rem;
  font-weight: normal;
  color: var(--color-text-muted, #8a7564);
}
.prep-line-leader {
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted var(--color-border-medium, #d4c4b0);
  transform: translateY(-0.25rem);
}
.prep-line.is-hidden .prep-line-label {
  font-weight: normal;
  letter-spacing: 0.25em;
  color: var(--color-text-subtle, #b3a292);
}
.prep-pips { display: inline-flex; gap: 0.25rem; flex: none; align-self: center; }
.prep-pip {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-medium, #d4c4b0);
  background: var(--color-bg-white, #fff);
  position: relative;
}
.prep-pip.is-filled {
  border-color: var(--color-state-success, #6f8a3c);
  background: var(--color-state-success, #6f8a3c);
}
.prep-pip.is-filled::after {
  content: '✔';
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 0.6rem;
  line-height: 0.85rem;
  text-align: center;
}
.prep-line.is-done .prep-line-label { color: var(--color-state-success, #5b7431); }

.prep-note { margin: 0.75rem 0 0; text-align: center; }

.prep-hint { margin-top: 0.7rem; text-align: center; }
.prep-hint-btn {
  border: 0;
  background: none;
  padding: 0.2rem 0.4rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: #8a6446;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.prep-hint-text {
  margin: 0.35rem 0 0;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.45;
}

.prep-actions {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border-light, #e6dccf);
  text-align: center;
}
.prep-unpin-btn {
  border: 1px solid var(--color-border-medium, #d4c4b0);
  border-radius: 999px;
  background: transparent;
  padding: 0.25rem 1rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--color-text-muted, #8a7564);
  cursor: pointer;
}
.prep-unpin-btn:hover { background: var(--color-bg-white, #fff); }

/* ---------------- Recipe card: pin button ---------------- */
.prep-pin-area { margin-top: 0.9rem; text-align: center; }
.prep-pin-btn {
  border: 1px solid #c9b29a;
  border-radius: 999px;
  background: #f3ebdf;
  color: #6e5440;
  padding: 0.35rem 1.1rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.prep-pin-btn:hover { background: #ede2d2; }
.prep-pin-btn.is-pinned { background: #6e5440; border-color: #6e5440; color: #fff; }
.prep-pin-btn:disabled { opacity: 0.6; cursor: default; }
.prep-pin-note {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--color-text-subtle, #a08f80);
}

/* ---------------- Recipes tab: the pin on each locked row ----------------
   The row is a div holding two buttons: the pin, and the rest of the row
   (opens the card). The row keeps its look from styles.css; the padding
   moves onto the buttons so the whole row is still one big target. */
.recipe-row.has-pin { padding: 0; gap: 0; }
.recipe-pin-toggle {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 0.15rem 0 0.75rem;
  border: 0;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.recipe-pin-toggle span {
  display: inline-block;
  filter: grayscale(1);
  opacity: 0.3;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.recipe-pin-toggle:hover span,
.recipe-pin-toggle:focus-visible span { opacity: 0.65; }
.recipe-row.is-pinned .recipe-pin-toggle span { filter: none; opacity: 1; }
.recipe-pin-toggle:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -2px; border-radius: 6px; }
.recipe-pin-toggle:disabled { cursor: default; }
.recipe-pin-toggle.is-popping span { animation: prep-pin-pop 0.35s ease-out; }
@keyframes prep-pin-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35) rotate(-12deg); }
  100% { transform: scale(1); }
}
.recipe-row-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem 0.55rem 0.45rem;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}
.recipe-row-open:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -2px; }
.recipe-row.is-pinned .recipe-title { color: var(--color-text-default); }

@media (prefers-reduced-motion: reduce) {
  .prep-banner.is-celebrating,
  .prep-banner.is-celebrating .prep-banner-ticks,
  .recipe-pin-toggle.is-popping span { animation: none; }
}