/* Finish existing touch/focus patterns without changing the design system. */
.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:var(--pink);color:#281622;padding:12px;border-radius:8px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.avatar-btn{min-width:44px;min-height:44px;flex-shrink:0}
summary{min-height:44px;align-content:center;cursor:pointer}
button.btn,button.icon-btn,.select-inline{min-height:44px}
.icon-btn{min-width:44px}
.seg button,.nav button,.bottom-nav button{min-height:44px}
.row>div:last-child:has(>.btn){display:flex;flex-wrap:wrap;gap:6px}
.event-row>div:last-child{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.calendar-month{flex-wrap:wrap;align-items:center}
.calendar-month input{min-width:0;max-width:100%;min-height:44px}
.calendar-month .btn{flex-shrink:0}
.refresh-notice{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.refresh-notice>span{flex:1;min-width:170px}
.need-want-group{align-self:start}
#pageTitle:focus-visible,#modalTitle:focus-visible,#page:focus-visible{outline:3px solid var(--bright);outline-offset:4px;border-radius:3px}
.modal{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));scroll-padding-block:16px}
.modal-header{gap:12px}.modal-header h2{min-width:0}
@media(max-width:420px){.event-row{flex-wrap:wrap}.event-row .flex1{flex:1;min-width:0}.event-row>div:last-child{margin-left:auto}.calendar-month{gap:6px}.calendar-month .input{flex:1 1 150px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}