main.container, footer.container { max-width: 48rem; padding: 1rem; }
[hidden] { display: none !important; }
.app-header { display: flex; align-items: flex-start; gap: var(--pico-spacing); margin-bottom: var(--pico-typography-spacing-vertical); }
.app-header h1 { flex: 1; min-width: 0; margin-bottom: 0; overflow-wrap: anywhere; }
#logout, #changelog, #help { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; min-height: 44px; margin: 0; }
#logout svg, #changelog svg, #help svg { flex: none; }
#changelog > i, #help > i { display: inline-flex; }
#changelog, #help { padding: .5rem; }
#login { display: block; margin-top: calc(4 * var(--pico-spacing)); margin-inline: auto; min-height: 44px; }
@media (width < 576px) {
  #logout { padding: .5rem; }
  #logout span { display: none; }
}
.changelog-page h2, .help-page h2 { margin-top: calc(2 * var(--pico-spacing)); }
.changelog-page li, .help-page li { margin-bottom: calc(.5 * var(--pico-spacing)); }
.changelog-page code, .help-page code { overflow-wrap: anywhere; }
.help-page header a { display: inline-flex; align-items: center; min-height: 44px; }
.changelog-notice { padding: var(--pico-spacing); border-left: var(--pico-outline-width) solid var(--pico-primary); background-color: var(--pico-code-background-color); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#character-check { font-weight: 700; }
#character-check[data-result="ok"] { color: var(--pico-ins-color); }
#character-check[data-result="warning"] { color: var(--pico-del-color); }
.character-non-ascii { color: var(--pico-primary); }
.character-digit { color: var(--pico-ins-color); }
.character-symbol { color: var(--pico-del-color); }
.character-suspicious { text-decoration: underline dotted; text-underline-offset: .2em; }
.character-control { background: var(--pico-mark-background-color); color: var(--pico-mark-color); }
#character-findings-list li { overflow-wrap: anywhere; }
#copy-plaintext, #character-findings-summary { min-height: 44px; }
#plaintext { unicode-bidi: plaintext; padding: var(--pico-spacing); }
#copy-plaintext { margin-bottom: calc(var(--pico-spacing) / 4); }
#plaintext-copy-status { margin-bottom: 0; }
#character-scan { margin-top: var(--pico-spacing); }
.character-scan-group { margin-bottom: var(--pico-spacing); }
.character-scan-group > p { margin: 0; }
.character-scan-group > p + p { margin-top: calc(var(--pico-spacing) / 4); }
#plaintext:focus-visible { outline: var(--pico-outline-width) solid var(--pico-primary); outline-offset: .2rem; }
#selected li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
#selected span { flex: 1; }
#selected button, #results a { min-height: 44px; min-width: 44px; }
#search { width: 100%; min-height: 44px; anchor-name: --recipient-search; }
/* Blades supplies popover colors, borders, shadow and option hover styling. */
#results { max-width: calc(100vw - 2rem); min-width: 0; max-height: min(18rem, 40dvh); overflow-y: auto; white-space: normal; }
@supports (position-area: bottom) {
  #results { position-anchor: --recipient-search; width: anchor-size(width); }
}
#results a span { display: block; }
#results li a { display: flex; align-items: center; gap: .75rem; }
#results a > .recipient-avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; border-radius: 50%; overflow: hidden; font-style: normal; background-color: var(--pico-dropdown-hover-background-color); color: var(--pico-dropdown-color); }
#results .recipient-avatar img { width: 40px; height: 40px; max-width: 40px; margin: 0; object-fit: cover; }
#results .recipient-details { min-width: 0; }
#results a[aria-selected="true"] { background-color: var(--pico-dropdown-hover-background-color); outline: var(--pico-border-width) solid var(--pico-primary); outline-offset: calc(-1 * var(--pico-border-width)); }
#selected span, #results a { overflow-wrap: anywhere; min-width: 0; }
#captcha { max-width: 100%; overflow: auto; }
#share-link, #share-copy-text { min-width: 0; font-family: var(--pico-font-family-monospace); overflow-wrap: anywhere; white-space: pre-wrap; resize: none; }
.fingerprint { overflow-wrap: anywhere; }
#created-dismiss { min-width: 44px; min-height: 44px; }
#created > article > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pico-spacing); }
#created > article > footer button { min-width: 44px; min-height: 44px; margin: 0; }