/* APRYL's button icons (apryl-icons.js) and the support / delete footers, right-aligned in every look. */
.apr-bi { display: inline-flex; flex: none; line-height: 0; }
.apr-bi svg { display: block; }
:where(.ask-apryl, .apx, .apm, .apm-page, .apc, .apw-tap, .apx-pick) :where(button.has-bi:not(.ask-apryl__back)) { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5em; }   /* zero specificity: the look's own rules (including the ones that hide a button) always win */
.apr-quiet, .apr-quiet .apr-bl { white-space: nowrap; }
.apc-pin[aria-pressed="true"] .apr-bi svg { fill: currentColor; }
.ask-apryl .ask-apryl__actions, .apx .apx-record__foot, .apm .apm-col__foot, .apm-page .apm-col__foot, .apc .apc-spine__foot { justify-content: flex-end; }
.ask-apryl__actions [data-a="confirm"], .apx-record__confirm, .apm-col__foot [data-r="ask"], .apc-spine__foot [data-s="ask"] { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.ask-apryl__actions [data-a="confirm"][hidden], .apx-record__confirm[hidden], .apm-col__foot [data-r="ask"][hidden], .apc-spine__foot [data-s="ask"][hidden] { display: none; }
html.apryl-portal .ask-apryl__actions, html.apryl-portal .apx-record__foot, html.apryl-portal .apm-col__foot, html.apryl-portal .apc-spine__foot { padding-right: calc(1.1rem + var(--apryl-portal-w, 0px)); }   /* clear of Ghost's Portal button */
/* a cited piece under Sources: its picture, small, with a soft corner (ask-apryl-render.js) */
.ask-apryl__cites li.has-thumb { display: flex; align-items: center; gap: 0.6rem; }
.apr-thumb { flex: none; width: 44px; height: 30px; border-radius: 7px; object-fit: cover; background: #15161d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
button.has-bi[hidden] { display: none !important; }

/* the quiet, icon-first buttons: the label opens on hover or focus (and on the first tap, apryl-icons.js) */
:is(.ask-apryl, .apx, .apm, .apm-page, .apc) button.apr-quiet { min-width: 36px; height: 36px; padding: 0 9px; gap: 0; }
.apr-bl { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width 0.25s ease, opacity 0.2s ease; }
button.apr-quiet:hover .apr-bl, button.apr-quiet:focus-visible .apr-bl, button.apr-quiet.is-open .apr-bl { max-width: 16em; opacity: 1; margin-inline-start: 0.5em; }
@media (hover: none) { button.apr-quiet:hover:not(.is-open) .apr-bl { max-width: 0; opacity: 0; margin: 0; } }
