/* Compact till slip on desktop and mobile. Long expanded notes can still scroll. */
html:root #receiptDialog{border-radius:24px}
/* Clip the painted border as well as the paper; border-radius alone doesn't
   round border-image artwork. Keep the same soft corners on both layouts. */
html:root #receiptDialog .receipt-paper{border-radius:24px;clip-path:inset(0 round 24px)}
#receiptDialog .slip-notes{margin-top:6px;text-align:left}
#receiptDialog .slip-notes>summary{cursor:pointer;min-height:44px;align-content:center;padding:8px 0;color:var(--rose-ink)}
#receiptDialog .slip-notes>summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
 html:root #receiptDialog{width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:0 0 6px;overflow:hidden}
 html:root #receiptDialog[open]{display:flex;flex-direction:column}
 html:root #receiptDialog .receipt-paper{flex:0 1 auto;min-height:0;padding:14px 18px 16px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 html:root #receiptDialog .receipt-brand{padding:0 34px 8px}
 html:root #receiptDialog .receipt-brand .cafe-logo{width:168px;max-width:100%;height:auto;margin:0 auto}
 html:root #receiptDialog #receiptClose{top:7px;right:7px;width:44px;height:44px}
 html:root #receiptDialog .slip-meta{padding:5px 0}
 html:root #receiptDialog .slip-line{margin:3px 0;line-height:1.3;gap:8px}
 html:root #receiptDialog .slip-line>strong{flex-shrink:1;min-width:0}
 html:root #receiptDialog .slip-drink{padding:8px 0}
 html:root #receiptDialog .slip-drink>strong{margin:0}
 html:root #receiptDialog .slip-items :is(th,td){padding-block:3px!important;line-height:1.3}
 html:root #receiptDialog .slip-items th:first-child{width:24px}
 html:root #receiptDialog .slip-items th:last-child{width:66px}
 html:root #receiptDialog .slip-fill{padding:5px 0}
 html:root #receiptDialog .slip-scores{padding:6px 0 0}
 html:root #receiptDialog .slip-total{margin:6px 0 0;padding:6px 0 0}
 html:root #receiptDialog .slip-total>strong{font-size:24px!important}
 html:root #receiptDialog .slip-rank{margin:2px 0}
 html:root #receiptDialog .coin-payment{padding:5px 0}
 html:root #receiptDialog .slip-feedback{margin:4px 0 0;padding:0;border:0}
 html:root #receiptDialog .slip-feedback p{margin:5px 0;font-size:var(--type-note)!important}
 html:root #receiptDialog .slip-footer{margin:5px 0 0;padding:0;border:0}
 html:root #receiptDialog .slip-footer .slip-stamp:not(.slip-stamp-retry){display:none}
 html:root #receiptDialog .slip-footer p{margin:6px 0 0}
 html:root #receiptDialog .slip-seasonal-heading{grid-template-columns:28px minmax(0,1fr) 28px;padding:3px 0 5px}
 html:root #receiptDialog .slip-seasonal-heading small,html:root #receiptDialog .slip-seasonal-heading:before,html:root #receiptDialog .slip-footer:after{display:none}
 html:root #receiptDialog .slip-seasonal-sticker{width:28px;height:28px}
 html:root #receiptDialog .batch-recipe{padding:6px 0}
 html:root #receiptDialog .batch-recipe h3,html:root #receiptDialog .batch-recipe p{margin:3px 0}
 html:root #receiptDialog .batch-drink{padding:8px 0}
 html:root #receiptDialog .batch-drink p{font-size:var(--type-note)!important}
 /* Keep a containing block for the painted button's absolute pseudo-element. */
 html:root #receiptDialog #receiptNext{position:relative;bottom:auto;flex:none;min-height:44px;width:calc(100% - 12px);padding:10px;margin:6px 6px 3px}
 html:root #receiptDialog #receiptNext:before{inset:0}

/* Keep desktop copy at the same compact, readable size as the phone slip. */
@media(min-width:761px){
 html:root #receiptDialog{--type-note:12px;--type-body:14px;--type-display:24px}
}