/* Stroke-based icons stay consistent on iOS, Android and desktop. */
.ui-icon{display:inline-block;vertical-align:-.15em;width:20px;height:20px;flex:none;overflow:visible}
.button .ui-icon,.text-button .ui-icon,.greetings-notice .ui-icon{width:18px;height:18px}
.button span:has(>.ui-icon){display:inline-flex;align-items:center;justify-content:center;flex:none}
.circle-button{display:inline-flex;align-items:center;justify-content:center}
.circle-button .ui-icon{width:20px;height:20px}
.moment-open{display:grid;place-items:center}
.moment-open .ui-icon{width:20px;height:20px}
.greetings-page-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.greetings-page-controls .ui-icon{width:16px;height:16px}
/* Retain a 44px hit target without showing an automatic square focus outline. */
dialog .dialog-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent}
dialog .dialog-close .ui-icon{width:22px;height:22px}
dialog .dialog-close:focus,dialog .dialog-close:focus-visible{outline:none;box-shadow:none}
html.keyboard-navigation dialog .dialog-close:focus-visible{box-shadow:0 0 0 2px #bd8a4e;outline:none;border-radius:50%}
/* A date badge must size to its content instead of stretching with a grid row. */
#home>.anniversary-badge{align-self:start;justify-self:center;min-height:0;height:fit-content;max-height:36px;white-space:nowrap;flex-wrap:nowrap;flex-shrink:0}
@media(max-width:800px){#home.hero-official{align-content:start}}