/* A small, shared guestbook with a real drawing surface. */
.wall-dialog { width: 660px; padding: 30px; }
.wall-dialog .dialog-header { margin-bottom: 22px; }
.wall-dialog .dialog-header .mono { display: block; font-size: 9px; margin-bottom: 8px; color: var(--soft); }
.wall-dialog .dialog-header h2 { font-size: 37px; }
.wall-dialog form { gap: 9px; }
.signature-pad { position: relative; height: 225px; background: #fffefa; border: 1px solid #c9c5ba; border-radius: 5px; overflow: hidden; }
#signature-canvas, #signature-smoke { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
#signature-canvas { touch-action: none; cursor: crosshair; z-index: 2; }
#signature-smoke { pointer-events: none; z-index: 3; }
.signature-guide { position: absolute; inset: 0; display: grid; place-items: center; font: italic 26px Georgia, serif; color: #aaa69b; transition: opacity .2s; pointer-events: none; }
.has-signature .signature-guide { opacity: 0; }
.signature-baseline { position: absolute; left: 24px; right: 24px; bottom: 40px; border-bottom: 1px dashed #ddd9ce; pointer-events: none; }
.signature-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.signature-hint { font: 8px/1.5 var(--mono); letter-spacing: .8px; color: var(--soft); }
.clear-signature { display: inline-flex; align-items: center; gap: 5px; padding: 8px 0 8px 8px; background: none; border: 0; font-size: 12px; white-space: nowrap; }
.clear-signature svg { width: 16px; height: 16px; }
.clear-signature:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 4px; }
.clear-signature:disabled { opacity: .35; cursor: default; }
.wall-dialog label { margin-top: 4px; }
.wall-dialog label span { font-weight: 400; color: var(--soft); font-size: 11px; }
.wall-dialog textarea { resize: vertical; max-height: 160px; }
.wall-dialog .signature-disclosure { font-size: 11px; margin: 6px 0 0; line-height: 1.5; }
.wall-dialog .signature-status { min-height: 18px; font-size: 12px; margin: 0; color: var(--soft); }
#save-signature { width: 100%; margin-top: 5px; }
#save-signature:disabled { opacity: .45; box-shadow: none; transform: none; cursor: default; }
.wall-signatures { gap: 24px; align-items: flex-start; }
.signature-card { width: 225px; max-width: 100%; background: var(--white); color: var(--ink); padding: 12px 18px 18px; }
.signature-card svg { display: block; width: 100%; height: 110px; stroke: none; border-bottom: 1px solid var(--line); margin-bottom: 13px; }
.signature-card strong { font: 600 12px var(--display); margin-bottom: 6px; letter-spacing: -.1px; }
.signature-card p { color: var(--soft); font-size: 12px; line-height: 1.5; margin: 7px 0 12px; }
.signature-card span { color: var(--soft); font-size: 8px; }
.legacy-note { opacity: .7; }
.legacy-note span { font-size: 7px; }
.pixel-icon svg { text-shadow: none; fill: none; }
.footer-bottom { border-bottom: 0; min-height: 130px; padding: 0 4px 0 0; align-items: flex-end; }
.footer-bottom > .mono { padding-bottom: 22px; }
.cat.pixel-cat { width: 88px; height: 108px; position: relative; bottom: -2px; padding: 0; margin-right: 25px; overflow: visible; }
.cat.pixel-cat { translate: var(--cat-walk-x, 0px) 0; transition: translate 1.05s cubic-bezier(.25, .7, .3, 1); }
.cat.pixel-cat.is-walking svg { animation: cat-walk .22s steps(2, end) infinite; }
@keyframes cat-walk { 50% { transform: translateY(-3px); } }
.cat.pixel-cat svg { display: block; width: 88px; height: 100px; position: absolute; bottom: -6px; left: 0; stroke: none; image-rendering: pixelated; }
.cat.pixel-cat .cat-bubble { position: absolute; top: -25px; left: -3px; right: auto; padding: 8px 11px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font: 12px/1 var(--mono); rotate: 0deg; white-space: nowrap; opacity: 0; animation: cat-chat 7s infinite; }
.cat-bubble::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--white); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); bottom: -4px; right: 13px; transform: rotate(45deg); }
.pixel-mouth { transform-box: fill-box; transform-origin: center; animation: cat-talk 7s steps(2, end) infinite; }
.pixel-cat-eyes { transform-box: fill-box; transform-origin: center; animation: cat-blink 6s infinite; }
.cat.pixel-cat.is-meowing .cat-bubble { animation: meow-pop 1.6s both; }
.is-meowing .pixel-mouth { animation: cat-chatter .2s steps(2, end) infinite; }
@media (max-height: 800px) and (min-width: 651px) {
 .wall-dialog { padding: 20px 26px; max-height: calc(100dvh - 24px); }
 .wall-dialog .dialog-header { margin-bottom: 14px; }
 .wall-dialog .dialog-header h2 { font-size: 31px; }
 .wall-dialog form { gap: 6px; }
 .signature-pad { height: 160px; }
 .signature-tools { margin-bottom: 3px; }
 .wall-dialog input { padding-block: 9px; }
 .wall-dialog textarea { height: 55px; min-height: 55px; padding-block: 9px; }
 .wall-dialog .signature-disclosure { margin-top: 2px; }
 .wall-dialog .signature-status { min-height: 14px; }
}
@keyframes cat-chat { 0%, 12% { opacity: 0; translate: 0 4px; } 16%, 42% { opacity: 1; translate: 0 0; } 47%, 100% { opacity: 0; translate: 0 -3px; } }
@keyframes cat-talk { 0%, 15%, 45%, 100% { transform: scaleY(1); } 18%, 24%, 30%, 36%, 42% { transform: scaleY(3); } 21%, 27%, 33%, 39% { transform: scaleY(1); } }
@keyframes cat-chatter { to { transform: scaleY(3); } }
@keyframes cat-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.15); } }
@keyframes meow-pop { 0% { opacity: 0; translate: 0 5px; } 12%, 86% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -4px; } }
@media (max-width: 650px) {
 .wall-dialog { width: 100%; padding: 22px; max-height: calc(100dvh - 28px); overflow-y: auto; }
 .wall-dialog .dialog-header h2 { font-size: 31px; }
 .signature-pad { height: 195px; }
 .signature-guide { font-size: 23px; }
 .signature-hint { font-size: 6.7px; letter-spacing: .3px; max-width: 115px; }
 .clear-signature { font-size: 11px; }
 .signature-card { width: min(210px, 100%); }
 .cat.pixel-cat { margin-right: 13px; }
}
@media (prefers-reduced-motion: reduce) {
 .cat.pixel-cat { transition: none; }
 .cat.pixel-cat.is-walking svg { animation: none; }
 .pixel-cat-eyes, .pixel-mouth, .cat.pixel-cat .cat-bubble { animation: none; }
 .cat.pixel-cat .cat-bubble { opacity: 1; }
 .cat.pixel-cat.is-meowing .cat-bubble { animation: none; opacity: 1; }
}

.wall-header { display:flex; justify-content:space-between; align-items:center; gap:45px; max-width:1280px; margin:0 auto 40px; text-align:left; }
.wall-heading { max-width:600px; }
.wall-heading > .mono { font-size:9px; color:var(--soft); letter-spacing:1px; }
.wall-heading h2 { margin:14px 0 0; line-height:1.1; }
.wall-action { text-align:right; flex:0 1 370px; }
.wall-action .wall-note { margin:15px 0 0; line-height:1.7; }
.signature-colour-field { padding:0; border:0; margin:0 0 12px; min-width:0; }
.signature-colour-field legend { font-size:11px; color:var(--soft); margin-bottom:11px; }
.signature-colors { display:flex; align-items:center; gap:14px; padding:4px; }
.wall-dialog .ink-choice { position:relative; display:block; margin:0; cursor:pointer; padding:0; }
.wall-dialog .ink-choice input { position:absolute; opacity:0; width:1px; height:1px; padding:0; margin:0; }
.ink-swatch { display:grid; place-items:center; width:27px; height:27px; border:2px solid #fffefa; box-shadow:0 0 0 1px #24231f25; border-radius:50%; background:var(--ink-colour); outline:1px solid transparent; outline-offset:4px; }
.ink-choice input:checked + .ink-swatch { outline-color:var(--ink); }
.ink-choice input:checked + .ink-swatch::after { content:'✓'; color:#fffefa; font:13px Arial; }
.ink-choice input:focus-visible + .ink-swatch { outline:2px solid var(--primary); }
@media(max-width:650px) {
 .wall-header { align-items:flex-start; gap:20px; flex-direction:column; }
 .wall-heading h2 { max-width:340px; }
 .wall-action { flex:auto; text-align:right; align-self:flex-end; max-width:310px; }
 .signature-colors { gap:15px; }
}

/* Give the wall title priority and keep its desktop scale compact. */
.wall-heading { max-width:none; flex:1 1 auto; min-width:0; }
.wall-heading h2 { font-size:32px; text-wrap:pretty; }
.wall-action { flex:0 0 285px; }
@media(min-width:901px) { .wall-heading h2 { font-size:clamp(24px,2.15vw,32px); } }
@media(min-width:651px) and (max-width:900px) {
 .wall-header { gap:24px; }
 .wall-heading h2 { font-size:clamp(22px,3vw,27px); }
 .wall-action { flex-basis:220px; }
}
@media(max-width:650px) {
 .wall-heading { width:100%; }
 .wall-heading h2 { max-width:none; font-size:clamp(24px,5vw,30px); }
 .wall-action { flex:initial; }
}

/* Stepped paper corners and theme-aware ink for saved signatures. */
.signature-card {
 border-radius:0;
 clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px),0 12px,12px 12px);
 box-shadow:inset 0 -3px 0 #24231f0a;
 padding-top:18px;
}
.dark .signature-card svg path { stroke:var(--signature-dark-ink,#e8e5db); }

.dark .signature-pad { background:#30312c; border-color:#57594f; }
.dark .signature-guide { color:#999c90; }
.dark .signature-baseline { border-bottom-color:#626457; }
.dark .ink-swatch { background:var(--ink-colour-dark); border-color:#30312c; box-shadow:0 0 0 1px #ffffff25; }
.dark .ink-choice input:checked + .ink-swatch::after { color:#24231f; }

/* The label and introduction share the top row; the title and button follow. */
.wall-header { display: grid; grid-template-columns: minmax(0, 1fr) 285px; grid-template-areas: 'label .' 'title action'; align-items: start; column-gap: 32px; row-gap: 14px; }
.wall-heading, .wall-action { display: contents; }
.wall-heading > .mono { grid-area: label; }
.wall-heading h2 { grid-area: title; margin: 0; }
.wall-action .wall-note { grid-area: note; margin: 0; line-height: 1.5; text-align: right; }
.wall-action #sign-wall { grid-area: 1 / 2 / 3 / 3; justify-self: end; align-self: center; }
@media (max-width: 900px) and (min-width: 651px) { .wall-header { grid-template-columns: minmax(0, 1fr) 220px; column-gap: 24px; } }
@media (max-width: 650px) {
 .wall-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: 'label .' 'title title' '. action'; gap: 14px 16px; }
 .wall-heading h2 { max-width: none; }
 .wall-action #sign-wall { grid-area: action; }
 .wall-action .wall-note { font-size: 11px; }
}

.wall-status { color: var(--soft); font-size: 12px; text-align: center; }
.wall-status:empty { display: none; }

/* The tail has its own pixel shape so the seated cat can wag naturally. */
.pixel-cat-tail { transform-box: fill-box; transform-origin: 90% 90%; animation: cat-tail-wag 3.2s ease-in-out infinite; }
.cat.pixel-cat.is-meowing .pixel-cat-tail, .cat.pixel-cat.is-walking .pixel-cat-tail { animation: cat-tail-wag .5s ease-in-out infinite; }
@keyframes cat-tail-wag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .pixel-cat-tail, .cat.pixel-cat.is-meowing .pixel-cat-tail, .cat.pixel-cat.is-walking .pixel-cat-tail { animation: none; } }