/* Today's prices: the stall's fluorescent price cards (cartulinas). Screen prefix py-pri-. */
.py-screen.py-pri {
  --py-cart-amarilla: light-dark(oklch(0.945 0.15 105), oklch(0.84 0.13 105));
  --py-cart-naranja:  light-dark(oklch(0.865 0.135 62), oklch(0.78 0.12 62));
  --py-cart-verde:    light-dark(oklch(0.905 0.155 135), oklch(0.80 0.13 135));
  --py-cart-rosa:     light-dark(oklch(0.875 0.10 352), oklch(0.79 0.09 352));
  --py-marker:        oklch(0.22 0.025 262);
  --py-marker-red:    oklch(0.48 0.19 25);
}
.py-screen.py-pri .py-pri-status { display: inline-flex; align-items: center; gap: var(--py-2); font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-pri .py-pri-status b { color: var(--py-ink); }
.py-screen.py-pri .py-pri-lead { color: var(--py-ink-soft); max-width: 62ch; }
.py-screen.py-pri .py-pri-lead kbd { margin-inline: 0.15em; }

.py-screen.py-pri .py-pri-group { display: grid; gap: var(--py-3); }
.py-screen.py-pri .py-pri-group h2 { font-family: var(--py-f-display); font-stretch: 105%; font-weight: 750; font-size: var(--py-s-1); display: flex; align-items: baseline; gap: var(--py-3); }
.py-screen.py-pri .py-pri-group h2 span { font-family: var(--py-f-ui); font-stretch: 100%; font-weight: 500; font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-pri .py-pri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: var(--py-4); list-style: none; margin: 0; padding: 0; }

.py-screen.py-pri .py-cart {
  --py-cart: var(--py-cart-amarilla);
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--py-1);
  min-height: 11.5rem; padding: var(--py-3) var(--py-4) var(--py-3);
  background: var(--py-cart); color: var(--py-marker);
  border-radius: 2px;
  box-shadow: 0 1px 0 oklch(0.2 0.03 262 / 0.18), 0 14px 22px -18px oklch(0.2 0.04 262 / 0.55);
  rotate: var(--py-tilt, 0deg);
  transition: rotate 160ms ease, translate 160ms ease;
}
.py-screen.py-pri .py-cart:nth-child(4n+2) { --py-cart: var(--py-cart-naranja); --py-tilt: 0.6deg; }
.py-screen.py-pri .py-cart:nth-child(4n+3) { --py-cart: var(--py-cart-verde); --py-tilt: -0.5deg; }
.py-screen.py-pri .py-cart:nth-child(4n+4) { --py-cart: var(--py-cart-rosa); --py-tilt: 0.4deg; }
.py-screen.py-pri .py-cart:nth-child(4n+1) { --py-tilt: -0.7deg; }
.py-screen.py-pri .py-cart:focus-within { rotate: 0deg; translate: 0 -3px; outline: 3px solid var(--py-marker); outline-offset: 3px; }
.py-screen.py-pri .py-cart::before { /* the tape that holds the card */
  content: ""; position: absolute; top: -0.45rem; left: 50%; translate: -50% 0; width: 3.2rem; height: 0.9rem;
  background: oklch(0.97 0.01 90 / 0.65); border: 1px solid oklch(0.85 0.01 90 / 0.6); rotate: -2deg;
}
.py-screen.py-pri .py-cart-name { --py-casl: 1; font-weight: 820; font-size: var(--py-s-1); line-height: 1.1; }
.py-screen.py-pri .py-cart-name small { display: block; font-weight: 600; font-size: var(--py-s--1); }
.py-screen.py-pri .py-cart-price { display: flex; align-items: baseline; gap: 0.1em; align-self: center; }
.py-screen.py-pri .py-cart-price span { --py-casl: 1; font-weight: 900; font-size: var(--py-s-3); }
.py-screen.py-pri .py-cart-input {
  --py-casl: 1;
  inline-size: 100%; min-width: 0; border: 0; background: transparent; padding: 0;
  font-weight: 950; font-size: var(--py-s-6); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--py-marker);
  field-sizing: content; max-inline-size: 100%;
}
.py-screen.py-pri .py-cart-input:focus-visible { outline: none; }
.py-screen.py-pri .py-cart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--py-1) var(--py-2); font-size: var(--py-s--1); font-weight: 600; }
.py-screen.py-pri .py-cart-old { text-decoration: line-through 2.5px var(--py-marker-red); }
.py-screen.py-pri .py-cart-delta { display: inline-flex; gap: 0.25em; align-items: baseline; }
.py-screen.py-pri .py-cart-up { color: var(--py-marker-red); }
.py-screen.py-pri .py-cart-saved { display: inline-flex; align-items: center; gap: 0.25em; }

.py-screen.py-pri .py-cart--changed .py-cart-input { color: var(--py-marker); }
.py-screen.py-pri .py-cart--changed::after { /* a marker circle around a changed price */
  content: ""; position: absolute; inset: 2.7rem 0.6rem 2.3rem; border: 3px solid var(--py-marker-red); border-radius: 50%; opacity: 0.75; rotate: -3deg; pointer-events: none;
}
.py-screen.py-pri .py-cart--none { --py-cart: light-dark(oklch(0.90 0.01 250), oklch(0.40 0.01 250)) !important; color: oklch(0.42 0.02 262); }
.py-screen.py-pri .py-cart--none .py-stamp { justify-self: center; align-self: center; font-size: var(--py-s-0); --py-stamp: oklch(0.45 0.17 25); }
.py-screen.py-pri .py-cart--error { outline: 3px solid var(--py-danger); outline-offset: 3px; }
.py-screen.py-pri .py-cart-err { grid-column: 1 / -1; font-size: var(--py-s--1); font-weight: 700; color: oklch(0.38 0.16 28); background: oklch(0.98 0.02 30 / 0.85); padding: 0.15em 0.4em; border-radius: 3px; }

.py-screen.py-pri .py-pri-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-3); padding: var(--py-3) var(--py-4); background: color-mix(in oklch, var(--py-paper) 92%, transparent); backdrop-filter: blur(6px); border-top: 2px solid var(--py-ink); }
.py-screen.py-pri .py-pri-actions p { flex: 1 1 18rem; }
@media (max-width: 47.99rem) { .py-screen.py-pri .py-pri-actions { bottom: 3.4rem; } .py-screen.py-pri .py-cart-input { font-size: var(--py-s-5); } .py-screen.py-pri .py-pri-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--py-3); } .py-screen.py-pri .py-cart { min-height: 9.5rem; padding: var(--py-3); } }


/* ---------- What the product draws beyond the design ---------- */

/* One form publishes every card: its groups are fieldsets, each named as the design's heading. */
.py-screen.py-pri .py-pri-form { display: grid; gap: var(--py-5); }
.py-screen.py-pri .py-pri-group { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.py-screen.py-pri .py-pri-group legend { padding: 0; margin-bottom: var(--py-3); font-family: var(--py-f-display); font-stretch: 105%; font-weight: 750; font-size: var(--py-s-1); }

@media print {
  .py-screen.py-pri .py-pri-actions, .py-screen.py-pri .py-head, .py-screen.py-pri .py-pri-lead { display: none !important; }
  .py-screen.py-pri .py-pri-grid { grid-template-columns: repeat(2, 1fr); }
  .py-screen.py-pri .py-cart { rotate: 0deg; break-inside: avoid; min-height: 12cm; box-shadow: none; }
  .py-screen.py-pri .py-cart::before, .py-screen.py-pri .py-cart::after { display: none; }
}

/* The draft (docs/specs/catalog.md, *By keyboard, and kept as a draft*): a changed card names the
   published price it replaces, struck through, and the bar counts the cards changed. */
.py-screen.py-pri .py-cart-was { display: inline-flex; gap: 0.3em; align-items: baseline; }
.py-screen.py-pri .py-pri-count { font-weight: 650; }

/* No hay hoy (docs/specs/catalog.md, *Today's prices*): every card's own button writes in the card's
   marker, never the sheet's ink, which the dark scheme lightens over a card that stays bright; a
   marked card is grey in either scheme, so its words and its stamp lighten with it. */
.py-screen.py-pri .py-cart .py-btn { color: var(--py-marker); }
.py-screen.py-pri .py-cart .py-btn:hover { border-color: currentColor; }
.py-screen.py-pri .py-cart-foot .py-btn { margin-inline-start: auto; }
.py-screen.py-pri .py-cart--none { color: light-dark(oklch(0.42 0.02 262), oklch(0.93 0.01 262)); }
.py-screen.py-pri .py-cart--none .py-btn { color: inherit; }
.py-screen.py-pri .py-cart--none .py-stamp { --py-stamp: light-dark(oklch(0.45 0.17 25), oklch(0.84 0.1 25)); }