/* Admin preview mode (webhive/web/preview.py): the slim admin bar on public pages and
   the directory extras. The screenshot, icon and facts pieces come from the prototype
   stylesheets, linked next to this one in templates/preview/_bar.html (versioned URLs).
   Tokens from tokens.css. */

.pv-adminbar { position: sticky; top: 0; z-index: 50; background: var(--warn-wash); color: var(--ink);
  border-bottom: 1px solid var(--warn); font-size: var(--fs-1); }
.pv-adminbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding-top: 6px; padding-bottom: 6px; }
.pv-adminbar a { color: var(--ink); }
.pv-adminbar a[aria-current="true"] { font-weight: 600; text-decoration: none; }
.pv-adminbar__group { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* directory rows: the Gallery slot of the result cards (layout B, 2026-10-10): on the left of
   every row, the screenshot or the icon tile (.result__ph, app.css); the slot carries the
   icon, so the row's own icon tile hides beside it */
.pv-dir { flex: none; order: 0; display: block; width: 168px; height: 105px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2); text-decoration: none; }
.pv-dir img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pv-dir:hover { border-color: var(--accent); }
.dir-site--gallery .dir-site__mark { display: none; }
.dir-site--gallery .dir-site__body { order: 1; }
/* phones (as the result cards): no icon tile slot, the row's icon is back; a screenshot sits small on the right */
@media (max-width: 640px) {
  .dir-site--gallery .dir-site__mark { display: grid; }
  .pv-dir--none { display: none; }
  .dir-site--shot .pv-dir { order: 3; width: 92px; height: 58px; border-radius: 6px; }
}

/* home page topic cards: up to three small previews of the well-known sites */
.pv-known { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: var(--s2); }
.pv-known:empty { display: none; }
.pv-img--card .pv-img__tag { display: none; }