/* Appointments: the barber's day, one column per barber; each appointment is the little card
   barbers hand out. Screen prefix py-ap-. Grid placement by classes (no inline styles, strict CSP). */
.py-screen.py-ap .py-ap-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--py-5); align-items: start; }
.py-screen.py-ap .py-ap-day { display: inline-flex; align-items: center; gap: var(--py-2); }
.py-screen.py-ap .py-ap-day h1 { font-family: var(--py-f-display); font-stretch: 112%; font-weight: 750; font-size: var(--py-s-3); }
.py-screen.py-ap .py-ap-grid {
  display: grid; grid-template-columns: 3.5rem; grid-auto-columns: minmax(0, 1fr); /* a column per worker */
  grid-template-rows: 2.5rem; grid-auto-rows: 3rem; /* a row per half hour, as many as the day holds */
  column-gap: var(--py-2);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(3rem - 1px), var(--py-ruling) calc(3rem - 1px) 3rem);
  background-position: 0 2.5rem; background-repeat: repeat-y;
  position: relative;
}
.py-screen.py-ap .py-ap-barber { grid-row: 1; display: flex; align-items: baseline; gap: var(--py-2); font-weight: 700; padding-inline: var(--py-2); border-bottom: 2px solid var(--py-print); color: var(--py-print); }
.py-screen.py-ap .py-ap-barber small { font-weight: 500; color: var(--py-ink-soft); font-size: var(--py-s--1); }
.py-screen.py-ap .py-ap-c1 { grid-column: 2; } .py-screen.py-ap .py-ap-c2 { grid-column: 3; } .py-screen.py-ap .py-ap-c3 { grid-column: 4; } .py-screen.py-ap .py-ap-c4 { grid-column: 5; }
.py-screen.py-ap .py-ap-c5 { grid-column: 6; } .py-screen.py-ap .py-ap-c6 { grid-column: 7; } .py-screen.py-ap .py-ap-c7 { grid-column: 8; } .py-screen.py-ap .py-ap-c8 { grid-column: 9; }
.py-screen.py-ap .py-ap-c9 { grid-column: 10; } .py-screen.py-ap .py-ap-c10 { grid-column: 11; } .py-screen.py-ap .py-ap-c11 { grid-column: 12; } .py-screen.py-ap .py-ap-c12 { grid-column: 13; }
.py-screen.py-ap .py-ap-time { grid-column: 1; font-size: var(--py-s--1); color: var(--py-ink-soft); font-variant-numeric: tabular-nums; translate: 0 -0.55em; }
.py-screen.py-ap .py-ap-r1 { grid-row-start: 2; } .py-screen.py-ap .py-ap-r2 { grid-row-start: 3; } .py-screen.py-ap .py-ap-r3 { grid-row-start: 4; } .py-screen.py-ap .py-ap-r4 { grid-row-start: 5; }
.py-screen.py-ap .py-ap-r5 { grid-row-start: 6; } .py-screen.py-ap .py-ap-r6 { grid-row-start: 7; } .py-screen.py-ap .py-ap-r7 { grid-row-start: 8; } .py-screen.py-ap .py-ap-r8 { grid-row-start: 9; }
.py-screen.py-ap .py-ap-r9 { grid-row-start: 10; } .py-screen.py-ap .py-ap-r10 { grid-row-start: 11; } .py-screen.py-ap .py-ap-r11 { grid-row-start: 12; } .py-screen.py-ap .py-ap-r12 { grid-row-start: 13; }
.py-screen.py-ap .py-ap-r13 { grid-row-start: 14; } .py-screen.py-ap .py-ap-r14 { grid-row-start: 15; } .py-screen.py-ap .py-ap-r15 { grid-row-start: 16; } .py-screen.py-ap .py-ap-r16 { grid-row-start: 17; }
.py-screen.py-ap .py-ap-r17 { grid-row-start: 18; } .py-screen.py-ap .py-ap-r18 { grid-row-start: 19; } .py-screen.py-ap .py-ap-r19 { grid-row-start: 20; } .py-screen.py-ap .py-ap-r20 { grid-row-start: 21; }
.py-screen.py-ap .py-ap-r21 { grid-row-start: 22; } .py-screen.py-ap .py-ap-r22 { grid-row-start: 23; } .py-screen.py-ap .py-ap-r23 { grid-row-start: 24; } .py-screen.py-ap .py-ap-r24 { grid-row-start: 25; }
.py-screen.py-ap .py-ap-r25 { grid-row-start: 26; } .py-screen.py-ap .py-ap-r26 { grid-row-start: 27; } .py-screen.py-ap .py-ap-r27 { grid-row-start: 28; } .py-screen.py-ap .py-ap-r28 { grid-row-start: 29; }
.py-screen.py-ap .py-ap-r29 { grid-row-start: 30; } .py-screen.py-ap .py-ap-r30 { grid-row-start: 31; } .py-screen.py-ap .py-ap-r31 { grid-row-start: 32; } .py-screen.py-ap .py-ap-r32 { grid-row-start: 33; }
.py-screen.py-ap .py-ap-r33 { grid-row-start: 34; } .py-screen.py-ap .py-ap-r34 { grid-row-start: 35; } .py-screen.py-ap .py-ap-r35 { grid-row-start: 36; } .py-screen.py-ap .py-ap-r36 { grid-row-start: 37; }
.py-screen.py-ap .py-ap-r37 { grid-row-start: 38; } .py-screen.py-ap .py-ap-r38 { grid-row-start: 39; } .py-screen.py-ap .py-ap-r39 { grid-row-start: 40; } .py-screen.py-ap .py-ap-r40 { grid-row-start: 41; }
.py-screen.py-ap .py-ap-r41 { grid-row-start: 42; } .py-screen.py-ap .py-ap-r42 { grid-row-start: 43; } .py-screen.py-ap .py-ap-r43 { grid-row-start: 44; } .py-screen.py-ap .py-ap-r44 { grid-row-start: 45; }
.py-screen.py-ap .py-ap-r45 { grid-row-start: 46; } .py-screen.py-ap .py-ap-r46 { grid-row-start: 47; } .py-screen.py-ap .py-ap-r47 { grid-row-start: 48; } .py-screen.py-ap .py-ap-r48 { grid-row-start: 49; }
.py-screen.py-ap .py-ap-s1 { grid-row-end: span 1; } .py-screen.py-ap .py-ap-s2 { grid-row-end: span 2; } .py-screen.py-ap .py-ap-s3 { grid-row-end: span 3; } .py-screen.py-ap .py-ap-s4 { grid-row-end: span 4; }
.py-screen.py-ap .py-ap-s5 { grid-row-end: span 5; } .py-screen.py-ap .py-ap-s6 { grid-row-end: span 6; } .py-screen.py-ap .py-ap-s7 { grid-row-end: span 7; } .py-screen.py-ap .py-ap-s8 { grid-row-end: span 8; }
.py-screen.py-ap .py-ap-s9 { grid-row-end: span 9; } .py-screen.py-ap .py-ap-s10 { grid-row-end: span 10; } .py-screen.py-ap .py-ap-s11 { grid-row-end: span 11; } .py-screen.py-ap .py-ap-s12 { grid-row-end: span 12; }
.py-screen.py-ap .py-ap-s13 { grid-row-end: span 13; } .py-screen.py-ap .py-ap-s14 { grid-row-end: span 14; } .py-screen.py-ap .py-ap-s15 { grid-row-end: span 15; } .py-screen.py-ap .py-ap-s16 { grid-row-end: span 16; }
.py-screen.py-ap .py-ap-s17 { grid-row-end: span 17; } .py-screen.py-ap .py-ap-s18 { grid-row-end: span 18; } .py-screen.py-ap .py-ap-s19 { grid-row-end: span 19; } .py-screen.py-ap .py-ap-s20 { grid-row-end: span 20; }
.py-screen.py-ap .py-ap-s21 { grid-row-end: span 21; } .py-screen.py-ap .py-ap-s22 { grid-row-end: span 22; } .py-screen.py-ap .py-ap-s23 { grid-row-end: span 23; } .py-screen.py-ap .py-ap-s24 { grid-row-end: span 24; }
.py-screen.py-ap .py-ap-s25 { grid-row-end: span 25; } .py-screen.py-ap .py-ap-s26 { grid-row-end: span 26; } .py-screen.py-ap .py-ap-s27 { grid-row-end: span 27; } .py-screen.py-ap .py-ap-s28 { grid-row-end: span 28; }
.py-screen.py-ap .py-ap-s29 { grid-row-end: span 29; } .py-screen.py-ap .py-ap-s30 { grid-row-end: span 30; } .py-screen.py-ap .py-ap-s31 { grid-row-end: span 31; } .py-screen.py-ap .py-ap-s32 { grid-row-end: span 32; }
.py-screen.py-ap .py-ap-s33 { grid-row-end: span 33; } .py-screen.py-ap .py-ap-s34 { grid-row-end: span 34; } .py-screen.py-ap .py-ap-s35 { grid-row-end: span 35; } .py-screen.py-ap .py-ap-s36 { grid-row-end: span 36; }
.py-screen.py-ap .py-ap-s37 { grid-row-end: span 37; } .py-screen.py-ap .py-ap-s38 { grid-row-end: span 38; } .py-screen.py-ap .py-ap-s39 { grid-row-end: span 39; } .py-screen.py-ap .py-ap-s40 { grid-row-end: span 40; }
.py-screen.py-ap .py-ap-s41 { grid-row-end: span 41; } .py-screen.py-ap .py-ap-s42 { grid-row-end: span 42; } .py-screen.py-ap .py-ap-s43 { grid-row-end: span 43; } .py-screen.py-ap .py-ap-s44 { grid-row-end: span 44; }
.py-screen.py-ap .py-ap-s45 { grid-row-end: span 45; } .py-screen.py-ap .py-ap-s46 { grid-row-end: span 46; } .py-screen.py-ap .py-ap-s47 { grid-row-end: span 47; } .py-screen.py-ap .py-ap-s48 { grid-row-end: span 48; }

/* the appointment card */
.py-screen.py-ap .py-apt {
  margin: 3px 0; padding: var(--py-1) var(--py-3); border-radius: 4px;
  background: var(--py-canary); color: var(--py-ink);
  border-inline-start: 4px solid var(--py-stamp);
  display: grid; align-content: start; gap: 0; overflow: hidden; text-decoration: none;
  box-shadow: 0 6px 12px -10px oklch(0.2 0.05 262 / 0.6);
  position: relative;
}
.py-screen.py-ap .py-apt b { --py-casl: 1; font-weight: 750; font-size: var(--py-s-0); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-screen.py-ap .py-apt span { font-size: var(--py-s--1); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-screen.py-ap .py-apt .py-ap-when { color: var(--py-canary-ink); font-variant-numeric: tabular-nums; }
.py-screen.py-ap .py-apt.py-is-ask { border-inline-start-color: var(--py-warn); border-style: dashed; }
.py-screen.py-ap .py-apt.py-is-here { background: var(--py-verde); border-inline-start-color: var(--py-ok); }
.py-screen.py-ap .py-apt.py-is-done { background: var(--py-paper-2); color: var(--py-ink-soft); border-inline-start-color: var(--py-rule); }
.py-screen.py-ap .py-apt.py-is-noshow { background: var(--py-paper-2); border-inline-start-color: var(--py-danger); }
.py-screen.py-ap .py-apt .py-stamp { position: absolute; inset: auto var(--py-2) var(--py-1) auto; font-size: var(--py-s--2); padding: 0.1em 0.4em; }
.py-screen.py-ap .py-apt.py-is-noshow .py-stamp { --py-stamp: var(--py-danger); }
.py-screen.py-ap .py-apt[aria-current="true"] { outline: 3px solid var(--py-ink); outline-offset: 1px; }
.py-screen.py-ap .py-apt:hover { filter: brightness(0.98); }
.py-screen.py-ap .py-free { margin: 3px 0; border: 1.5px dashed var(--py-rule); border-radius: 4px; display: grid; place-items: center; color: var(--py-ink-faint); font-size: var(--py-s--1); text-decoration: none; }
.py-screen.py-ap .py-free:hover { border-color: var(--py-ink); color: var(--py-ink); background: var(--py-paper-2); }

/* now: a ribbon bookmark across the day */
.py-screen.py-ap .py-ap-now { grid-column: 1 / -1; align-self: start; height: 0; border-top: 2px solid var(--py-folio); position: relative; z-index: 2; pointer-events: none; }
.py-screen.py-ap .py-ap-now span { position: absolute; inset: -0.75rem auto auto 0; background: var(--py-folio); color: oklch(0.99 0 0); font-size: var(--py-s--2); font-weight: 750; padding: 0.1em 0.4em; border-radius: 3px; }

.py-screen.py-ap .py-ap-side { display: grid; gap: var(--py-4); position: sticky; top: var(--py-4); }
.py-screen.py-ap .py-ap-panel { padding: var(--py-4); display: grid; gap: var(--py-3); }
.py-screen.py-ap .py-ap-panel h2 { font-size: var(--py-s-1); font-weight: 720; }
.py-screen.py-ap .py-ap-panel dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-1) var(--py-3); font-size: var(--py-s--1); }
.py-screen.py-ap .py-ap-panel dt { color: var(--py-ink-soft); }
.py-screen.py-ap .py-ap-panel dd { margin: 0; font-weight: 600; }
.py-screen.py-ap .py-ap-acts { display: flex; flex-wrap: wrap; gap: var(--py-2); }
.py-screen.py-ap .py-ap-move { display: grid; gap: var(--py-1); list-style: none; margin: 0; padding: 0; }
.py-screen.py-ap .py-ap-move a { display: flex; justify-content: space-between; gap: var(--py-3); padding: var(--py-2) var(--py-3); border: 1px solid var(--py-ruling); border-radius: var(--py-r-ctl); text-decoration: none; font-size: var(--py-s--1); }
.py-screen.py-ap .py-ap-move a:hover { border-color: var(--py-ink); }
.py-screen.py-ap .py-ap-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-screen.py-ap .py-ap-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-1) var(--py-3); align-items: center; padding-bottom: var(--py-2); border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-ap .py-ap-queue b { --py-casl: 1; }
.py-screen.py-ap .py-ap-queue span { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-ap .py-ap-island { font-size: var(--py-s--1); color: var(--py-ink-soft); border-inline-start: 3px solid var(--py-rule); padding-inline-start: var(--py-3); }

@media (max-width: 72rem) { .py-screen.py-ap .py-ap-layout { grid-template-columns: minmax(0, 1fr); } .py-screen.py-ap .py-ap-side { position: static; } }
@media (max-width: 47.99rem) {
  .py-screen.py-ap .py-ap-grid { grid-template-columns: 2.75rem; grid-auto-columns: minmax(7rem, 1fr); overflow-x: auto; }
  .py-screen.py-ap .py-ap-scroll { overflow-x: auto; }
  .py-screen.py-ap .py-ap-grid { min-width: 26rem; }
}

.py-screen.py-ap .py-apt.py-ap-s1 { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--py-2); align-content: center; }
.py-screen.py-ap .py-apt.py-ap-s1 > span:not(.py-ap-when):not(.py-stamp):not(.py-sr) { display: none; }
.py-screen.py-ap .py-apt.py-ap-s1 .py-stamp { position: static; justify-self: start; grid-column: 1 / -1; }
.py-screen.py-ap .py-apt.py-ap-s1:has(.py-stamp) b { grid-column: 1; }
.py-screen.py-ap .py-apt.py-ap-s1:has(.py-stamp) .py-ap-when { display: none; }
.py-screen.py-ap .py-apt.py-ap-s1:has(.py-stamp) .py-stamp { position: absolute; inset: 50% var(--py-2) auto auto; translate: 0 -50%; grid-column: auto; }

/* Narrow columns (a tablet upright, a phone): a half-hour card keeps the name and drops the hours,
   which the grid already shows. The card measures itself (container query), whatever the screen. */
.py-screen.py-ap .py-apt { container-type: inline-size; }
@container (max-width: 14rem) {
  .py-screen.py-ap .py-apt.py-ap-s1 b { grid-column: 1 / -1; font-size: var(--py-s--1); }
  .py-screen.py-ap .py-apt.py-ap-s1 .py-ap-when { display: none; }
  .py-screen.py-ap .py-apt.py-ap-s1:has(.py-stamp) .py-stamp { position: static; translate: none; justify-self: start; grid-column: 1 / -1; }
}

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

/* In the card's language: each worker's column is a section with its list, drawn into
   the grid (display: contents); a block of a worker's time, hatched like a closed day; an
   empty column's word; the appointment's own page. */
.py-screen.py-ap .py-ap-grid > section, .py-screen.py-ap .py-ap-grid > section > ul, .py-screen.py-ap .py-ap-grid > section > ul > li { display: contents; }
.py-screen.py-ap .py-ap-grid > section > ul { list-style: none; }
.py-screen.py-ap .py-ap-barber h2 { font: inherit; color: inherit; }
/* the now ribbon runs across the time column and every worker's (implicit columns: -1 ends the first) */
.py-screen.py-ap .py-ap-now.py-ap-w1 { grid-column: 1 / span 2; } .py-screen.py-ap .py-ap-now.py-ap-w2 { grid-column: 1 / span 3; } .py-screen.py-ap .py-ap-now.py-ap-w3 { grid-column: 1 / span 4; } .py-screen.py-ap .py-ap-now.py-ap-w4 { grid-column: 1 / span 5; }
.py-screen.py-ap .py-ap-now.py-ap-w5 { grid-column: 1 / span 6; } .py-screen.py-ap .py-ap-now.py-ap-w6 { grid-column: 1 / span 7; } .py-screen.py-ap .py-ap-now.py-ap-w7 { grid-column: 1 / span 8; } .py-screen.py-ap .py-ap-now.py-ap-w8 { grid-column: 1 / span 9; }
.py-screen.py-ap .py-ap-now.py-ap-w9 { grid-column: 1 / span 10; } .py-screen.py-ap .py-ap-now.py-ap-w10 { grid-column: 1 / span 11; } .py-screen.py-ap .py-ap-now.py-ap-w11 { grid-column: 1 / span 12; } .py-screen.py-ap .py-ap-now.py-ap-w12 { grid-column: 1 / span 13; }
.py-screen.py-ap .py-ap-block {
  margin: 3px 0; padding: var(--py-1) var(--py-3); border-radius: 4px; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 0 var(--py-2);
  color: var(--py-ink-soft); font-size: var(--py-s--1);
  background: repeating-linear-gradient(135deg, var(--py-paper-2) 0 6px, var(--py-paper) 6px 9px);
  border: 1px solid var(--py-ruling);
}
.py-screen.py-ap .py-ap-block .py-btn { min-height: 1.75rem; }
.py-screen.py-ap .py-ap-empty { grid-row: 2 / span 2; padding: var(--py-2); }
.py-screen.py-ap .py-ap-acts form { display: contents; }
.py-screen.py-ap .py-ap-page { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--py-5); align-items: start; }
.py-screen.py-ap .py-ap-page .py-ap-panel h3 { font-size: var(--py-s-0); font-weight: 700; }
.py-screen.py-ap .py-ap-history { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--py-1); font-size: var(--py-s--1); }
@media (max-width: 60rem) { .py-screen.py-ap .py-ap-page { grid-template-columns: minmax(0, 1fr); } }
.py-screen.py-ap .py-ap-move-form { display: grid; gap: var(--py-3); }
.py-screen.py-ap .py-ap-move-form .py-btn, .py-screen.py-ap .py-ap-form .py-btn { justify-self: start; }
.py-screen.py-ap .py-ap-form { display: grid; gap: var(--py-4); align-content: start; }

/* ---------- As the person works (the day's cards and the appointment's page in place) ---------- */

/* The now ribbon at its minute within its half-hour row (`py-ap-m*`, the server's, then the
   screen's script's as the minutes pass): a row is 3rem, so a minute is a tenth of a rem. */
.py-screen.py-ap .py-ap-m0 { translate: 0 calc(3rem * 0 / 30); } .py-screen.py-ap .py-ap-m1 { translate: 0 calc(3rem * 1 / 30); } .py-screen.py-ap .py-ap-m2 { translate: 0 calc(3rem * 2 / 30); } .py-screen.py-ap .py-ap-m3 { translate: 0 calc(3rem * 3 / 30); } .py-screen.py-ap .py-ap-m4 { translate: 0 calc(3rem * 4 / 30); }
.py-screen.py-ap .py-ap-m5 { translate: 0 calc(3rem * 5 / 30); } .py-screen.py-ap .py-ap-m6 { translate: 0 calc(3rem * 6 / 30); } .py-screen.py-ap .py-ap-m7 { translate: 0 calc(3rem * 7 / 30); } .py-screen.py-ap .py-ap-m8 { translate: 0 calc(3rem * 8 / 30); } .py-screen.py-ap .py-ap-m9 { translate: 0 calc(3rem * 9 / 30); }
.py-screen.py-ap .py-ap-m10 { translate: 0 calc(3rem * 10 / 30); } .py-screen.py-ap .py-ap-m11 { translate: 0 calc(3rem * 11 / 30); } .py-screen.py-ap .py-ap-m12 { translate: 0 calc(3rem * 12 / 30); } .py-screen.py-ap .py-ap-m13 { translate: 0 calc(3rem * 13 / 30); } .py-screen.py-ap .py-ap-m14 { translate: 0 calc(3rem * 14 / 30); }
.py-screen.py-ap .py-ap-m15 { translate: 0 calc(3rem * 15 / 30); } .py-screen.py-ap .py-ap-m16 { translate: 0 calc(3rem * 16 / 30); } .py-screen.py-ap .py-ap-m17 { translate: 0 calc(3rem * 17 / 30); } .py-screen.py-ap .py-ap-m18 { translate: 0 calc(3rem * 18 / 30); } .py-screen.py-ap .py-ap-m19 { translate: 0 calc(3rem * 19 / 30); }
.py-screen.py-ap .py-ap-m20 { translate: 0 calc(3rem * 20 / 30); } .py-screen.py-ap .py-ap-m21 { translate: 0 calc(3rem * 21 / 30); } .py-screen.py-ap .py-ap-m22 { translate: 0 calc(3rem * 22 / 30); } .py-screen.py-ap .py-ap-m23 { translate: 0 calc(3rem * 23 / 30); } .py-screen.py-ap .py-ap-m24 { translate: 0 calc(3rem * 24 / 30); }
.py-screen.py-ap .py-ap-m25 { translate: 0 calc(3rem * 25 / 30); } .py-screen.py-ap .py-ap-m26 { translate: 0 calc(3rem * 26 / 30); } .py-screen.py-ap .py-ap-m27 { translate: 0 calc(3rem * 27 / 30); } .py-screen.py-ap .py-ap-m28 { translate: 0 calc(3rem * 28 / 30); } .py-screen.py-ap .py-ap-m29 { translate: 0 calc(3rem * 29 / 30); }

/* A card's Mover a…: a quiet button on the card's corner, its own grid item over the card's
   cells (`py-ap-card-move`): at its foot when the card spans an hour or more, at its end when it
   is a half hour, the card's text keeping clear of it; it opens its popover anchored to it
   (UI-318). */
.py-screen.py-ap .py-ap-card-move { justify-self: end; align-self: end; z-index: 1; margin: 0 var(--py-1) calc(3px + var(--py-1)) 0; min-height: 1.6rem; padding: 0 0.55em; font-size: var(--py-s--2); background: var(--py-paper); }
.py-screen.py-ap .py-ap-card-move.py-ap-s1 { align-self: center; margin-block: 0; }
.py-screen.py-ap .py-apt.py-apt--moves.py-ap-s1 { padding-inline-end: 4.75rem; }
.py-screen.py-ap .py-ap-pop { width: min(20rem, calc(100vw - 2rem)); }
.py-screen.py-ap .py-ap-pop .py-ap-move-form { gap: var(--py-3); }
.py-screen.py-ap .py-ap-pop .py-label { font-size: var(--py-s-0); font-weight: 700; }
.py-screen.py-ap .py-ap-said:empty { display: none; }
/* What is checked as soon as it opens enters by sliding, never by fading (UI-425), and leaves the
   same way: its behaviours are listed again with its properties, so `display` and `overlay` keep
   `allow-discrete` (UI-443). */
.py-screen.py-ap .py-pop { transition-property: translate, display, overlay; transition-behavior: normal, allow-discrete, allow-discrete; }

/* The card that travels to its new place in the move's view transition (HTMX-320): one name, on
   the card leaving while its move is asked and on the card the server marks as arriving; reduced
   motion moves nothing (py.css). */
.py-screen.py-ap .py-ap-is-leaving, .py-screen.py-ap .py-ap-is-arriving { view-transition-name: py-ap-card; }

/* A status's stamp, landed as its button is pressed, in the status's place. */
.py-screen.py-ap .py-ap-panel dd .py-ap-stamped { font-size: var(--py-s--1); }

/* A card dragged (the screen's script, on SortableJS): it takes the touch, so a finger on it drags
   it instead of panning the day; the card left in its place fades while a copy follows the pointer
   or the finger, lifted; dropped, it waits where it was let go while its move is asked, its
   Mover a… hidden meanwhile, and refused it slides back, unless reduced motion is asked. Why it
   went back is said above the grid (`#dia-avisos`). */
.py-screen.py-ap .py-apt--moves { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.py-screen.py-ap .py-apt.py-is-dragged { opacity: 0.35; }
.py-screen.py-ap .py-apt.py-is-carried { cursor: grabbing; box-shadow: 0 14px 24px -12px oklch(0.2 0.05 262 / 0.55); }
.py-screen.py-ap .py-apt.py-ap-is-dropped { z-index: 3; opacity: 0.8; }
.py-screen.py-ap .py-apt:is(.py-is-dragged, .py-ap-is-dropped, .py-ap-is-returning) ~ .py-ap-card-move { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { .py-screen.py-ap .py-apt.py-ap-is-returning { transition: translate 180ms ease-out; } }
.py-screen.py-ap .py-ap-day-said { margin-block-end: var(--py-3); }