/* Customers: directory + the customer's index card. Screen prefix py-cus-. */
.py-screen.py-cus .py-cus-grid { display: grid; grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr); gap: var(--py-5); align-items: start; }
.py-screen.py-cus .py-cus-dir { display: grid; gap: var(--py-3); position: sticky; top: var(--py-4); }
.py-screen.py-cus .py-cus-list { list-style: none; margin: 0; padding: 0; display: grid; max-height: calc(100dvh - 12rem); overflow: auto; overscroll-behavior: contain; }
.py-screen.py-cus .py-cus-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--py-3); padding: var(--py-3) var(--py-3); text-decoration: none; border-bottom: 1px solid var(--py-ruling); border-radius: var(--py-r-ctl); }
.py-screen.py-cus .py-cus-list a:hover { background: var(--py-paper-2); }
.py-screen.py-cus .py-cus-list a[aria-current="true"] { background: var(--py-rosa); }
.py-screen.py-cus .py-cus-list b { font-weight: 650; }
.py-screen.py-cus .py-cus-list span { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-cus .py-cus-list .py-is-owed { color: var(--py-folio); font-weight: 650; font-variant-numeric: tabular-nums; text-align: end; }
.py-screen.py-cus .py-cus-list .py-is-ok { text-align: end; }

/* The index card: red header rule, blue ruled lines under it */
.py-screen.py-cus .py-card {
  background: var(--py-paper); border-radius: 3px; box-shadow: var(--py-shadow-sheet);
  padding: 0 0 var(--py-6);
  display: grid; gap: 0;
}
.py-screen.py-cus .py-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--py-3) var(--py-5); padding: var(--py-5) var(--py-6) var(--py-4); border-bottom: 2px solid color-mix(in oklch, var(--py-folio) 80%, transparent); }
.py-screen.py-cus .py-card-head :is(h1, h2) { font-family: var(--py-f-display); font-stretch: 100%; font-weight: 800; font-size: var(--py-s-3); line-height: 1.05; }
.py-screen.py-cus .py-card-head p { color: var(--py-ink-soft); }
.py-screen.py-cus .py-card-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem var(--py-6); align-items: start; padding: 2rem var(--py-6) 0; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), var(--py-ruling) calc(2rem - 1px) 2rem); }
.py-screen.py-cus .py-card section { display: grid; gap: 0; align-content: start; }
.py-screen.py-cus .py-card h3, .py-screen.py-cus .py-card-cols > * > h2 { font-size: var(--py-s--1); font-weight: 700; color: var(--py-print); line-height: 2rem; }
.py-screen.py-cus .py-card-note { --py-casl: 1; font-size: var(--py-s-1); font-weight: 560; line-height: 2rem; color: var(--py-ink); }
.py-screen.py-cus .py-card dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--py-3); line-height: 2rem; }
.py-screen.py-cus .py-card dt { color: var(--py-ink-soft); }
.py-screen.py-cus .py-card dd { margin: 0; font-weight: 560; }
.py-screen.py-cus .py-addr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--py-3); line-height: 2rem; }
.py-screen.py-cus .py-addr b { font-weight: 650; }
.py-screen.py-cus .py-addr .py-num { font-weight: 650; }

.py-screen.py-cus .py-owed { margin-block: 0 1rem; background: color-mix(in oklch, var(--py-folio) 7%, var(--py-paper)); border-inline-start: 4px solid var(--py-folio); padding: var(--py-3) var(--py-4); border-radius: 0 var(--py-r-ctl) var(--py-r-ctl) 0; display: grid; gap: var(--py-2); }
.py-screen.py-cus .py-owed p:first-child { font-size: var(--py-s-1); }
.py-screen.py-cus .py-owed b { font-family: var(--py-f-display); font-stretch: 70%; font-size: var(--py-s-2); color: var(--py-folio); font-weight: 750; }
.py-screen.py-cus .py-owed ul { margin: 0; padding: 0; list-style: none; font-size: var(--py-s--1); display: grid; gap: 2px; }
.py-screen.py-cus .py-owed li { display: flex; justify-content: space-between; gap: var(--py-3); }

.py-screen.py-cus .py-usual { list-style: none; margin: 0; padding: 0; display: grid; line-height: 2rem; }
.py-screen.py-cus .py-usual li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-3); }
.py-screen.py-cus .py-usual .py-num { color: var(--py-ink-soft); }

.py-screen.py-cus .py-hist { list-style: none; margin: 0; padding: 0; display: grid; }
.py-screen.py-cus .py-hist li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto 5.5rem; align-items: center; gap: var(--py-3); min-height: 2rem; }
.py-screen.py-cus .py-hist a { color: var(--py-folio); font-family: var(--py-f-display); font-stretch: 68%; font-weight: 700; text-decoration: none; }
.py-screen.py-cus .py-hist .py-num { font-weight: 650; text-align: end; }
.py-screen.py-cus .py-hist .py-stamp { font-size: var(--py-s--2); padding: 0.15em 0.4em; justify-self: center; }
.py-screen.py-cus .py-hist .py-is-todo { font-size: var(--py-s--1); color: var(--py-folio); font-weight: 650; text-align: center; }

@media (max-width: 72rem) { .py-screen.py-cus .py-cus-grid { grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); gap: var(--py-4); } }
@media (max-width: 60rem) { .py-screen.py-cus .py-cus-grid { grid-template-columns: minmax(0, 1fr); } .py-screen.py-cus .py-cus-dir { position: static; } .py-screen.py-cus .py-cus-list { max-height: 18rem; } }
@media (max-width: 47.99rem) { .py-screen.py-cus .py-card-head { padding: var(--py-4); } .py-screen.py-cus .py-card-cols { padding-inline: var(--py-4); } .py-screen.py-cus .py-hist li { grid-template-columns: 5rem minmax(0, 1fr) auto; } .py-screen.py-cus .py-hist li > :last-child { grid-column: 1 / -1; justify-self: start; } }

.py-screen.py-cus .py-cus-all { display: none; }
@media (max-width: 47.99rem) { .py-screen.py-cus .py-cus-list { max-height: none; overflow: visible; } .py-screen.py-cus .py-cus-list li:nth-child(n+4) { display: none; } .py-screen.py-cus .py-cus-all { display: inline-flex; } }

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

/* In the card's language: the record's own lists (contact points,
   addresses, tags), the forms that add to them folded under their heading, a party's form,
   and the directory's search and filter. */
.py-screen.py-cus .py-cus-addrs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-screen.py-cus .py-addr form { justify-self: end; }
.py-screen.py-cus .py-cus-lines { list-style: none; margin: 0; padding: 0; display: grid; }
.py-screen.py-cus .py-cus-lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--py-3); line-height: 2rem; }
.py-screen.py-cus .py-cus-lines .py-cus-what { color: var(--py-ink-soft); }
.py-screen.py-cus .py-cus-lines b { font-weight: 560; }
.py-screen.py-cus .py-cus-lines form { margin-inline-start: auto; }
.py-screen.py-cus .py-cus-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--py-2); padding-block: calc((2rem - 1.5em) / 2); }
.py-screen.py-cus .py-cus-add { margin-top: var(--py-2); }
.py-screen.py-cus .py-cus-add summary { cursor: pointer; line-height: 2rem; font-size: var(--py-s--1); font-weight: 650; color: var(--py-ink-soft); }
.py-screen.py-cus .py-cus-add summary h3 { display: inline; color: inherit; font-size: inherit; }
.py-screen.py-cus .py-cus-add[open] summary { margin-bottom: var(--py-2); }
.py-screen.py-cus .py-cus-form { display: grid; gap: var(--py-4); align-content: start; }
.py-screen.py-cus .py-cus-form .py-btn { justify-self: start; }
.py-screen.py-cus .py-cus-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--py-2) var(--py-4); }
.py-screen.py-cus .py-cus-form legend { padding: 0; margin-bottom: var(--py-2); }
.py-screen.py-cus .py-cus-form fieldset label { display: inline-flex; align-items: center; gap: var(--py-2); min-height: 2.75rem; }
.py-screen.py-cus .py-cus-search { display: flex; gap: var(--py-2); align-items: end; }
.py-screen.py-cus .py-cus-search .py-field { flex: 1; }
.py-screen.py-cus .py-empty { padding: var(--py-8) var(--py-6); }
.py-screen.py-cus .py-card-cols > .py-cus-wide { grid-column: 1 / -1; }
.py-screen.py-cus .py-cus-wide .py-hist li { grid-template-columns: 11rem minmax(0, 1fr) auto; }
.py-screen.py-cus .py-hist .py-cus-what { font-family: var(--py-f-display); font-stretch: 68%; font-weight: 700; }