/* App icon picker (www/js/appicon.js): the icons as home-screen tiles, three to a row, the current one ticked */
.ai-lede { margin: 4px 2px 16px; }
.ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.ai-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; border-radius: var(--r-sm); color: var(--text); }
.ai-pick:active .ai-frame { transform: scale(.94); }
.ai-frame { position: relative; display: block; width: min(84px, 100%); aspect-ratio: 1; border-radius: 24%; padding: 3px; transition: transform .18s var(--ease, ease), box-shadow .18s; }
.ai-art { display: block; width: 100%; height: 100%; border-radius: 22%; box-shadow: var(--shadow); }
/* the white icon needs an edge on the light theme's pale background */
.ai-pick[data-id="light"] .ai-art { box-shadow: var(--shadow), inset 0 0 0 1px var(--line); outline: 1px solid var(--line); outline-offset: -1px; }
.ai-pick.on .ai-frame { box-shadow: 0 0 0 2.5px var(--accent); }
.ai-tick { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 2px solid var(--bg); }
.ai-tick .i { width: 15px; height: 15px; stroke-width: 3; }
.ai-name { font-size: var(--fs-detail); font-weight: 600; text-align: center; line-height: 1.25; }
.ai-pick.on .ai-name { color: var(--accent); }
.ai-pick.busy { opacity: .55; pointer-events: none; }
.ai-note { margin: 18px 2px 0; text-align: center; }
.ai-row { width: 36px; height: 36px; flex: none; border-radius: 22%; }