/* askrobots.com's browse pages (core/templates/core/browse*.html). Colours come from the page's theme:
 * search-theme.css for visitors, the earth theme's names otherwise. */
.bz { --bz-surface: var(--surface, var(--window-bg, #fff)); --bz-surface-2: var(--surface-2, var(--toolbar-bg, #f1eee6));
      --bz-line: var(--line, var(--app-border, #e2ddd1)); --bz-ink: var(--ink, var(--app-fg, #1d1c1a));
      --bz-ink-2: var(--ink-2, var(--app-fg, #4a4740)); --bz-ink-3: var(--ink-3, var(--app-fg-muted, #635f56));
      --bz-title: var(--title, var(--app-accent, #174a6e)); --bz-accent: var(--accent, var(--app-accent, #1f5f8b));
      --bz-on-accent: var(--on-accent, #fff); --bz-head: var(--head, inherit); color: var(--bz-ink); }
.bz-crumbs { font-size: 13px; color: var(--bz-ink-3); margin: 6px 0 4px; }
.bz-crumbs a { color: var(--bz-ink-3); }
.bz h1 { font-family: var(--bz-head); font-size: 34px; margin: 0 0 6px; }
.bz-lede { color: var(--bz-ink-2); font-size: 15px; margin: 0 0 14px; max-width: 760px; }
.bz-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 20px; }
.bz-chip { display: inline-block; border: 1px solid var(--bz-line); border-radius: 999px; padding: 3px 11px; font-size: 13px;
           color: var(--bz-ink-2); text-decoration: none; background: var(--bz-surface); }
.bz-chip small { color: var(--bz-ink-3); margin-left: 3px; }
.bz-chip:hover, .bz-chip.on { border-color: var(--bz-accent); color: var(--bz-ink); }
.bz-chip.on { background: var(--bz-accent); color: var(--bz-on-accent); }
.bz-chip.on small { color: inherit; }

.bz-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bz-topic { background: var(--bz-surface); border: 1px solid var(--bz-line); border-radius: 10px; padding: 14px; }
.bz-topic h2 { font-family: var(--bz-head); font-size: 19px; margin: 0 0 4px; }
.bz-topic h2 a { color: var(--bz-title); text-decoration: none; }
.bz-topic h2 small { font-size: 13px; color: var(--bz-ink-3); font-family: inherit; margin-left: 4px; }
.bz-topic p { font-size: 13.5px; color: var(--bz-ink-3); margin: 0; }
.bz-topic p a { color: var(--bz-ink-2); }

.bz-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 36px; }
.bz-group h2 { font-family: var(--bz-head); font-size: 20px; margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--bz-ink); }
.bz-group h2 a { color: var(--bz-title); text-decoration: none; }
.bz-group h2 small { font-size: 13px; color: var(--bz-ink-3); font-family: inherit; margin-left: 4px; }
.bz-all { display: inline-block; margin: 8px 0 0; font-size: 14px; }

.bz-site { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--bz-line); }
.bz-shot { flex: none; width: 128px; height: 80px; border-radius: 6px; border: 1px solid var(--bz-line); overflow: hidden;
           background: var(--bz-surface-2); position: relative; display: block; text-decoration: none; }
.bz-shot img.full { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.bz-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 2px;
           font-size: 11px; color: var(--bz-ink-3); text-align: center; padding: 4px; }
.bz-tile img, .bz-tile b { width: 26px; height: 26px; border-radius: 6px; }
.bz-tile b { display: inline-flex; align-items: center; justify-content: center; background: var(--bz-surface); border: 1px solid var(--bz-line);
             font-family: var(--bz-head); color: var(--bz-ink); font-size: 15px; }
.bz-tile span { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-body { min-width: 0; overflow-wrap: anywhere; }
.bz-chips, .bz-crumbs, .bz-lede { overflow-wrap: anywhere; }
.bz-title { font-family: var(--bz-head); font-size: 17px; font-weight: 600; color: var(--bz-title); text-decoration: none; line-height: 1.3; }
.bz-title:hover { text-decoration: underline; }
.bz-domain { font-size: 13px; color: var(--bz-ink-3); margin-left: 6px; }
.bz-desc { margin: 3px 0 5px; font-size: 14px; color: var(--bz-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bz-meta { font-size: 12.5px; color: var(--bz-ink-3); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.bz-meta a { color: var(--bz-ink-3); }
.bz-tag { border: 1px solid var(--bz-line); border-radius: 999px; padding: 0 8px; text-decoration: none; color: var(--bz-ink-2) !important; }

.bz-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; }
.bz-tools form { display: flex; gap: 6px; flex: 1; max-width: 420px; }
.bz-tools input { flex: 1; min-width: 0; border: 1px solid var(--bz-line); border-radius: 999px; padding: 5px 12px;
                  background: var(--bz-surface); color: var(--bz-ink); font-size: 14px; }
.bz-tools button { border: 0; border-radius: 999px; padding: 5px 14px; background: var(--bz-accent); color: var(--bz-on-accent); font-weight: 600; font-size: 13.5px; }
.bz-sorts { font-size: 13.5px; color: var(--bz-ink-3); display: flex; gap: 10px; flex-wrap: wrap; }
.bz-sorts a { color: var(--bz-ink-2); }
.bz-sorts b { color: var(--bz-ink); }
.bz-pager { display: flex; gap: 14px; align-items: center; margin: 18px 0 6px; font-size: 14px; color: var(--bz-ink-3); }
.bz-note { color: var(--bz-ink-3); font-size: 13px; margin-top: 18px; }

@media (max-width: 760px) {
  .bz-groups { grid-template-columns: 1fr; }
  .bz h1 { font-size: 27px; }
  .bz-shot { width: 88px; height: 55px; }
  .bz-tile span { display: none; }
}