/* Icon picker (icon_picker.py + icon-picker.js): a button showing the icon, and a popover with an emoji
   library, search and an upload. Every size is fixed or clamped, so nothing ever spills out of its box. */
.ip { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.ip-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: var(--fs-sm); flex: none; min-width: 0; }
.form .ip-field { margin-bottom: var(--s-4); }
.ip-label { white-space: nowrap; }
.ip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 42px; min-width: 64px; padding: 0 8px 0 10px;
  border: 0; border-radius: var(--r-sm); background: var(--surface-solid); color: var(--text); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--t-fast) var(--ease-liquid); font: inherit; }
.ip-btn:hover, .ip-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ip-cur { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; overflow: hidden; flex: none; }
.ip-emo { font-size: 22px; line-height: 1; white-space: nowrap; max-width: 28px; overflow: hidden; text-overflow: clip; text-align: center; }
.ip-emo.ip-txt { font-size: 11px; font-weight: 700; letter-spacing: -.02em; }
.ip-img { width: 28px; height: 28px; object-fit: contain; display: block; }
.ip-none { color: var(--text-faint); font-size: 18px; line-height: 1; }
.ip-caret { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.ip-pop { position: fixed; z-index: 1200; width: min(352px, calc(100vw - 16px)); max-height: min(440px, calc(100vh - 16px)); display: flex; flex-direction: column;
  background: var(--surface-solid); color: var(--text); border-radius: var(--r-md); box-shadow: var(--rim), var(--e-3); overflow: hidden;
  font: 400 var(--fs-sm)/1.3 var(--font-ui); animation: ip-in var(--t-fast) var(--ease-liquid); }
@keyframes ip-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ip-pop { animation: none; } }
.ip-top { padding: 10px 10px 6px; flex: none; }
.ip-q { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; min-width: 0; }
.ip-tabs { display: flex; justify-content: space-between; gap: 2px; padding: 0 8px 6px; flex: none; border-bottom: 1px solid var(--border); }
.ip-tab { flex: 1 1 0; min-width: 0; max-width: 34px; height: 32px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm);
  background: transparent; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.ip-tab:hover, .ip-tab[aria-selected="true"] { background: var(--accent-soft); }
.ip-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 8px; }
.ip-h { margin: 8px 4px 4px; font-size: var(--fs-xs); font-weight: 650; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-cells { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.ip-cell { aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm);
  background: transparent; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; overflow: hidden; color: var(--text); }
.ip-cell:hover, .ip-cell:focus-visible { background: var(--accent-soft); outline: none; }
.ip-cell[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ip-empty { padding: 18px 8px; text-align: center; color: var(--text-muted); }
.ip-use { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.ip-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); flex: none; }
.ip-foot .btn { height: 32px; padding: 0 12px; font-size: var(--fs-xs); }
.ip-msg { flex: 1 1 100%; min-width: 0; font-size: var(--fs-xs); color: var(--neg); overflow-wrap: anywhere; }
.ip-msg:empty { display: none; }
.ip-hint { flex: 1 1 100%; min-width: 0; font-size: var(--fs-xs); color: var(--text-faint); overflow-wrap: anywhere; }

/* Admin › Groups rows are a grid: give the picker its own first column. */
.group-form { grid-template-columns: 64px 200px 44px max-content max-content max-content; }
@media (max-width: 760px) { .group-form { grid-template-columns: 64px minmax(0, 1fr) 44px; } }

/* Phones: a sheet along the bottom of the screen. */
@media (max-width: 560px) {
  .ip-pop { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; width: auto; max-height: min(70vh, 460px); }
  .ip-cell { font-size: 24px; }
}

/* Emoji ranks and groups, picked here, shown on posts and profiles. */
.rank-emo { display: block; font-size: 20px; line-height: 1.1; white-space: nowrap; }
.gemo { display: inline-flex; align-items: center; height: 20px; font-size: 16px; line-height: 1; vertical-align: middle; }