/* Favicon prototype (admin only): /admin/proto/results, /admin/proto/icons, and icons on
   /admin/proto/browse/<topic>. webhive/web/views/favicons_proto.py. Tokens from tokens.css,
   so light and dark themes both work. */

/* the site icon in the letter tile's place (.result__fav--img): in app.css since the
   icons went public (WEBHIVE_PUBLIC_ICONS) */

/* "Icon + the site's name": the name on top, domain › path under it (already in the macro) */

/* compact: two lines of snippet, no AI summary, no actions row; facts stay */
.pi-variant-compact .result { padding: var(--s3) 0 var(--s4); }
.pi-variant-compact .result__title { margin: var(--s1) 0 2px; font-size: var(--fs-3); }
.pi-variant-compact .result__snippet { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--s1); }
.pi-variant-compact .result__summary, .pi-variant-compact .result__actions { display: none; }
.pi-variant-compact .result__facts { margin-top: var(--s1); }
.pi-row { position: relative; }
.pi-checked { margin: calc(-1 * var(--s3)) 0 var(--s3); font-size: 12px; color: var(--ink-3); }

/* directory cards: the icon on the tile when there is no screenshot, and beside the name */
.pv-img--icon { display: grid; place-items: center; background: var(--accent-wash); }
.pv-img--icon img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px;
  background: var(--surface); padding: 6px; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.pi-inline { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px;
  object-fit: contain; border-radius: 3px; }

/* admin review grid */
.icon-grid { list-style: none; margin: 0; padding: var(--s3) var(--s4); display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.icon-grid__item { min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; }
.icon-grid__item img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px;
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
.icon-grid__none { width: 64px; height: 64px; display: grid; place-items: center; border: 1px dashed var(--line);
  border-radius: 8px; color: var(--ink-3); font-size: 11px; }
.icon-grid__host { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.icon-grid__meta { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.icon-grid__small { width: 32px !important; height: 32px !important; }