/*
 * Teodora Ravelle: CHIP IN. The page opens on a dollar drawn as a 10 x 10 halftone screen (one
 * dot per cent, coloured by where it goes) beside the title and the concept banner; then the ink
 * panel; then last month's
 * spending sheet as a till receipt beside the rules; then the questions.
 */
.tr-banner {
    justify-self: start; display: inline-flex; align-items: center; gap: var(--s-space-m);
    margin-top: var(--s-space-s); padding: var(--s-space-m) var(--s-space-l);
    background: var(--s-ink); color: var(--s-bright);
    font: var(--s-weight-black) var(--s-size-button-s)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
    transform: skewX(var(--s-skew)); box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise);
    max-width: var(--s-measure-body);
}

/* ---- The opening: the dollar, printed dot by dot, is the first thing on the page ---------- */
.tr-donhead {
    padding: var(--s-space-3xl) var(--s-gutter) var(--s-section-s);
    border-bottom: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-donhead__inner {
    max-width: var(--s-max); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-space-4xl); align-items: center;
}
.tr-donhead__copy { order: 2; display: grid; gap: var(--s-space-l); justify-items: start; }
.tr-donhead .tr-dollar {
    order: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: end; column-gap: var(--s-space-xl);
    padding: var(--s-space-xl); background: var(--s-paper-deep);
    box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise); transform: rotate(var(--s-tilt-a));
}
.tr-donhead .tr-dollar__cap { grid-column: 1 / -1; }
.tr-donhead .tr-dots { padding: 0; background: none; gap: var(--s-space-2xs); }

.tr-give {
    display: grid; justify-items: center;
    padding: var(--s-section-s) max(var(--s-gutter), calc((100% - var(--s-max)) / 2)) var(--s-section);
}
.tr-give__panel { width: min(100%, calc(var(--s-max) * 0.72)); }
.tr-give__panel { display: grid; gap: var(--s-space-2xl); padding: var(--s-space-3xl); background: var(--s-ink); box-shadow: var(--s-shadow-x) var(--s-shadow-y) 0 var(--s-cerise); }
.tr-chip--large .tr-amount__face { min-width: calc(var(--s-amount-w) * 1.3); min-height: calc(var(--s-tap-l) * 1.4); }

.tr-dollar { display: grid; gap: var(--s-space-l); }
.tr-dollar__note { color: var(--s-ink-soft); font-size: var(--s-size-small); margin-top: var(--s-space-xs); }
.tr-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s-space-xs); padding: var(--s-space-l); background: var(--s-paper-deep); }
.tr-dots__d { display: block; aspect-ratio: 1; border-radius: 50%; transition: transform var(--s-dur) var(--s-ease-drop), opacity var(--s-dur-fast) var(--s-ease); }
.tr-dots__d--0 { background: var(--s-cerise); }
.tr-dots__d--1 { background: var(--s-ink); }
.tr-dots__d--2 { background: radial-gradient(circle, var(--s-cerise) var(--s-dot-hover), transparent calc(var(--s-dot-hover) + 1%)) center / var(--s-dot-cell) var(--s-dot-cell), var(--s-screen); box-shadow: inset 0 0 0 var(--s-rule) var(--s-cerise); }
.tr-dots__d--3 { background: var(--s-paper); box-shadow: inset 0 0 0 var(--s-rule-mark) var(--s-ink); }
.tr-dots__d--4 { background: var(--s-ink-soft); transform: scale(0.6); }
.tr-dots.is-focus .tr-dots__d { opacity: 0.2; }
.tr-dots.is-focus .tr-dots__d.is-hit { opacity: 1; transform: scale(1.12); }
.tr-motion .tr-dots.is-printing .tr-dots__d { animation: tr-dot var(--s-dur) var(--s-ease-drop) both; animation-delay: calc(var(--s-dur-fill-gap) * 0.12 * var(--tr-i)); }
@keyframes tr-dot { from { transform: scale(0); } }
.tr-dollar__key { display: grid; gap: var(--s-space-2xs); }
.tr-dollar__key li {
    display: grid; grid-template-columns: var(--s-space-l) minmax(0, 1fr) auto; gap: var(--s-space-m); align-items: center;
    min-height: var(--s-tap); padding: 0 var(--s-space-s); cursor: default;
    border-bottom: var(--s-rule) solid var(--s-ink-faint);
}
.tr-dollar__key li:hover, .tr-dollar__key li:focus-visible { background: var(--s-screen); }
.tr-dollar__key .tr-dots__d { width: var(--s-space-l); }
.tr-dollar__label { font-size: var(--s-size-small); }
.tr-dollar__share { font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-solid) var(--s-font-display); font-variant-numeric: tabular-nums; text-align: right; }

/* The receipt: narrow, perforated top and bottom, monospaced by tabular figures */
.tr-sheetsec {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-space-4xl); align-items: start;
    padding: var(--s-section) max(var(--s-gutter), calc((100% - var(--s-max)) / 2));
    background: var(--s-paper-deep); border-block: var(--s-rule-heavy) solid var(--s-ink);
}
.tr-receipt {
    position: relative; display: grid; gap: var(--s-space-l);
    padding: var(--s-space-2xl) var(--s-space-xl);
    background: var(--s-paper); transform: rotate(var(--s-tilt-b));
    box-shadow: 0 var(--s-space-xs) var(--s-space-l) var(--s-ink-shade);
    -webkit-mask: radial-gradient(circle at 50% 0, transparent var(--s-perf-dot), var(--s-ink) calc(var(--s-perf-dot) + 0.5px)) 0 0 / var(--s-perf) 100%;
            mask: radial-gradient(circle at 50% 0, transparent var(--s-perf-dot), var(--s-ink) calc(var(--s-perf-dot) + 0.5px)) 0 0 / var(--s-perf) 100%;
}
.tr-receipt__h { font: var(--s-weight-black) var(--s-size-h3)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase; text-align: center; padding-bottom: var(--s-space-m); border-bottom: var(--s-rule-mark) dashed var(--s-ink); }
.tr-receipt__t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tr-receipt__t th, .tr-receipt__t td { padding: var(--s-space-xs) 0; text-align: left; vertical-align: baseline; font-size: var(--s-size-small); }
.tr-receipt__t tbody th { font-weight: var(--s-weight-regular); padding-right: var(--s-space-m); }
.tr-receipt__t thead th { 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-receipt__t .tr-receipt__out { text-align: right; white-space: nowrap; }
.tr-receipt__t td.tr-receipt__out { font: var(--s-weight-black) var(--s-size-button-s)/var(--s-leading-solid) var(--s-font-display); }
.tr-receipt__t tfoot th, .tr-receipt__t tfoot td { padding-top: var(--s-space-m); border-top: var(--s-rule-mark) dashed var(--s-ink); font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-solid) var(--s-font-display); text-transform: uppercase; }
.tr-receipt__t tfoot td.tr-receipt__out { color: var(--s-cerise-ink); font-size: var(--s-size-figure); }
.tr-receipt__in { font-style: italic; font-size: var(--s-size-small); color: var(--s-ink-soft); text-align: center; }
.tr-rules { display: grid; gap: var(--s-space-2xl); }
.tr-rules__list { display: grid; gap: var(--s-space-l); counter-reset: rule; }
.tr-rules__list li { display: grid; grid-template-columns: var(--s-space-3xl) minmax(0, 1fr); gap: var(--s-space-m); align-items: baseline; font-size: var(--s-size-lede); max-width: var(--s-measure-body); }
.tr-rules__n { font: var(--s-weight-black) var(--s-size-figure)/var(--s-leading-solid) var(--s-font-display); color: var(--s-cerise); }

.tr-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--s-space-2xl) var(--s-space-4xl); align-items: start; padding: var(--s-section) max(var(--s-gutter), calc((100% - var(--s-max)) / 2)); }
.tr-faq__list { display: grid; border-top: var(--s-rule-heavy) solid var(--s-ink); }
.tr-faq__q { border-bottom: var(--s-rule) solid var(--s-ink-faint); }
.tr-faq__q summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-space-m);
    min-height: var(--s-tap-l); padding: var(--s-space-m) 0; cursor: pointer; list-style: none;
    font: var(--s-weight-black) var(--s-size-button)/var(--s-leading-tight) var(--s-font-display); text-transform: uppercase;
}
.tr-faq__q summary::-webkit-details-marker { display: none; }
.tr-faq__q summary::after { content: ""; flex: none; width: var(--s-space-l); height: var(--s-space-l); background: linear-gradient(var(--s-cerise), var(--s-cerise)) center / 100% var(--s-rule-heavy) no-repeat, linear-gradient(var(--s-cerise), var(--s-cerise)) center / var(--s-rule-heavy) 100% no-repeat; transition: transform var(--s-dur) var(--s-ease); }
.tr-faq__q[open] summary::after { transform: rotate(45deg); }
.tr-faq__q p { padding-bottom: var(--s-space-l); max-width: var(--s-measure-body); color: var(--s-ink-soft); }
.tr-faq > .tr-slab { grid-column: 2; justify-self: start; }

@media (max-width: 1079px) {
    .tr-donhead__inner { grid-template-columns: 1fr; gap: var(--s-space-2xl); }
    .tr-donhead .tr-dollar { grid-template-columns: 1fr; }
    .tr-sheetsec, .tr-faq { grid-template-columns: 1fr; gap: var(--s-space-2xl); }
    .tr-faq > .tr-slab { grid-column: 1; }
}
@media (max-width: 719px) {
    .tr-banner { transform: none; }
    .tr-give { padding: var(--s-space-2xl) 0 var(--s-section-s); }
    .tr-give__panel { padding: var(--s-space-2xl) var(--s-gutter); box-shadow: none; }
    .tr-donhead { padding: var(--s-space-2xl) var(--s-gutter) var(--s-section-s); }
    /* Phone: the title, then straight to the dollar; the banner and the words follow it. */
    .tr-donhead__inner { row-gap: var(--s-space-l); }
    .tr-donhead__copy { display: contents; }
    .tr-donhead .tr-dollar { order: 0; padding: var(--s-space-m); transform: none; }
    .tr-donhead .tr-banner { order: 1; }
    .tr-donhead .tr-lede { order: 2; }
    .tr-donhead .tr-arrow { order: 3; }
    .tr-dots { gap: var(--s-space-2xs); padding: var(--s-space-s); }
    .tr-sheetsec, .tr-faq { padding: var(--s-section-s) var(--s-gutter); }
    .tr-receipt { transform: none; padding: var(--s-space-xl) var(--s-space-l); }
    .tr-faq > .tr-slab { justify-self: stretch; }
}