/*
 * Teodora Ravelle: VOLUNTEER. A job board: four roles as printed job cards in a 2 x 2 grid, a
 * strip of seven dated days, three slots and a name; beside them the shift card (a stiff ink
 * card with a paper face) that fills in and gets stamped. Then the first shift on a clock rule.
 */
.tr-volstats { display: flex; flex-wrap: wrap; gap: var(--s-space-l) var(--s-space-3xl); margin-top: var(--s-space-l); }
.tr-volstats div { display: grid; }
.tr-volstats dt { order: 2; font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-ink-soft); }
.tr-volstats dd { order: 1; font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-cerise-ink); font-variant-numeric: tabular-nums; }

.tr-book {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-space-4xl); align-items: start;
    padding: var(--s-section-s) max(var(--s-gutter), calc((100% - var(--s-max)) / 2)) var(--s-section);
}
.tr-book__choose { display: grid; gap: var(--s-space-3xl); }
.tr-book__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-l); }
.tr-book__roles legend { grid-column: 1 / -1; }

/* A job card: a little printed handbill */
.tr-job { position: relative; display: grid; }
.tr-job input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: var(--s-z-lift); }
.tr-job__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-space-2xs) var(--s-space-m); align-content: start;
    min-height: 100%; padding: var(--s-space-l);
    background: var(--s-paper); box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-ink);
    transition: transform var(--s-dur) var(--s-ease-drop), box-shadow var(--s-dur-fast) var(--s-ease), background-color var(--s-dur-fast) var(--s-ease);
}
.tr-job__n { grid-row: span 3; font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-cerise); }
.tr-job__name { font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase; }
.tr-job__time { font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-cerise-ink); }
.tr-job__body { font-size: var(--s-size-small); color: var(--s-ink-soft); }
.tr-job input:hover + .tr-job__card { transform: translateY(var(--s-hover-lift)); box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-ink), var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-screen); }
.tr-job input:checked + .tr-job__card { background: var(--s-ink); color: var(--s-bright); transform: rotate(var(--s-tilt-a)); box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise); }
.tr-job input:checked + .tr-job__card .tr-job__body { color: var(--s-bright-soft); }
.tr-job input:checked + .tr-job__card .tr-job__time { color: var(--s-screen); }
.tr-job input:focus-visible + .tr-job__card { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }

/* The week strip */
.tr-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-space-2xs); margin-top: var(--s-space-s); }
.tr-day { position: relative; display: grid; }
.tr-day input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.tr-day > span {
    display: grid; justify-items: center; gap: var(--s-space-2xs);
    min-height: var(--s-tap-l); padding: var(--s-space-s) 0;
    box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-ink); background: var(--s-paper);
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}
.tr-day__dow { font: var(--s-weight-heavy) var(--s-size-micro)/var(--s-leading-solid) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; }
.tr-day__n { font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-solid) var(--s-font-display); font-variant-numeric: tabular-nums; }
.tr-day input:hover + span { background: var(--s-screen); }
.tr-day input:checked + span { background: var(--s-cerise); color: var(--s-bright); }
.tr-day input:focus-visible + span { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.tr-day input:disabled { cursor: not-allowed; }
.tr-day input:disabled + span {
    color: var(--s-ink-soft); box-shadow: inset 0 0 0 var(--s-rule) var(--s-ink-faint);
    background: linear-gradient(to top right, transparent calc(50% - var(--s-rule)), var(--s-ink-faint) 50%, transparent calc(50% + var(--s-rule))), var(--s-paper-deep);
}
.tr-book__slots { display: flex; flex-wrap: wrap; gap: var(--s-space-xs); }
.tr-book__slots legend { width: 100%; }
.tr-book__slots small { font-size: var(--s-size-micro); opacity: 0.75; }

/* The shift card */
.tr-card {
    position: sticky; top: calc(var(--s-nav-h) + var(--s-space-xl));
    display: grid; gap: var(--s-space-l);
    padding: var(--s-space-2xl) var(--s-space-xl);
    background: var(--s-paper-deep);
    box-shadow: inset 0 0 0 var(--s-space-xs) var(--s-ink), var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise);
    overflow: hidden;
}
.tr-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-space-m); font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-solid) var(--s-font-display); text-transform: uppercase; }
.tr-card__no { font-size: var(--s-size-button-s); color: var(--s-cerise-ink); }
.tr-card__rows { display: grid; }
.tr-card__rows div { display: grid; grid-template-columns: calc(var(--s-amount-w) * 0.9) minmax(0, 1fr); align-items: baseline; gap: var(--s-space-m); min-height: var(--s-ledger); padding: var(--s-space-xs) 0; border-bottom: var(--s-rule) dashed var(--s-ink-faint); }
.tr-card__rows dt { font: var(--s-weight-heavy) var(--s-size-label)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-ink-soft); }
.tr-card__rows dd { font: italic var(--s-weight-semi) var(--s-size-lede)/var(--s-leading-tight) var(--s-font-body); color: var(--s-cerise-ink); }
.tr-card__rows dd.is-blank { color: var(--s-ink-faint); }
.tr-card__rows dd.is-filled { animation: tr-write var(--s-dur-fill) var(--s-ease) both; }
@keyframes tr-write { from { opacity: 0; transform: translateX(calc(var(--s-hover-nudge) * -3)); } to { opacity: 1; transform: none; } }
.tr-card__stamp {
    position: absolute; right: var(--s-space-l); top: var(--s-space-4xl);
    padding: var(--s-space-xs) var(--s-space-m);
    font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-wide); text-transform: uppercase; color: var(--s-cerise);
    box-shadow: inset 0 0 0 var(--s-rule-heavy) var(--s-cerise);
    mix-blend-mode: multiply; opacity: 0; transform: rotate(var(--s-tilt-stamp));
    pointer-events: none;
}
.tr-card.is-booked .tr-card__stamp { opacity: 1; animation: tr-stamp var(--s-dur-stamp) var(--s-ease-drop) both; }
@keyframes tr-stamp { from { transform: scale(var(--s-stamp-from)) rotate(var(--s-tilt-stamp)); opacity: 0; } to { transform: rotate(var(--s-tilt-stamp)); opacity: 1; } }
.tr-card .tr-slab { justify-self: start; }
.tr-card__status { min-height: var(--s-size-body); font-size: var(--s-size-small); }
.tr-card__status.is-error { color: var(--s-cerise-ink); font-weight: var(--s-weight-bold); }
.tr-card__concept { font: var(--s-weight-heavy) var(--s-size-micro)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-ink-soft); }

/* The first shift, on a two-hour clock rule */
.tr-first { padding: var(--s-section) max(var(--s-gutter), calc((100% - var(--s-max)) / 2)); background: var(--s-ink); color: var(--s-bright); }
.tr-first .tr-h2 { color: var(--s-bright); margin-bottom: var(--s-space-3xl); max-width: none; }
.tr-clock { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-space-l); padding-top: var(--s-space-2xl); }
.tr-clock::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--s-space-m);
    background: repeating-linear-gradient(90deg, var(--s-bright) 0 var(--s-rule-mark), transparent var(--s-rule-mark) var(--s-space-l));
    border-bottom: var(--s-rule-heavy) solid var(--s-bright);
}
.tr-clock__m { display: grid; gap: var(--s-space-s); align-content: start; }
.tr-clock__at { font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-cerise); font-variant-numeric: tabular-nums; }
.tr-clock__m p { color: var(--s-bright-soft); max-width: var(--s-measure-narrow); }
.tr-motion .tr-clock__m[data-tr-reveal] { transition-delay: calc(var(--s-stagger) * var(--tr-i)); }

@media (max-width: 1079px) {
    .tr-book { grid-template-columns: 1fr; gap: var(--s-space-2xl); }
    .tr-card { position: relative; top: 0; }
    .tr-clock { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-space-2xl); }
}
@media (max-width: 719px) {
    .tr-book { padding: var(--s-space-2xl) var(--s-gutter) var(--s-section-s); }
    .tr-book__roles { grid-template-columns: 1fr; gap: var(--s-space-s); }
    .tr-job__card { padding: var(--s-space-m); }
    .tr-day__n { font-size: var(--s-size-button); }
    .tr-card { padding: var(--s-space-xl) var(--s-space-l); }
    .tr-card .tr-slab { justify-self: stretch; }
    .tr-first { padding: var(--s-section-s) var(--s-gutter); }
    .tr-clock { grid-template-columns: 1fr; padding: 0 0 0 var(--s-space-2xl); }
    .tr-clock::before { right: auto; bottom: 0; width: var(--s-space-m); height: auto; background: repeating-linear-gradient(var(--s-bright) 0 var(--s-rule-mark), transparent var(--s-rule-mark) var(--s-space-l)); border-bottom: 0; border-right: var(--s-rule-heavy) solid var(--s-bright); }
}