/* The profile menu (js/profile-menu.js): the signed-in avatar and its dropdown, one look on every page that has it. */
html:not(.is-in) .pm { display: none; }
.pm { position: relative; display: inline-flex; }
.pm .pm-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px; cursor: pointer; color: #F5E5C4; font: inherit; border-radius: 999px; }
.pm-trigger:focus-visible { outline: 2px solid #F3CE46; outline-offset: 3px; }
.pm-av { width: 32px; height: 32px; border-radius: 50%; background: #F3CE46; color: #002E2B; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.pm-caret { width: 14px; height: 14px; transition: transform .2s; }
.pm-trigger[aria-expanded="true"] .pm-caret { transform: rotate(180deg); }
.pm-menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: 300; min-width: 230px; max-width: calc(100vw - 32px); background: #FFFDF7; border: 2px solid #002E2B; border-radius: 14px; box-shadow: 4px 4px 0 #002E2B; padding: 6px; text-align: left; }
.pm-menu[hidden] { display: none; }
.pm-head { padding: 10px 12px 10px; border-bottom: 1px solid rgba(0,46,43,.14); margin-bottom: 6px; }
.pm-name:empty { display: none; }
.pm-name { display: block; font-size: 15px; font-weight: 700; color: #002E2B; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-email { display: block; font-size: 13px; color: rgba(0,46,43,.72); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.pm .pm-menu .pm-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: #002E2B; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; text-align: left; }
.pm .pm-menu .pm-item:hover, .pm .pm-menu .pm-item:focus-visible { background: #F5E5C4; outline: none; }
.pm .pm-menu .pm-item svg { width: 18px; height: 18px; flex-shrink: 0; }
