/* Team: the time clock by the door of one branch. Who is still out, who is already in, and the clock
   between them, where a pass prints and a card shows its back. Prefix py-tm-. */
.py-screen.py-tm .py-tm-wall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem) minmax(0, 1fr); gap: var(--py-5); align-items: start; }

/* The racks: a slot per card, the metal frame drawn with one inset shadow */
.py-screen.py-tm .py-tm-rack {
  display: grid; gap: var(--py-3); padding: var(--py-4);
  border-radius: 6px; background: color-mix(in oklch, var(--py-ink) 9%, var(--py-desk));
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--py-ink) 16%, transparent);
}
.py-screen.py-tm .py-tm-rack h2 { font-family: var(--py-f-display); font-stretch: 85%; font-weight: 760; font-size: var(--py-s-1); }
.py-screen.py-tm .py-tm-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }

/* A punch card standing in its slot: its number in folio red, its punched time in the stamp's violet */
.py-screen.py-tm .py-tm-card {
  position: relative;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: var(--py-3); row-gap: 1px; align-items: baseline;
  padding: var(--py-3); border-radius: 2px;
  background: var(--py-paper); border-top: 4px solid var(--py-print);
  box-shadow: 0 2px 0 color-mix(in oklch, var(--py-ink) 22%, transparent);
}
.py-screen.py-tm .py-tm-no { grid-row: 1 / span 4; font-family: var(--py-f-display); font-stretch: 66%; font-weight: 700; font-size: var(--py-s-2); color: var(--py-folio); line-height: 1; }
.py-screen.py-tm .py-tm-name { grid-column: 2; font-weight: 700; text-decoration: none; }
.py-screen.py-tm a.py-tm-name:hover { text-decoration: underline; text-decoration-color: currentColor; }
.py-screen.py-tm .py-tm-card > span:not(.py-tm-no):not(.py-stamp), .py-screen.py-tm .py-tm-card small { grid-column: 2; font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-tm .py-tm-card small { font-size: var(--py-s--2); }
.py-screen.py-tm .py-tm-card .py-btn { grid-column: 2; justify-self: start; margin-top: var(--py-2); }
.py-screen.py-tm .py-tm-punch { grid-column: 3; grid-row: 1 / span 4; align-self: center; font-size: var(--py-s-0); letter-spacing: 0.04em; }
.py-screen.py-tm .py-tm-card--blank { background: transparent; box-shadow: none; border-top-style: dashed; outline: 2px dashed var(--py-ink-faint); outline-offset: -2px; }
.py-screen.py-tm .py-tm-is-pulled { background: transparent; box-shadow: none; outline: 2px dashed var(--py-ink-faint); outline-offset: -2px; } /* its slot, empty: the card is in the clock */
.py-screen.py-tm .py-tm-is-pulled .py-tm-name, .py-screen.py-tm .py-tm-is-pulled .py-tm-no { opacity: 0.6; }
.py-screen.py-tm .py-tm-is-open { outline: 3px solid var(--py-ink); outline-offset: 2px; } /* its back is on the clock */
.py-screen.py-tm .py-tm-add { display: flex; flex-wrap: wrap; gap: var(--py-2); padding-top: var(--py-2); border-top: 1px dashed color-mix(in oklch, var(--py-ink) 25%, transparent); }
.py-screen.py-tm .py-tm-empty { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-tm .py-tm-gone { font-size: var(--py-s--1); }
.py-screen.py-tm .py-tm-gone summary { cursor: pointer; font-weight: 700; color: var(--py-ink-soft); }
.py-screen.py-tm .py-tm-gone p { margin-top: var(--py-2); }

/* The clock: its face, and below it what it holds now (a pass, a card's back, or nothing) */
.py-screen.py-tm .py-tm-clock {
  display: grid; gap: var(--py-4);
  padding: var(--py-5) var(--py-4); border-radius: 18px 18px 8px 8px;
  background: var(--py-paper); box-shadow: var(--py-shadow-sheet); outline: 3px solid var(--py-ink);
}
.py-screen.py-tm .py-tm-face { display: grid; justify-items: center; gap: var(--py-1); color: var(--py-ink); }
.py-screen.py-tm .py-tm-face svg { width: 4.5rem; height: 4.5rem; }
.py-screen.py-tm .py-tm-face span { font-family: var(--py-f-display); font-stretch: 70%; font-weight: 750; font-size: var(--py-s-1); }
.py-screen.py-tm .py-tm-pass, .py-screen.py-tm .py-tm-idle { display: grid; gap: var(--py-3); justify-items: center; text-align: center; }
.py-screen.py-tm .py-tm-clock h2 { font-family: var(--py-f-display); font-stretch: 100%; font-weight: 760; font-size: var(--py-s-1); }
.py-screen.py-tm .py-tm-where { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-tm .py-tm-window { width: 100%; max-width: 15rem; padding: var(--py-2); border-radius: 4px; background: var(--py-paper); box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--py-ink) 22%, transparent); }
.py-screen.py-tm .py-tm-window .py-qr { width: 100%; color: var(--py-ink); }
.py-screen.py-tm .py-tm-due { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--py-2); }
.py-screen.py-tm .py-tm-due b { font-family: var(--py-f-display); font-stretch: 80%; font-size: var(--py-s-1); color: var(--py-folio); }
.py-screen.py-tm .py-tm-due span { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-tm .py-tm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--py-2); }

/* A card's back: who they are here and what the viewer may change, nothing more */
.py-screen.py-tm .py-tm-back { display: grid; gap: var(--py-3); padding-top: var(--py-3); border-top: 2px dashed var(--py-rule); }
.py-screen.py-tm .py-tm-kicker { font-size: var(--py-s--1); color: var(--py-print); font-weight: 650; }
.py-screen.py-tm .py-tm-back h2 { margin-top: calc(var(--py-2) * -1); }
.py-screen.py-tm .py-tm-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--py-2) var(--py-3); font-size: var(--py-s--1); }
.py-screen.py-tm .py-tm-facts dt { font-weight: 700; }
.py-screen.py-tm .py-tm-facts dd { margin: 0; color: var(--py-ink-soft); }
.py-screen.py-tm .py-tm-roles caption { text-align: start; font-weight: 700; font-size: var(--py-s--1); padding-bottom: var(--py-1); }
.py-screen.py-tm .py-tm-roles th[scope="row"] { font-family: var(--py-f-ui); font-stretch: 100%; font-size: var(--py-s--1); color: var(--py-ink); font-weight: 600; padding: var(--py-2) var(--py-3); border-bottom: 1px solid var(--py-ruling); }
.py-screen.py-tm .py-tm-roles td { padding: var(--py-2) var(--py-3); font-size: var(--py-s--1); }
.py-screen.py-tm .py-tm-grant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-3); align-items: end; }
.py-screen.py-tm .py-tm-back .py-tm-actions { justify-content: space-between; }


/* A tablet on its side and small laptops: the clock above, the racks side by side */
@media (max-width: 80rem) {
  .py-screen.py-tm .py-tm-wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .py-screen.py-tm .py-tm-clock { grid-column: 1 / -1; order: -1; width: 100%; max-width: 30rem; justify-self: center; }
}
/* A tablet upright: one column */
@media (max-width: 52rem) { .py-screen.py-tm .py-tm-wall { grid-template-columns: minmax(0, 1fr); } }

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

/* The clock alone, for a card's back, a
   pass or the blank card's forms, each on its own page until they swap into the wall. */
.py-screen.py-tm .py-tm-alone > .py-tm-back { border-top: 0; padding-top: 0; }
.py-screen.py-tm .py-tm-alone h1 { font-family: var(--py-f-display); font-stretch: 100%; font-weight: 760; font-size: var(--py-s-2); }
.py-screen.py-tm .py-tm-link { max-width: 100%; text-align: center; font-size: var(--py-s--1); overflow-wrap: anywhere; }
.py-screen.py-tm .py-tm-form { display: grid; gap: var(--py-4); }
.py-screen.py-tm .py-tm-how { border: 0; margin: 0; padding: 0; }
.py-screen.py-tm .py-tm-how label { display: flex; align-items: center; gap: var(--py-2); min-height: 2.25rem; }
/* A card's number is the spec's *Nº 004*, wider than the design's two digits: its column takes it whole. */
.py-screen.py-tm .py-tm-card { grid-template-columns: max-content minmax(0, 1fr) auto; }
.py-screen.py-tm .py-tm-no { font-size: var(--py-s-1); white-space: nowrap; }
/* The clock's face says the branch's day above its hour. */
.py-screen.py-tm .py-tm-face .py-tm-day { font-family: var(--py-f-ui); font-stretch: 100%; font-weight: 600; font-size: var(--py-s--1); color: var(--py-ink-soft); }
/* The clock, live (docs/specs/access-control.md): what it holds dims while the server answers a press, nothing
   moving; the card whose pass the clock holds, and the card a used pass brings into «Ya entraron», are one element
   travelling between the racks in the swap's view transition (HTMX-320), one name each side; reduced motion moves
   nothing (py.css's rule). */
.py-screen.py-tm .py-tm-clock.py-is-pending .py-tm-sheet { opacity: 0.55; transition: opacity 0s 0.05s; }
.py-screen.py-tm .py-tm-is-pulled, .py-screen.py-tm .py-tm-is-arriving { view-transition-name: py-tm-card; }
/* The pulled card's name and number stay what a person can read (WCAG AA): its empty slot is the outline alone. */
.py-screen.py-tm .py-tm-is-pulled .py-tm-name, .py-screen.py-tm .py-tm-is-pulled .py-tm-no { opacity: 1; }
.py-screen.py-tm .py-tm-said { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-screen.py-tm .py-tm-said:empty { display: none; }
/* The link shown as text, in the design's own family with its monospace axis (Recursive's MONO), never a monospace
   no vendored face provides. */
.py-screen.py-tm code { font-family: var(--py-f-ui); --py-mono: 1; }