/* =============================================================================
 * SEO hub pages (/scams, /safe-websites, /tlds, /tld/*, /categories,
 * /category/*, /brands, /brand/*, /directory, /directory/*, /statistics)
 * and the report-page additions (breadcrumb, hub chips, related websites).
 * Loaded only by .inc/views/hubs/*.php and .inc/views/report/show.php.
 * Builds on theme.css tokens and components (card, table, stat, chip, badge).
 * ========================================================================== */

/* Breadcrumb ---------------------------------------------------------------- */
.hub-breadcrumb { margin-bottom: .9rem; font-size: .85rem; color: var(--muted); }
.hub-breadcrumb__list { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.hub-breadcrumb__item { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.hub-breadcrumb__item + .hub-breadcrumb__item::before { content: '›'; color: var(--muted); }
.hub-breadcrumb__item a { color: var(--text-2); }
.hub-breadcrumb__item [aria-current] { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* Head ---------------------------------------------------------------------- */
.hub-head__title { margin: .5rem 0 .6rem; max-width: 28ch; }
.hub-head__intro { color: var(--text-2); max-width: 70ch; margin: 0; }
.hub-stats { margin-top: 1.6rem; }

/* A–Z letter strip --------------------------------------------------------- */
.hub-letters { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1.4rem; }
.hub-letters__item { min-width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: .85rem; }
.hub-letters__item:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.hub-letters__item.is-current { background: var(--accent); border-color: transparent; color: #fff; }
.hub-letters__item.is-empty { opacity: .35; }

/* Listing table ------------------------------------------------------------- */
.hub-table__pos { width: 3.5rem; }
.hub-table__name { font-weight: 600; color: var(--text); }
.hub-table__text { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-chip { color: var(--text-2); }
.hub-chip:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.hub-count, .hub-note { margin: .9rem 0 0; text-align: center; }

/* Horizontal share bar (CSS only) ------------------------------------------ */
.hub-bar { display: inline-flex; align-items: center; gap: .6rem; min-width: 150px; width: 100%; }
.hub-bar__track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.hub-bar__fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.hub-bar__fill--high { background: var(--high); }
.hub-bar__fill--suspicious { background: var(--suspicious); }
.hub-bar__label { min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: .85rem; }

/* Related hubs + explore nav ------------------------------------------------ */
.hub-related { margin-top: 2rem; }
.hub-related__title, .hub-explore__title { font-size: 1.05rem; margin: 0 0 .8rem; }
.hub-explore { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.hub-explore__list { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.hub-explore__link { display: inline-flex; padding: .4rem .8rem; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .88rem; }
.hub-explore__link:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.hub-explore__link.is-current { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--text); }

/* Directory tiles ------------------------------------------------------------ */
.hub-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .7rem; }
.hub-directory__tile { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: 1rem 1.1rem; color: var(--text); }
.hub-directory__tile:hover { text-decoration: none; border-color: var(--border-strong); }
.hub-directory__tile.is-empty { opacity: .4; }
.hub-directory__letter { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }

/* Statistics ------------------------------------------------------------------ */
.hub-stat-grid { align-items: start; }
.hub-split { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; margin: .4rem 0 1rem; background: var(--surface); }
.hub-split__seg { flex-basis: 0; min-width: 4px; }
.hub-split__seg--low { background: var(--low); }
.hub-split__seg--uncertain { background: var(--uncertain); }
.hub-split__seg--suspicious { background: var(--suspicious); }
.hub-split__seg--high { background: var(--high); }
.hub-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; }
.hub-legend__item { display: inline-flex; align-items: center; gap: .4rem; }
.hub-chart { margin: 0; }
.hub-chart__svg { display: block; width: 100%; height: auto; }
.hub-chart__grid { stroke: var(--border); stroke-width: 1; }
.hub-chart__baseline { stroke: var(--border-strong); stroke-width: 1; }
.hub-chart__axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.hub-chart__bar { fill: var(--accent); }
.hub-chart__hit { fill: transparent; }
.hub-chart__col:hover .hub-chart__bar { fill: var(--accent-2); }
.hub-chart__col:hover .hub-chart__hit { fill: var(--surface-2); }
.hub-table-toggle { margin-top: 1rem; }
.hub-cite a { word-break: break-all; }

/* Report page additions -------------------------------------------------------- */
.report-hubs { margin-top: .9rem; }
.report-hubs .chip { color: var(--text-2); }
.report-hubs a.chip:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.report-related__group + .report-related__group { margin-top: 1.2rem; }
.report-related__title { font-size: .95rem; margin: 0 0 .6rem; }
.report-related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.report-related__item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.report-related__item .domain-cell span { max-width: 18ch; }
.report-related__more { margin: .6rem 0 0; font-size: .85rem; }

@media (max-width: 560px) {
    .hub-bar { min-width: 110px; }
    .hub-directory { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* Hub chips on the report page (category chip sits in the summary badge row) */
a.report-hubs__chip { color: var(--text-2); }
a.report-hubs__chip:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.report-hubs__chip--brand { border-color: color-mix(in srgb, var(--high) 40%, var(--border)); }
.report-head__sub { margin-top: .2rem; }