/* Dish cards: plate illustration <-> real photograph of the dish.
   Markup comes from DishPhotos::layers(). The photo layer is clipped by a
   line parallel to the card's top-left -> bottom-right diagonal; --c moves
   that line: -1.06 = photo hidden, 0 = split on the diagonal (photo top
   right, illustration bottom left), 1.06 = photo fills the card.
   The cycle animates --flip; hover/focus eases --hov to 1, which pulls --c
   to 0 from wherever the cycle is, so the split never jumps. */
@property --flip { syntax: '<number>'; inherits: true; initial-value: -1.06; }
@property --hov { syntax: '<number>'; inherits: true; initial-value: 0; }

.dish-flip {
  --c: calc(var(--flip) * (1 - var(--hov)));
  position: relative; isolation: isolate; overflow: hidden;
  transition: --hov .6s cubic-bezier(.22, 1, .36, 1);
}
.dish-flip-photo, .dish-flip-edge { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dish-flip-photo {
  z-index: 2;
  clip-path: polygon(
    calc(max(0, -1 * var(--c)) * 100%) 0,
    100% 0,
    100% calc(min(1, 1 + var(--c)) * 100%),
    calc((1 - max(0, var(--c))) * 100%) calc(min(1, 1 + var(--c)) * 100%),
    calc(max(0, -1 * var(--c)) * 100%) calc(max(0, var(--c)) * 100%)
  );
}
.dish-flip-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
/* A white band just outside the photo's edge: the moving seam, and the
   divider while split. Same polygon, nudged towards the illustration. */
.dish-flip-edge {
  --e: calc(var(--c) + .028);
  background: #fff;
  clip-path: polygon(
    calc(max(0, -1 * var(--e)) * 100%) 0,
    100% 0,
    100% calc(min(1, 1 + var(--e)) * 100%),
    calc((1 - max(0, var(--e))) * 100%) calc(min(1, 1 + var(--e)) * 100%),
    calc(max(0, -1 * var(--e)) * 100%) calc(max(0, var(--e)) * 100%)
  );
}

.dish-flip-tag {
  position: absolute; z-index: 3; padding: .16rem .55rem; border-radius: 999px;
  background: var(--ink-deep, #0f2327); color: #fff; font: 700 .7rem/1.4 var(--font-body);
  opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none; white-space: nowrap;
}
.dish-flip-tag--photo { top: .55rem; right: .55rem; }
.dish-flip-tag--art { bottom: .55rem; left: .55rem; background: #fff; color: var(--ink-deep, #0f2327); }

/* Hover / keyboard focus: split corner to corner. */
a:hover .dish-flip, a:focus-visible .dish-flip, .dish-flip:hover, .dish-flip.is-split { --hov: 1; }
a:hover .dish-flip .dish-flip-tag, a:focus-visible .dish-flip .dish-flip-tag, .dish-flip:hover .dish-flip-tag, .dish-flip.is-split .dish-flip-tag { opacity: 1; transform: none; transition-delay: .18s; }
/* The card's own hover zoom stays, minus the tilt: a rotated image would
   no longer line up with the diagonal. */
.rcp-card-link:hover .dish-flip img { transform: scale(1.04); }

/* Auto cycle: illustration ~4.6s, wipe, photo ~4.6s, wipe back. */
@media (prefers-reduced-motion: no-preference) {
  .dish-flip { animation: dish-flip-cycle 12s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--d, 0) * -1.7s - 2s); }
  .dish-flip.is-idle { animation-play-state: paused; }
}
@keyframes dish-flip-cycle {
  0%, 38% { --flip: -1.06; }
  50%, 88% { --flip: 1.06; }
  100% { --flip: -1.06; }
}
/* Reduced motion: no cycling; show both halves at rest instead. */
@media (prefers-reduced-motion: reduce) {
  .dish-flip { --flip: 0; transition: none; }
  .dish-flip-tag { transition: none; }
}

/* ------------------------------------------------------------------
   Week board (templates/partials/_week_board.php): this week's real plan
   as seven plates, then the combined shopping list. One-shot build
   animation under [data-play] (visuals.js arms it below the fold). */
.wk { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(14.5rem, 18.5rem); gap: 1rem; align-items: center; }
.wk-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.wk-day { min-width: 0; }
.wk-day-link {
  display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .45rem .45rem .6rem;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--text-primary); text-decoration: none;
  box-shadow: var(--lift); transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out);
}
.wk-day-link:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.wk-day-link:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.wk-day-name { font: 800 .76rem/1.2 var(--font-body); color: var(--f-deep, var(--teal-deep)); }
.wk-day-art { position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--f, var(--teal)); aspect-ratio: 500 / 368; }
.wk-day-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-day-title { font: 750 .88rem/1.15 var(--font-display); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wk-day-meta { margin-top: auto; font: 650 .72rem/1.3 var(--font-body); font-style: normal; color: var(--text-secondary); }
.wk-day--locked .wk-day-link { background: var(--bg-primary); }
.wk-day--locked .wk-day-art > img { filter: blur(3px) saturate(.55); transform: scale(1.12); }
.wk-day--locked .wk-day-title { color: var(--text-secondary); }
.wk-day--locked .wk-day-meta { color: var(--tomato-deep, #8f2a12); font-weight: 800; }
.wk-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.wk-lock svg { box-sizing: content-box; padding: .42rem; border-radius: 50%; background: var(--ink-deep); }
.wk-arrow { color: var(--ink-deep); }
.wk-receipt {
  --z: 7px;
  position: relative; padding: 1rem 1.1rem calc(1.1rem + var(--z)); background: #fff;
  border-radius: 6px 6px 0 0;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
}
.wk-receipt-wrap { filter: drop-shadow(0 1px 1px rgba(11, 27, 30, .14)) drop-shadow(0 12px 18px rgba(11, 27, 30, .16)); }
.wk-receipt-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; margin: 0 0 .55rem; padding-bottom: .55rem; border-bottom: 2px dashed var(--border-strong); }
.wk-receipt-head strong { font: 800 1.02rem var(--font-display); letter-spacing: -.01em; }
.wk-receipt-head span { font: 650 .76rem var(--font-body); color: var(--text-secondary); }
.wk-receipt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; }
.wk-receipt li { display: flex; align-items: baseline; gap: .5rem; font: 600 .84rem/1.35 var(--font-body); overflow-wrap: anywhere; }
.wk-box { position: relative; flex: none; width: .82rem; height: .82rem; border: 1.5px solid var(--ink-deep); border-radius: 3px; transform: translateY(.1rem); }
.wk-box::after { content: ""; position: absolute; left: .2rem; top: -.12rem; width: .28rem; height: .6rem; border: solid var(--leaf-deep, #1f5a26); border-width: 0 2.4px 2.4px 0; transform: rotate(40deg) scale(0); transform-origin: 50% 60%; }
.wk-receipt-more { margin: .6rem 0 0; font: 650 .76rem var(--font-body); color: var(--text-secondary); }

@media (max-width: 1060px) {
  .wk { grid-template-columns: 1fr; }
  .wk-arrow { justify-self: center; rotate: 90deg; }
  .wk-receipt-wrap, .wk-receipt { justify-self: center; width: min(100%, 26rem); }
}
@media (max-width: 760px) {
  .wk-days { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(7.4rem, 36%); overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem .2rem .7rem; margin-inline: -.2rem; scrollbar-width: thin; }
  .wk-day { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .wk.play-armed .wk-day, .wk.play-armed .wk-receipt-wrap, .wk.play-armed .wk-receipt li { opacity: 0; }
  .wk.is-playing .wk-day { animation: wk-drop .6s var(--ease-spring) both; animation-delay: calc(var(--i) * 110ms); }
  .wk.is-playing .wk-lock svg { animation: wk-pop .45s var(--ease-spring) both; animation-delay: calc(.85s + (var(--i) - 3) * 90ms); }
  .wk.is-playing .wk-arrow { animation: wk-nudge .9s var(--ease-out) both .85s; }
  .wk.is-playing .wk-receipt-wrap { animation: wk-print .75s var(--ease-out) both 1s; }
  .wk.is-playing .wk-receipt li { animation: wk-line .35s var(--ease-out) both; animation-delay: calc(1.3s + var(--j) * 120ms); }
  .wk.is-playing .wk-receipt li:nth-child(-n+3) .wk-box::after { animation: wk-tick .3s var(--ease-spring) forwards; animation-delay: calc(2.3s + var(--j) * 260ms); }
}
@keyframes wk-drop { from { opacity: 0; transform: translateY(-20px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wk-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes wk-nudge { 0% { opacity: 0; translate: -10px 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes wk-print { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes wk-line { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes wk-tick { to { transform: rotate(40deg) scale(1); } }

/* Chat allowance meter (home account band, Premium page): bar lengths are
   the real daily allowances relative to Premium's. */
.hm-meter { display: grid; gap: .8rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--lift-2); }
.hm-meter-row { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: baseline; }
.hm-meter-row span { font: 700 .92rem var(--font-body); }
.hm-meter-row b { justify-self: end; font: 800 1.5rem/1 var(--font-display); letter-spacing: -.02em; color: var(--f-deep); }
.hm-meter-row b small { font: 700 .78rem var(--font-body); color: var(--text-secondary); }
.hm-meter-row i { grid-column: 1 / -1; height: .7rem; border-radius: 999px; background: var(--f-soft); overflow: hidden; }
.hm-meter-row i::before { content: ""; display: block; height: 100%; width: max(.7rem, calc(var(--v) * 100%)); border-radius: inherit; background: var(--f); transform-origin: left; }
.hm-meter-note { margin: .2rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-secondary); }
@media (prefers-reduced-motion: no-preference) {
  .hm-meter.play-armed .hm-meter-row i::before { transform: scaleX(0); }
  .hm-meter.is-playing .hm-meter-row i::before { animation: hm-meter 1.1s var(--ease-out) both; animation-delay: calc(.15s + var(--m) * .25s); }
}
@keyframes hm-meter { from { transform: scaleX(0); } to { transform: none; } }