/* Controls refinements. Existing copy nodes remain stable for the studio. */
html{scroll-padding-top:24px;scrollbar-color:var(--line,#b8bdb2) var(--sheet,#f7f6f2)}
::selection{background:#b8472d;color:#fff}
:where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #c85b3f;outline-offset:4px}
button:disabled{cursor:wait;opacity:.55}
footer a[href="admin"],footer a[href="/admin"],footer a[href="admin.html"]{display:none}
html:not(.admin-mode) .header>.button{visibility:visible;min-height:44px;white-space:nowrap}
html:not(.admin-mode) .cursor-toolbar{top:auto;bottom:80px;right:18px}
.button{min-height:52px;border-radius:10px;font-size:14px;line-height:1.35;gap:24px;transition:background .18s,box-shadow .18s,transform .18s}
.button.coral{background:#b8472d;color:#fff;box-shadow:inset 0 1px 0 #ffffff30,0 6px 16px #74372322}
.button.coral:hover{background:#a63b24;box-shadow:inset 0 1px 0 #ffffff30,0 8px 20px #74372330;transform:translateY(-2px)}
.button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #0002}
.button.dark{background:#29493b;color:#fff}
.button.dark:hover{background:#1d382d;transform:translateY(-2px)}
.chip,.mood-buttons button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px}
.text-link{min-height:44px}
.paper-photo>span:not(.real-pin){max-width:calc(100% - 98px)}
.close-dialog,.gift-dialog .close-dialog{width:44px;height:44px;min-width:44px;padding:0;top:12px;right:12px;border:1px solid var(--line,#d7d9ce);background:var(--sheet,#f7f6f2);color:var(--ink,#252a29);border-radius:50%;font-size:0;display:grid;place-items:center;transition:background .18s,transform .18s}
.close-dialog:before,.close-dialog:after{content:'';position:absolute;width:16px;height:1.8px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.close-dialog:after{transform:rotate(-45deg)}
.close-dialog:hover{background:var(--control,#e6e8de);transform:rotate(6deg)}
dialog h2{padding-right:34px}
.story-dialog .close-dialog{background:#f7f6f2;color:#252a29;border-color:#deded5}
.story-controls{flex-wrap:wrap}
.story-controls>div{min-width:0}
.admin-mode .admin-dialog input[type=password]{display:block;width:100%;margin:10px 0 18px;padding:12px;border:1px solid #bbb;border-radius:5px;background:#fafafa;color:#222}
.admin-mode .admin-dialog{scroll-padding:20px;overscroll-behavior:contain}
.admin-mode .admin-dialog h2{padding-right:46px}
.admin-mode .admin-bar button,.admin-mode .admin-bar a{min-height:36px}
@media(max-width:1000px){html:not(.admin-mode) .header nav{gap:16px}.header .logo{flex-shrink:0}.header .site-name{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(min-width:621px) and (max-width:1000px){html:not(.admin-mode) .desk-intro h1{font-size:clamp(32px,4vw,40px);line-height:1.12;letter-spacing:-.03em}}
@media(max-width:620px){
 html:not(.admin-mode) .header>.button{display:none}
 .header .menu{margin-left:auto;min-width:44px;min-height:44px}
 html:not(.admin-mode) .cursor-toolbar{left:12px;right:auto;bottom:14px;padding:5px}
 .cursor-toolbar>span{display:none}.cursor-toolbar button{width:40px;height:40px}
 .weather-panel{position:relative;left:auto;bottom:auto;top:auto;right:auto;margin:20px 12px 88px;width:calc(100% - 24px)}
 .button{min-height:50px;font-size:13px;padding:12px 20px;max-width:100%}
 dialog:not(.story-dialog){padding:28px 22px;max-height:calc(100dvh - 24px)}
 dialog h2{font-size:28px;padding-right:32px}
 .occasion-picker{grid-template-columns:1fr 1fr}.occasion-picker button{min-height:84px}
 .story-controls .button{min-height:44px}.story-controls{gap:10px}
 .admin-mode .admin-dialog{max-width:100vw;width:100vw}
 .admin-mode .admin-bar{gap:6px;padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){.button:hover,.close-dialog:hover{transform:none}}