/* Lidly catalog/bot-detail pages (/bots, /bots/<slug>), 2026-09-25 revision after direct
design feedback: own Lidly header (not datahuntly's admin chrome or DataHuntly's real logo),
richer "product marketplace" cards with a per-vertical icon, a live-preview lead strip in the
hero, and real per-bot detail pages via slug. Self-contained - no admin.css/style.css. */

:root {
	/* Palette copied 1:1 from datahuntly (static/css/admin.css :root) - no invented colors. */
	--catalog-bg: #F4F4F4;
	--catalog-surface: #FFFFFF;
	--catalog-border: #E7E7E7;
	--catalog-text: #13140E;
	--catalog-muted: #616161;
	--catalog-accent: #D4F772;
	--catalog-accent-dark: #13140E;
	--catalog-accent-soft: rgba(212, 247, 114, .35);
	--catalog-amber: #FF9F31;
	--catalog-amber-soft: rgba(255, 159, 49, .18);
	--catalog-blue: #13140E;
	--catalog-blue-soft: rgba(0, 222, 225, .18);
	--catalog-cyan: #00DEE1;
	--catalog-header-bg: #13140E;
}

.catalog-body { margin: 0; background: var(--catalog-bg); font-family: "Inter", Arial, sans-serif; }
.catalog-page { color: var(--catalog-text); padding-bottom: 80px; }
/* Not scoped to .catalog-page - the header (catalog_header.html) sits OUTSIDE .catalog-page
   and needs the exact same centered max-width/padding so its content lines up with the page
   below it, not stretched edge-to-edge. */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 820px; }

/* ---------- Header ---------- */
/* Static (position: static, not sticky) - deliberate, see partials/catalog_header.html's own
   comment: a sticky bar re-renders at every tile boundary of a Playwright full-page screenshot
   and reads as a leftover admin panel on a page this short. */
.catalog-header { background: var(--catalog-header-bg); color: #fff; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.catalog-header .catalog-user { display: flex; align-items: center; gap: 12px; }
.catalog-header .catalog-search input { border: none; border-radius: 8px; padding: 8px 14px; width: 320px; height: 40px; box-sizing: border-box; font-family: inherit; }
.catalog-wordmark { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 19px; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.catalog-logo { display: block; height: 40px; width: auto; }
.catalog-wordmark__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--catalog-accent); color: var(--catalog-header-bg); font-size: 15px; }

/* ---------- Hero ---------- */
.catalog-hero { display: flex; align-items: center; gap: 40px; padding: 40px 0 30px; }
.catalog-hero__intro { flex: 1 1 50%; min-width: 0; }
.catalog-hero__title { font-size: 42px; font-weight: 700; line-height: 1.15; color: var(--catalog-text); margin: 0 0 14px; }
.catalog-hero__subtitle { font-size: 17px; line-height: 1.6; color: var(--catalog-muted); margin: 0 0 24px; max-width: 480px; }

.catalog-hero__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.catalog-stat { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.catalog-stat__value { font-size: 24px; font-weight: 700; color: var(--catalog-accent-dark); }
.catalog-stat__label { font-size: 13px; color: var(--catalog-muted); }

/* The "we're finding real demand right now" element. */
.live-ticker { flex: 1 1 50%; min-width: 0; background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: 18px; padding: 24px; }
.live-ticker__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--catalog-accent-dark); margin-bottom: 12px; }
.live-ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--catalog-accent); box-shadow: 0 0 0 4px var(--catalog-accent-soft); }
.live-ticker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.live-ticker__item { display: flex; gap: 10px; align-items: flex-start; }
.live-ticker__icon { color: var(--catalog-accent); font-size: 14px; margin-top: 4px; flex: 0 0 auto; width: 16px; text-align: center; }
.live-ticker__body { min-width: 0; }
.live-ticker__text { font-size: 13.5px; line-height: 1.45; margin: 0 0 6px; color: var(--catalog-text); overflow-wrap: anywhere; }
.live-ticker__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--catalog-muted); }
.live-ticker__city, .live-ticker__time { display: inline-flex; align-items: center; gap: 4px; }

.intent-badge { font-size: 11.5px; font-weight: 700; color: var(--catalog-text); background: var(--catalog-amber-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* ---------- Container 1: filter tabs ---------- */
.catalog-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 32px; }
.catalog-tab {
	appearance: none; border: 1px solid var(--catalog-border); background: var(--catalog-surface);
	color: var(--catalog-muted); font-size: 14px; font-weight: 600; padding: 9px 18px;
	border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.catalog-tab:hover { border-color: var(--catalog-text); color: var(--catalog-text); }
.catalog-tab.is-active { background: var(--catalog-accent); border-color: var(--catalog-accent); color: var(--catalog-text); }

/* ---------- Container 2: card grid (flexbox, per direct request) ----------
   align-items:stretch (the flexbox default) makes every card in the SAME wrapped row equal
   height on its own; margin-top:auto inside each card's own flex column then lands the CTA
   row on the same baseline as its row neighbours. */
.catalog-grid { display: flex; flex-wrap: wrap; gap: 22px; }
.catalog-empty { color: var(--catalog-muted); padding: 40px 0; text-align: center; }

.bot-card {
	position: relative; display: flex; flex: 1 1 320px; max-width: calc(33.333% - 15px);
	background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: 18px;
	overflow: hidden; box-shadow: 0 1px 2px rgba(19, 20, 14, .04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bot-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(19, 20, 14, .1); border-color: var(--catalog-accent); }
/* code-review (2026-09-25): an author-stylesheet `.bot-card { display: flex }` and the
   browser's own `[hidden] { display: none }` have the SAME specificity (0,1,0) - author
   styles win that tie regardless of source order, so without this the tab filter's
   `item.hidden = true` (catalog.html's inline script) silently stopped hiding anything. */
.bot-card[hidden] { display: none; }

.bot-card__accent { width: 5px; flex: 0 0 auto; background: var(--catalog-accent); }
.bot-card__accent--construction { background: var(--catalog-amber); }
.bot-card__accent--insurance { background: var(--catalog-cyan); }
.bot-card__accent--local-services { background: var(--catalog-accent); }
.bot-card__accent--travel { background: var(--catalog-cyan); }

/* flex column + the CTA's margin-top:auto below is what actually aligns every card's buttons
   to the same bottom edge, regardless of how much content sits above them. */
.bot-card__body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 auto; }

/* ---------- Per-vertical icon badge - the "visual anchor"/product feel ---------- */
.bot-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bot-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; flex: 0 0 auto; }
.bot-icon--real-estate { background: var(--catalog-accent-soft); color: var(--catalog-accent-dark); }
.bot-icon--construction { background: var(--catalog-amber-soft); color: var(--catalog-text); }
.bot-icon--insurance { background: var(--catalog-blue-soft); color: var(--catalog-text); }
.bot-icon--local-services { background: var(--catalog-accent-soft); color: var(--catalog-accent-dark); }
.bot-icon--travel { background: var(--catalog-blue-soft); color: var(--catalog-text); }
.bot-icon--lg { width: 64px; height: 64px; border-radius: 16px; font-size: 26px; }

.bot-card__category { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--catalog-accent-dark); }

.bot-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.bot-status__dot { width: 6px; height: 6px; border-radius: 50%; }
.bot-status--live { background: var(--catalog-accent-soft); color: var(--catalog-accent-dark); }
.bot-status--live .bot-status__dot { background: var(--catalog-accent); }
.bot-status--beta { background: var(--catalog-amber-soft); color: var(--catalog-text); }
.bot-status--beta .bot-status__dot { background: var(--catalog-amber); }
.bot-status--coming-soon { background: var(--catalog-border); color: var(--catalog-muted); }
.bot-status--coming-soon .bot-status__dot { background: var(--catalog-muted); }

.bot-card__name { font-size: 19px; font-weight: 700; color: var(--catalog-text); margin: 0; line-height: 1.3; }
.bot-card__desc { font-size: 14px; line-height: 1.55; color: var(--catalog-muted); margin: 0; }

/* Card's lead preview - now a clickable "this is what a real hit looks like" panel, not a
   plain italic quote: source/lang/freshness/intent on one line + city, like a real feed row. */
.bot-card__preview {
	display: block; background: var(--catalog-bg); border: 1px solid var(--catalog-border); border-radius: 12px;
	padding: 12px 14px; text-decoration: none; color: inherit; transition: border-color .15s ease;
}
.bot-card__preview:hover { border-color: var(--catalog-accent); }
.bot-card__preview-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.bot-card__preview-text { font-size: 13.5px; line-height: 1.5; color: var(--catalog-text); margin: 0 0 6px; overflow-wrap: anywhere; }
.bot-card__preview-city { font-size: 12px; color: var(--catalog-muted); display: inline-flex; align-items: center; gap: 4px; }

.bot-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--catalog-border); border-bottom: 1px solid var(--catalog-border); }
.bot-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bot-metric__value { font-size: 14px; font-weight: 700; color: var(--catalog-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-metric__label { font-size: 11px; color: var(--catalog-muted); }

.bot-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.bot-tag--source { background: var(--catalog-blue-soft); color: var(--catalog-text); }
.bot-tag--geo { background: var(--catalog-bg); color: var(--catalog-muted); }

.bot-card__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

.bot-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 11px 18px; font-size: 14px; font-weight: 700; text-decoration: none; transition: all .15s ease; }
.bot-btn--primary { background: var(--catalog-accent); color: var(--catalog-text); }
.bot-btn--primary:hover { background: var(--catalog-text); color: var(--catalog-accent); }
.bot-btn--ghost { color: var(--catalog-text); padding-left: 4px; padding-right: 4px; }
.bot-btn--ghost:hover { color: var(--catalog-accent-dark); }
.bot-btn--on-dark { color: #fff; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; }
.bot-btn--on-dark:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.bot-btn--lg { padding: 13px 26px; font-size: 15px; }

/* ---------- Bottom CTA ---------- */
.catalog-cta { padding: 48px 0 12px; }
.catalog-cta__box {
	background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: 20px;
	padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.catalog-cta__title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.catalog-cta__text { font-size: 14px; color: var(--catalog-muted); margin: 0; max-width: 480px; }

/* ---------- Bot detail page (/bots/<slug>) ---------- */
.bot-detail__back { display: inline-flex; align-items: center; gap: 8px; color: var(--catalog-muted); text-decoration: none; font-size: 14px; font-weight: 600; margin: 28px 0 20px; }
.bot-detail__back:hover { color: var(--catalog-accent-dark); }
.bot-detail__head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.bot-detail__top-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bot-detail__title { font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.bot-detail__desc { font-size: 15px; line-height: 1.6; color: var(--catalog-muted); margin: 0; max-width: 560px; }
.bot-detail__metrics { border: 1px solid var(--catalog-border); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; background: var(--catalog-surface); }
.bot-detail__cta { margin: 22px 0 36px; }
.bot-detail__leads { background: var(--catalog-surface); border: 1px solid var(--catalog-border); border-radius: 18px; padding: 22px; }
.live-ticker__list--detail { gap: 16px; }
.live-ticker__list--detail .live-ticker__item { padding-bottom: 16px; border-bottom: 1px solid var(--catalog-border); }
.live-ticker__list--detail .live-ticker__item:last-child { border-bottom: none; padding-bottom: 0; }

/* ---------- Responsive: 3 / 2 / 1 columns, same flexbox items, just a new max-width ---------- */
@media (max-width: 1080px) {
	.bot-card { max-width: calc(50% - 11px); }
}

@media (max-width: 768px) {
	.catalog-hero { flex-direction: column; align-items: stretch; gap: 24px; padding: 28px 0 16px; }
	.live-ticker { padding: 18px; }
	.catalog-hero__title { font-size: 30px; }
	.catalog-hero__stats { gap: 20px; }
	.bot-card { max-width: 100%; flex-basis: 100%; }
	.catalog-cta__box { flex-direction: column; align-items: flex-start; }
	.bot-detail__head { flex-direction: column; }
}

@media (max-width: 576px) {
	.catalog-header { padding: 0 14px; }
	.catalog-header .catalog-search { display: none; }
}

@media (max-width: 480px) {
	.catalog-page .container { padding: 0 16px; }
	.catalog-header { padding: 0 14px; }
	.bot-card__body { padding: 18px 16px; }
	.bot-card__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
	.bot-metric__value { font-size: 12.5px; }
}

@media (max-width: 480px) {
	.catalog-logo { height: 32px; }
	.catalog-user .bot-btn { padding: 8px 12px; font-size: 13px; }
}