/* How-to Guides index page — workshop styles */

/* Inverted section number label (for dark backgrounds) */
.res-sect-num-inv {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #4ade80; /* brand-400 */
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Hairline rule for dark sections */
.res-hair-inv {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Filter tabs ─────────────────────────────────────────────────────────────── */

.htg-filter,
.htg-filter-active {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.htg-filter {
  background: transparent;
  color: #6b7280; /* gray-500 */
  border-color: #e5e7eb; /* gray-200 */
}

.htg-filter:hover {
  background: #f9fafb; /* gray-50 */
  color: #374151; /* gray-700 */
  border-color: #d1d5db; /* gray-300 */
}

.htg-filter-active {
  background: #111827; /* gray-900 */
  color: #f9fafb; /* gray-50 */
  border-color: #111827;
}

.dark .htg-filter {
  color: #9ca3af; /* gray-400 */
  border-color: #374151; /* gray-700 */
}

.dark .htg-filter:hover {
  background: #1f2937; /* gray-800 */
  color: #f3f4f6; /* gray-100 */
  border-color: #4b5563; /* gray-600 */
}

.dark .htg-filter-active {
  background: #f9fafb; /* gray-50 */
  color: #111827; /* gray-900 */
  border-color: #f9fafb;
}

.htg-filter-count {
  opacity: 0.5;
  font-size: 0.65rem;
}

/* ── Guide card ──────────────────────────────────────────────────────────────── */

.htg-guide-card {
  min-height: 260px;
}

/* ── Category pills ──────────────────────────────────────────────────────────── */

.htg-cat-pill {
  background: var(--htg-pill-bg, rgba(107, 114, 128, 0.1));
  color: var(--htg-pill-text, #4b5563);
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-block;
}

.dark .htg-cat-pill {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

/* Tax & HMRC — brand green */
.htg-cat-pill[data-cat="Tax & HMRC"] {
  background: var(--htg-pill-bg, rgba(22, 163, 74, 0.1));
  color: var(--htg-pill-text, #15803d);
}
.dark .htg-cat-pill[data-cat="Tax & HMRC"] {
  background: rgba(22, 163, 74, 0.10);
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.16);
}

/* Bookkeeping — blue */
.htg-cat-pill[data-cat="Bookkeeping"] {
  background: var(--htg-pill-bg, rgba(37, 99, 235, 0.1));
  color: var(--htg-pill-text, #1d4ed8);
}
.dark .htg-cat-pill[data-cat="Bookkeeping"] {
  background: rgba(37, 99, 235, 0.10);
  color: #bfdbfe;
  border-color: rgba(191, 219, 254, 0.16);
}

/* Software — violet */
.htg-cat-pill[data-cat="Software"] {
  background: var(--htg-pill-bg, rgba(124, 58, 237, 0.1));
  color: var(--htg-pill-text, #6d28d9);
}
.dark .htg-cat-pill[data-cat="Software"] {
  background: rgba(124, 58, 237, 0.10);
  color: #ddd6fe;
  border-color: rgba(221, 214, 254, 0.16);
}

/* Year End — amber */
.htg-cat-pill[data-cat="Year End"] {
  background: var(--htg-pill-bg, rgba(217, 119, 6, 0.1));
  color: var(--htg-pill-text, #b45309);
}
.dark .htg-cat-pill[data-cat="Year End"] {
  background: rgba(217, 119, 6, 0.10);
  color: #fde68a;
  border-color: rgba(253, 230, 138, 0.16);
}

/* Payroll — cyan */
.htg-cat-pill[data-cat="Payroll"] {
  background: var(--htg-pill-bg, rgba(6, 182, 212, 0.1));
  color: var(--htg-pill-text, #0e7490);
}
.dark .htg-cat-pill[data-cat="Payroll"] {
  background: rgba(6, 182, 212, 0.10);
  color: #a5f3fc;
  border-color: rgba(165, 243, 252, 0.16);
}

/* Fallback for any unlisted category */
.htg-cat-pill:not([data-cat]) {
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
}
.dark .htg-cat-pill:not([data-cat]) {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

/* ── Difficulty badges ───────────────────────────────────────────────────────── */

.htg-diff {
  background: var(--htg-diff-bg, rgba(107, 114, 128, 0.1));
  color: var(--htg-diff-text, #4b5563);
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
}

.dark .htg-diff {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.htg-diff--beginner {
  background: var(--htg-diff-bg, rgba(22, 163, 74, 0.08));
  color: var(--htg-diff-text, #16a34a);
}
.dark .htg-diff--beginner {
  background: rgba(22, 163, 74, 0.10);
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.16);
}

.htg-diff--intermediate {
  background: var(--htg-diff-bg, rgba(217, 119, 6, 0.08));
  color: var(--htg-diff-text, #d97706);
}
.dark .htg-diff--intermediate {
  background: rgba(217, 119, 6, 0.10);
  color: #fed7aa;
  border-color: rgba(254, 215, 170, 0.16);
}

.htg-diff--advanced {
  background: var(--htg-diff-bg, rgba(220, 38, 38, 0.08));
  color: var(--htg-diff-text, #dc2626);
}
.dark .htg-diff--advanced {
  background: rgba(220, 38, 38, 0.10);
  color: #fecaca;
  border-color: rgba(254, 202, 202, 0.16);
}