/* Demo 0.1.1: compact controls, with a large clear area left for marks. */
.stamp-controls{display:contents}.stamp-mobile-hint{display:none}
.joy-palette>button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none}
.joy-palette>button:before{content:'';display:block;width:14px;height:14px;border-radius:50%;background:var(--joy-ink)}
.joy-palette>button.is-found:before{outline:1px solid #35223d66;outline-offset:3px}
.joy-palette>button[aria-pressed=true]:before{outline:2px solid var(--ink);outline-offset:5px}
.rainbow-touch{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
@media(max-width:900px){
 .arrival:has(.stamp-panel:not([hidden])){height:100svh;min-height:660px}
 .arrival-header:has(.stamp-panel:not([hidden])) .stamp-tool{width:auto}
 .arrival:has(.stamp-panel:not([hidden])) .arrival-inner{padding:25px 24px 40px}
 .stamp-panel{position:fixed;top:auto;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100% - 24px));margin:0;padding:8px 10px;max-height:min(220px,calc(100svh - 140px));overflow:auto}
 .tool-heading{height:40px;min-height:40px;padding-right:112px}
 .tool-heading>span{font-size:7px;letter-spacing:.03em;white-space:nowrap}
 .tool-heading>button{position:absolute;top:6px;right:8px;width:44px;height:44px}
 .mark-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin-top:4px}
 .mark-options>button{width:100%;height:44px;min-height:44px;padding:10px}
 .stamp-controls{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px}
 .colour-options{margin:0;gap:0}
 .colour-options>button{width:44px;min-width:44px;height:44px}
 .tool-actions{gap:0}
 .tool-actions>button{min-width:44px;padding:8px 2px;font-size:10px}
 #stamp-keyboard{position:absolute;right:55px;top:6px;min-width:62px;min-height:44px}
 .stamp-panel>p{display:none}
 .stamp-panel>.stamp-mobile-hint{display:block;font-size:10px;margin:1px 0 3px;line-height:1.4}
}
@media(max-width:650px){
 .arrival:has(.stamp-panel:not([hidden])){min-height:690px}
 .arrival:has(.stamp-panel:not([hidden])) .arrival-inner{padding:15px 23px 30px}
}

@media(max-width:900px){body:has(.arrival.marking) .club-toast{bottom:calc(88px + var(--stamp-dock-height,173px) + env(safe-area-inset-bottom,0px))}}