/* Catalog: the product binder, and its taxes' pages. Screen prefix py-cat-.
   No proposal draws these screens: they are drawn with the design system's paper
   (py.css) in the Talonario's language. A product is a card punched for the binder,
   a list of named things is the binder's dividers, a price list is a ruled sheet,
   and every form sits on its own sheet. Every rule is scoped to the screen element. */

/* ---------- The page: what the binder holds, and the sheet that changes it ---------- */
/* The columns, the parts, the forms, the folds and the empty pages are the shell's
   components (shell.css); the binder's side sheet stays in view as the page scrolls. */
.py-screen.py-cat .py-cols-side { position: sticky; top: var(--py-4); }
.py-screen.py-cat .py-cat-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--py-2) var(--py-4); }
.py-screen.py-cat .py-cat-part-head .py-btn { margin-inline-start: auto; }
.py-screen.py-cat .py-cat-part-head h2 { font-family: var(--py-f-display); font-stretch: 100%; font-weight: 760; font-size: var(--py-s-1); }
@media (max-width: 60rem) { .py-screen.py-cat .py-cols-side { position: static; } }

/* ---------- A form on its sheet ---------- */
.py-screen.py-cat .py-form label.py-label:has(input[type="checkbox"]) { display: inline-flex; align-items: center; gap: var(--py-2); min-height: 2.75rem; font-size: var(--py-s-0); font-weight: 500; color: var(--py-ink); }

/* A form folded under its heading: a dashed line until it is opened. */
.py-screen.py-cat .py-fold > summary {
  min-height: 2.75rem;
  border: 1.5px dashed var(--py-rule); border-radius: var(--py-r-sheet);
  font-weight: 650; color: var(--py-ink-soft);
}
.py-screen.py-cat .py-fold > summary:hover { color: var(--py-ink); border-color: var(--py-ink-soft); }
.py-screen.py-cat .py-fold > summary h2 { color: inherit; }
.py-screen.py-cat .py-fold[open] > summary { color: var(--py-ink); border-color: transparent; padding-inline: 0; margin-bottom: var(--py-2); }

/* ---------- The binder's cards: one per product ---------- */
.py-screen.py-cat .py-cat-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--py-4); }
.py-screen.py-cat .py-cat-card {
  position: relative; display: grid; gap: var(--py-1); align-content: start;
  min-height: 8.5rem; padding: var(--py-4) var(--py-4) var(--py-4) 2.6rem;
  border-radius: var(--py-r-sheet); box-shadow: var(--py-shadow-sheet);
  /* punched for the rings, with the sheet's red margin line beside the holes */
  background:
    radial-gradient(circle at 1rem 1.6rem, var(--py-desk) 0 0.34rem, transparent 0.38rem),
    radial-gradient(circle at 1rem calc(100% - 1.6rem), var(--py-desk) 0 0.34rem, transparent 0.38rem),
    linear-gradient(to right, transparent 1.95rem, color-mix(in oklch, var(--py-folio) 45%, transparent) 1.95rem 2.05rem, transparent 2.05rem),
    var(--py-paper);
  transition: translate 120ms ease;
}
.py-screen.py-cat .py-cat-card:hover { translate: 0 -2px; }
.py-screen.py-cat .py-cat-card a { font-weight: 700; font-size: var(--py-s-1); line-height: 1.2; text-decoration: none; }
.py-screen.py-cat .py-cat-card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card opens it */
.py-screen.py-cat .py-cat-card a:focus-visible { outline: none; }
.py-screen.py-cat .py-cat-card:has(a:focus-visible) { outline: 3px solid var(--py-focus); outline-offset: 2px; }
.py-screen.py-cat .py-cat-card-kind { font-size: var(--py-s--1); font-weight: 600; color: var(--py-print); }
.py-screen.py-cat .py-cat-card-price { margin-top: auto; padding-top: var(--py-2); font-family: var(--py-f-display); font-stretch: 70%; font-weight: 750; font-size: var(--py-s-2); line-height: 1; }

/* ---------- The binder's dividers: a list of named things ---------- */
.py-screen.py-cat .py-cat-dividers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--py-3); }
.py-screen.py-cat .py-cat-dividers a {
  display: flex; align-items: center; min-height: 3.25rem; padding: var(--py-2) var(--py-4);
  border-radius: var(--py-r-tab) var(--py-r-tab) var(--py-r-sheet) var(--py-r-sheet);
  background: var(--py-canary); color: var(--py-canary-ink);
  border-bottom: 3px solid color-mix(in oklch, var(--py-canary-ink) 30%, transparent);
  font-weight: 700; text-decoration: none;
}
.py-screen.py-cat .py-cat-dividers a:hover { background: color-mix(in oklch, var(--py-canary) 80%, var(--py-canary-ink)); }

/* ---------- A ruled list on its sheet: variants, services, supplies, rates ---------- */
.py-screen.py-cat .py-cat-ruled { padding: var(--py-2) var(--py-4) var(--py-4); overflow-x: auto; }
.py-screen.py-cat .py-cat-ruled .py-table td:first-child { font-weight: 650; }
.py-screen.py-cat .py-cat-ruled .py-table td:first-child a { text-decoration-color: var(--py-rule); }
.py-screen.py-cat .py-cat-ruled .py-table .py-r { text-align: end; white-space: nowrap; }
.py-screen.py-cat .py-cat-ruled .py-table th.py-r { text-align: end; }
.py-screen.py-cat .py-cat-money { font-weight: 700; white-space: nowrap; }
.py-screen.py-cat .py-cat-code { color: var(--py-ink-soft); font-size: var(--py-s--1); letter-spacing: 0.04em; }
.py-screen.py-cat .py-cat-note { --py-casl: 1; color: var(--py-ink-soft); }

/* A service's supplies: what one service takes from the shelf, as a recipe's lines */
.py-screen.py-cat .py-cat-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.py-screen.py-cat .py-cat-lines li { display: flex; align-items: baseline; gap: var(--py-3); padding: var(--py-2) 0; border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-cat .py-cat-lines li > :first-child { font-weight: 600; }
.py-screen.py-cat .py-cat-lines li::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--py-rule); translate: 0 -0.3em; }
.py-screen.py-cat .py-cat-lines .py-num { order: 2; font-weight: 650; }

/* ---------- Attributes: a card per attribute, its values as tags ---------- */
.py-screen.py-cat .py-cat-attrs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--py-4); align-items: start; }
.py-screen.py-cat .py-cat-attr { display: grid; gap: var(--py-3); padding: var(--py-4) var(--py-5); background: var(--py-paper); border-radius: var(--py-r-sheet); box-shadow: var(--py-shadow-sheet); border-top: 4px solid var(--py-canary); }
.py-screen.py-cat .py-cat-attr > b { font-family: var(--py-f-display); font-weight: 760; font-size: var(--py-s-1); }
.py-screen.py-cat .py-cat-values { display: flex; flex-wrap: wrap; gap: var(--py-2); }
.py-screen.py-cat .py-cat-attr form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--py-2); padding-top: var(--py-3); border-top: 1px dashed var(--py-rule); }

/* ---------- Taxes: a rate's percentage, read like a stamped figure ---------- */
.py-screen.py-cat .py-cat-rate { font-family: var(--py-f-display); font-stretch: 75%; font-weight: 750; font-size: var(--py-s-1); white-space: nowrap; }

@media (max-width: 47.99rem) {
  .py-screen.py-cat .py-cat-ruled { padding-inline: var(--py-2); }
  .py-screen.py-cat .py-cat-ruled .py-table td, .py-screen.py-cat .py-cat-ruled .py-table th { padding-inline: var(--py-2); }
}