/* ==========================================================================
   HiveHits Design System — "Obsidian & Honey"
   --------------------------------------------------------------------------
   Single source of truth for the web UI.

   The guiding rule: honey gold is EARNED, not sprayed. It marks the primary
   action, the active nav item, and the brand — nothing else. Everything
   structural (surfaces, borders, muted text) uses the neutral obsidian ramp,
   which is what lets the gold read as special when it does appear.

   Tokens are wired into Bootstrap 5.3's own CSS variables so components
   inherit the theme natively. That is what removes the need for !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces — a warm-tinted obsidian ramp, four steps of elevation. */
    --hh-bg:            #0B0E14;
    --hh-surface:       #12161F;
    --hh-surface-2:     #181D28;
    --hh-surface-3:     #212836;
    --hh-surface-inset: #0D1017;

    /* Borders are NEUTRAL. A gold hairline on every card is what flattened
       the old hierarchy — everything shouted at the same volume. */
    --hh-border:        #242B38;
    --hh-border-strong: #333C4C;

    /* Text emphasis ramp. Muted text is desaturated slate, never gold. */
    --hh-text:          #EEF2F8;
    --hh-text-muted:    #97A3B6;
    --hh-text-subtle:   #6A7486;

    /* Brand honey — the single accent. */
    --hh-honey:         #F5A524;
    --hh-honey-bright:  #FFC554;
    --hh-honey-deep:    #C77B08;
    --hh-honey-ink:     #17110A;
    --hh-honey-rgb:     245, 165, 36;

    /* Semantic status. Deliberately not amber, so "success" and "paused"
       can never be mistaken for brand emphasis. */
    --hh-success:       #34D399;
    --hh-success-bg:    rgba(52, 211, 153, 0.12);
    --hh-danger:        #F87171;
    --hh-danger-bg:     rgba(248, 113, 113, 0.12);
    --hh-info:          #60A5FA;
    --hh-info-bg:       rgba(96, 165, 250, 0.12);
    --hh-neutral-bg:    rgba(151, 163, 182, 0.12);

    /* Elevation replaces decorative borders as the depth cue. */
    --hh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --hh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --hh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --hh-glow:      0 0 0 1px rgba(var(--hh-honey-rgb), 0.35),
                    0 6px 24px rgba(var(--hh-honey-rgb), 0.18);

    /* Radius */
    --hh-radius-sm: 8px;
    --hh-radius:    12px;
    --hh-radius-lg: 16px;
    --hh-radius-pill: 999px;

    /* Dense dashboard spacing scale */
    --hh-space-1: 4px;
    --hh-space-2: 8px;
    --hh-space-3: 12px;
    --hh-space-4: 16px;
    --hh-space-5: 24px;
    --hh-space-6: 32px;
    --hh-space-7: 48px;

    /* Type */
    --hh-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hh-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Layout */
    --hh-sidebar-w: 252px;
    --hh-topbar-h: 60px;

    --hh-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Bootstrap bridge
   Map our tokens onto Bootstrap's variables so its components theme
   themselves. Everything below this point is refinement, not overrides.
   -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --bs-body-bg: var(--hh-bg);
    --bs-body-color: var(--hh-text);
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--hh-text-muted);
    --bs-secondary-bg: var(--hh-surface-2);
    --bs-tertiary-color: var(--hh-text-subtle);
    --bs-tertiary-bg: var(--hh-surface);
    --bs-border-color: var(--hh-border);
    --bs-border-color-translucent: var(--hh-border);

    --bs-primary: var(--hh-honey);
    --bs-primary-rgb: var(--hh-honey-rgb);
    --bs-link-color: var(--hh-honey);
    --bs-link-color-rgb: var(--hh-honey-rgb);
    --bs-link-hover-color: var(--hh-honey-bright);

    --bs-success: var(--hh-success);
    --bs-danger: var(--hh-danger);
    --bs-info: var(--hh-info);
    --bs-warning: var(--hh-honey);

    --bs-card-bg: var(--hh-surface);
    --bs-card-border-color: var(--hh-border);
    --bs-dropdown-bg: var(--hh-surface-2);
    --bs-dropdown-border-color: var(--hh-border);
    --bs-dropdown-link-color: var(--hh-text);
    --bs-dropdown-link-hover-bg: var(--hh-surface-3);
    --bs-dropdown-link-hover-color: var(--hh-text);
    --bs-modal-bg: var(--hh-surface);
    --bs-modal-border-color: var(--hh-border);
    --bs-modal-header-border-color: var(--hh-border);
    --bs-modal-footer-border-color: var(--hh-border);

    --bs-heading-color: var(--hh-text);
    --bs-code-color: var(--hh-honey-bright);
    --bs-focus-ring-color: rgba(var(--hh-honey-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--hh-font);
    background-color: var(--hh-bg);
    color: var(--hh-text);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--hh-text);
}

/* Numbers line up in columns and don't jitter as they tick. */
.hh-num,
.stat-value,
td.hh-num,
.hh-metric-value {
    font-family: var(--hh-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

::selection { background: rgba(var(--hh-honey-rgb), 0.3); color: #fff; }

/* One visible, consistent focus ring everywhere. Never removed. */
:focus-visible {
    outline: 2px solid var(--hh-honey);
    outline-offset: 2px;
    border-radius: 4px;
}

a { text-decoration: none; transition: color var(--hh-transition); }

.text-muted, .text-secondary { color: var(--hh-text-muted) !important; }
.hh-text-subtle { color: var(--hh-text-subtle); }

/* Scrollbars, so they don't punch a light hole in a dark UI. */
* { scrollbar-width: thin; scrollbar-color: var(--hh-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--hh-border-strong);
    border-radius: var(--hh-radius-pill);
    border: 3px solid var(--hh-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #46516400; background: #465164; }

/* --------------------------------------------------------------------------
   4. Brand
   -------------------------------------------------------------------------- */

.hh-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--hh-space-2);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--hh-text);
}

/* The bee-and-honeycomb mark.
   No gold plate and no hexagon clip-path behind it: the artwork carries its
   own honeycomb, and a hexagon inside a hexagon reads as a mistake. Slightly
   larger than the 30px plate it replaced, because the mark has real detail to
   resolve where a single glyph did not. */
.hh-wordmark__mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: contain;
}

.hh-wordmark__accent { color: var(--hh-honey); }

/* Faint honeycomb texture. Used behind the brand block and empty states —
   nowhere with text on top of it. */
.hh-honeycomb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='none' stroke='%23F5A524' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34L25 30.6V17.9l-11.01-6.35L3 17.9z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5. App shell
   -------------------------------------------------------------------------- */

.hh-shell { display: flex; min-height: 100vh; }

.hh-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--hh-sidebar-w);
    background: var(--hh-surface);
    border-right: 1px solid var(--hh-border);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform var(--hh-transition);
}

.hh-sidebar__brand {
    height: var(--hh-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 var(--hh-space-5);
    border-bottom: 1px solid var(--hh-border);
    flex: 0 0 auto;
}

.hh-sidebar__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--hh-space-4) 0; }

.hh-nav-label {
    padding: var(--hh-space-4) var(--hh-space-5) var(--hh-space-2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
}

/* Distinct honey-tinted accent per sidebar section label */
.hh-nav-label:nth-of-type(1) { color: #FDE68A; }
.hh-nav-label:nth-of-type(2) { color: #FBBF24; }
.hh-nav-label:nth-of-type(3) { color: #F59E0B; }
.hh-nav-label:nth-of-type(4) { color: #D97706; }
.hh-nav-label:nth-of-type(5) { color: #FFC554; }

.hh-nav { list-style: none; margin: 0; padding: 0 var(--hh-space-3); }

.hh-nav__link {
    display: flex;
    align-items: center;
    gap: var(--hh-space-3);
    padding: 9px var(--hh-space-3);
    margin-bottom: 2px;
    border-radius: var(--hh-radius-sm);
    color: var(--hh-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    /* 44px min touch target on coarse pointers is handled below. */
    transition: background var(--hh-transition), color var(--hh-transition);
}

.hh-nav__link i { width: 18px; font-size: 0.95rem; text-align: center; }

.hh-nav__link:hover { background: var(--hh-surface-2); color: var(--hh-text); }

.hh-nav__link.is-active {
    background: rgba(var(--hh-honey-rgb), 0.14);
    color: var(--hh-honey-bright);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--hh-honey);
}

.hh-nav__link.is-active i { color: var(--hh-honey); }

/* Sidebar Navigation Badges */
.hh-nav-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: #94A3B8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hh-nav-badge--honey {
    background: rgba(245, 165, 36, 0.18);
    color: #FBBF24;
    border: 1px solid rgba(245, 165, 36, 0.35);
}

.hh-sidebar__footer {
    flex: 0 0 auto;
    padding: var(--hh-space-4) var(--hh-space-5);
    border-top: 1px solid var(--hh-border);
    font-size: 0.75rem;
    color: var(--hh-text-subtle);
}

.hh-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-start: var(--hh-sidebar-w);
    display: flex;
    flex-direction: column;
    transition: margin var(--hh-transition);
}

.hh-topbar {
    height: var(--hh-topbar-h);
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hh-space-4);
    padding: 0 var(--hh-space-5);
    background: rgba(11, 14, 20, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hh-border);
}

.hh-content { flex: 1 1 auto; padding: var(--hh-space-5); }

@media (min-width: 1400px) {
    .hh-content { padding: var(--hh-space-5) var(--hh-space-6); }
}

.hh-footer {
    padding: var(--hh-space-4) var(--hh-space-5);
    border-top: 1px solid var(--hh-border);
    color: var(--hh-text-subtle);
    font-size: 0.8125rem;
}

.hh-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--hh-radius-sm);
    background: transparent;
    color: var(--hh-text-muted);
    cursor: pointer;
    transition: background var(--hh-transition), color var(--hh-transition);
}

.hh-icon-btn:hover { background: var(--hh-surface-2); color: var(--hh-text); }

/* Balance readout — a quiet chip, not a gold slab. The number is the point. */
.hh-balance {
    display: inline-flex;
    align-items: center;
    gap: var(--hh-space-2);
    padding: 7px var(--hh-space-4);
    border-radius: var(--hh-radius-pill);
    background: var(--hh-surface-2);
    border: 1px solid var(--hh-border);
    font-size: 0.875rem;
    color: var(--hh-text-muted);
    white-space: nowrap;
}

.hh-balance i { color: var(--hh-honey); font-size: 0.8rem; }
.hh-balance strong { color: var(--hh-text); font-weight: 700; }

.hh-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--hh-radius-pill);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--hh-honey-ink);
    background: linear-gradient(145deg, var(--hh-honey-bright), var(--hh-honey));
}

/* --------------------------------------------------------------------------
   6. Cards & surfaces
   -------------------------------------------------------------------------- */

.card {
    background: rgba(18, 22, 31, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hh-border);
    padding: var(--hh-space-4) var(--hh-space-5);
    font-weight: 650;
    color: var(--hh-text);
}

.card-body { padding: var(--hh-space-5); }

/* Opt-in emphasis. Exactly one card per screen should carry this. */
.card.hh-card--feature {
    border-color: rgba(var(--hh-honey-rgb), 0.35);
    box-shadow: var(--hh-shadow-md);
}

.hh-panel {
    background: rgba(18, 22, 31, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
}

/* --------------------------------------------------------------------------
   7. Metric tiles
   -------------------------------------------------------------------------- */

.hh-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--hh-space-4);
    margin-bottom: var(--hh-space-5);
}

.hh-metric {
    position: relative;
    padding: var(--hh-space-5);
    background: rgba(18, 22, 31, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    overflow: hidden;
    transition: border-color var(--hh-transition), transform var(--hh-transition);
}

.hh-metric:hover { border-color: var(--hh-border-strong); }

.hh-metric__label {
    display: flex;
    align-items: center;
    gap: var(--hh-space-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
    margin-bottom: var(--hh-space-3);
}

.hh-metric__value {
    font-family: var(--hh-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--hh-text);
}

.hh-metric__meta { margin-top: var(--hh-space-2); font-size: 0.8125rem; color: var(--hh-text-muted); }

.hh-metric__icon {
    position: absolute;
    top: var(--hh-space-4);
    right: var(--hh-space-4);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--hh-radius-sm);
    background: var(--hh-surface-2);
    color: var(--hh-text-subtle);
    font-size: 0.9rem;
}

/* The primary metric — balance — is the one tile that gets gold. */
.hh-metric--primary { border-color: rgba(var(--hh-honey-rgb), 0.3); }
.hh-metric--primary .hh-metric__value { color: var(--hh-honey-bright); }
.hh-metric--primary .hh-metric__icon {
    background: rgba(var(--hh-honey-rgb), 0.14);
    color: var(--hh-honey);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    border-radius: var(--hh-radius-sm);
    padding: 8px 16px;
    font-size: 0.875rem;
    transition: background var(--hh-transition), border-color var(--hh-transition),
                color var(--hh-transition), transform var(--hh-transition);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--hh-honey);
    --bs-btn-border-color: var(--hh-honey);
    --bs-btn-color: var(--hh-honey-ink);
    --bs-btn-hover-bg: var(--hh-honey-bright);
    --bs-btn-hover-border-color: var(--hh-honey-bright);
    --bs-btn-hover-color: var(--hh-honey-ink);
    --bs-btn-active-bg: var(--hh-honey-deep);
    --bs-btn-active-border-color: var(--hh-honey-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--hh-surface-3);
    --bs-btn-disabled-border-color: var(--hh-border);
    --bs-btn-disabled-color: var(--hh-text-subtle);
}

.btn-secondary {
    --bs-btn-bg: var(--hh-surface-2);
    --bs-btn-border-color: var(--hh-border-strong);
    --bs-btn-color: var(--hh-text);
    --bs-btn-hover-bg: var(--hh-surface-3);
    --bs-btn-hover-border-color: var(--hh-border-strong);
    --bs-btn-hover-color: var(--hh-text);
}

.btn-outline-secondary {
    --bs-btn-color: var(--hh-text-muted);
    --bs-btn-border-color: var(--hh-border-strong);
    --bs-btn-hover-bg: var(--hh-surface-2);
    --bs-btn-hover-border-color: var(--hh-border-strong);
    --bs-btn-hover-color: var(--hh-text);
}

/* Bootstrap compiles outline variants with literal Sass colours rather than
   the runtime --bs-primary, so overriding the token alone leaves these blue. */
.btn-outline-primary {
    --bs-btn-color: var(--hh-honey);
    --bs-btn-border-color: rgba(var(--hh-honey-rgb), 0.45);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(var(--hh-honey-rgb), 0.12);
    --bs-btn-hover-border-color: var(--hh-honey);
    --bs-btn-hover-color: var(--hh-honey-bright);
    --bs-btn-active-bg: rgba(var(--hh-honey-rgb), 0.2);
    --bs-btn-active-border-color: var(--hh-honey);
    --bs-btn-active-color: var(--hh-honey-bright);
}

/* Light/warning buttons have no place in this palette; alias them to the
   brand so stray usages cannot punch a hole in the dark UI. */
.btn-light, .btn-warning {
    --bs-btn-bg: var(--hh-honey);
    --bs-btn-border-color: var(--hh-honey);
    --bs-btn-color: var(--hh-honey-ink);
    --bs-btn-hover-bg: var(--hh-honey-bright);
    --bs-btn-hover-border-color: var(--hh-honey-bright);
    --bs-btn-hover-color: var(--hh-honey-ink);
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--hh-text-muted);
}

.btn-ghost:hover { background: var(--hh-surface-2); color: var(--hh-text); }

.btn-danger {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(248, 113, 113, 0.4);
    --bs-btn-color: var(--hh-danger);
    --bs-btn-hover-bg: var(--hh-danger-bg);
    --bs-btn-hover-border-color: var(--hh-danger);
    --bs-btn-hover-color: var(--hh-danger);
}

/* --------------------------------------------------------------------------
   9. Badges & pills
   -------------------------------------------------------------------------- */

.hh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--hh-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.hh-badge i { font-size: 0.7em; }

.hh-badge--success { background: var(--hh-success-bg); color: var(--hh-success); }
.hh-badge--danger  { background: var(--hh-danger-bg);  color: var(--hh-danger); }
.hh-badge--info    { background: var(--hh-info-bg);    color: var(--hh-info); }
.hh-badge--neutral { background: var(--hh-neutral-bg); color: var(--hh-text-muted); }
.hh-badge--honey   { background: rgba(var(--hh-honey-rgb), 0.14); color: var(--hh-honey-bright); }

/* Status dot — carries meaning by shape+label too, never colour alone. */
.hh-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.hh-dot--pulse { animation: hh-pulse 2s ease-in-out infinite; }

@keyframes hh-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.hh-table-wrap { overflow-x: auto; border-radius: var(--hh-radius); }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hh-text);
    --bs-table-border-color: var(--hh-border);
    --bs-table-hover-bg: var(--hh-surface-2);
    --bs-table-hover-color: var(--hh-text);
    margin-bottom: 0;
}

.table > thead th {
    background: var(--hh-surface-inset);
    border-bottom: 1px solid var(--hh-border);
    padding: var(--hh-space-3) var(--hh-space-4);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
    white-space: nowrap;
}

.table > tbody td {
    padding: var(--hh-space-4);
    border-bottom: 1px solid var(--hh-border);
    vertical-align: middle;
}

.table > tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hh-text);
    margin-bottom: 6px;
}

.form-control, .form-select {
    background: var(--hh-surface-inset);
    border: 1px solid var(--hh-border-strong);
    border-radius: var(--hh-radius-sm);
    color: var(--hh-text);
    padding: 9px var(--hh-space-3);
    font-size: 0.9rem;
    transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}

.form-control:focus, .form-select:focus {
    background: var(--hh-surface-inset);
    border-color: var(--hh-honey);
    box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb), 0.18);
    color: var(--hh-text);
}

.form-control::placeholder { color: var(--hh-text-subtle); }
.form-control:disabled, .form-select:disabled {
    background: var(--hh-surface-2);
    color: var(--hh-text-subtle);
    cursor: not-allowed;
}

.form-text { font-size: 0.8125rem; color: var(--hh-text-muted); }

.input-group-text {
    background: var(--hh-surface-2);
    border-color: var(--hh-border-strong);
    color: var(--hh-text-muted);
}

.form-check-input { background-color: var(--hh-surface-inset); border-color: var(--hh-border-strong); }
.form-check-input:checked { background-color: var(--hh-honey); border-color: var(--hh-honey); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb), 0.18); }

.invalid-feedback, .hh-field-error {
    display: block;
    font-size: 0.8125rem;
    color: var(--hh-danger);
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   12. Alerts
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--hh-radius);
    border: 1px solid transparent;
    padding: var(--hh-space-4) var(--hh-space-5);
    font-size: 0.9rem;
}

.alert-success { background: var(--hh-success-bg); border-color: rgba(52, 211, 153, 0.3); color: var(--hh-success); }
.alert-danger  { background: var(--hh-danger-bg);  border-color: rgba(248, 113, 113, 0.3); color: var(--hh-danger); }
.alert-info    { background: var(--hh-info-bg);    border-color: rgba(96, 165, 250, 0.3);  color: var(--hh-info); }
.alert-warning { background: rgba(var(--hh-honey-rgb), 0.12); border-color: rgba(var(--hh-honey-rgb), 0.3); color: var(--hh-honey-bright); }
.alert-secondary { background: var(--hh-neutral-bg); border-color: var(--hh-border-strong); color: var(--hh-text-muted); }

/* --------------------------------------------------------------------------
   13. Page header & empty state
   -------------------------------------------------------------------------- */

.hh-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hh-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--hh-space-5);
}

.hh-page-head__title { font-size: 1.375rem; font-weight: 700; margin: 0 0 2px; }
.hh-page-head__sub { color: var(--hh-text-muted); font-size: 0.875rem; margin: 0; }

.hh-empty {
    text-align: center;
    padding: var(--hh-space-7) var(--hh-space-5);
    border-radius: var(--hh-radius);
}

.hh-empty__mark {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--hh-space-4);
    display: grid;
    place-items: center;
    color: var(--hh-honey);
    background: rgba(var(--hh-honey-rgb), 0.1);
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    font-size: 1.35rem;
}

.hh-empty__title { font-size: 1.05rem; font-weight: 650; margin-bottom: var(--hh-space-2); }
.hh-empty__text { color: var(--hh-text-muted); font-size: 0.9rem; max-width: 42ch; margin: 0 auto var(--hh-space-5); }

/* --------------------------------------------------------------------------
   14. Misc components
   -------------------------------------------------------------------------- */

.progress {
    background: var(--hh-surface-inset);
    border-radius: var(--hh-radius-pill);
    height: 6px;
}

.progress-bar { background: var(--hh-honey); }

.dropdown-menu {
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow-lg);
    padding: 6px;
}

.dropdown-item { border-radius: 6px; padding: 8px 12px; font-size: 0.875rem; }
.dropdown-divider { border-color: var(--hh-border); }

.modal-content { border-radius: var(--hh-radius-lg); box-shadow: var(--hh-shadow-lg); }
.modal-header, .modal-footer { padding: var(--hh-space-4) var(--hh-space-5); }
.modal-body { padding: var(--hh-space-5); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: 0.6; }
.btn-close:hover { opacity: 1; }

.hh-copy-field {
    display: flex;
    align-items: center;
    gap: var(--hh-space-2);
    padding: var(--hh-space-3) var(--hh-space-4);
    background: var(--hh-surface-inset);
    border: 1px dashed var(--hh-border-strong);
    border-radius: var(--hh-radius-sm);
    font-family: var(--hh-font-mono);
    font-size: 0.85rem;
    color: var(--hh-honey-bright);
    word-break: break-all;
}

/* --------------------------------------------------------------------------
   15. Auth screens
   -------------------------------------------------------------------------- */

.hh-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--hh-space-5);
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(var(--hh-honey-rgb), 0.10), transparent 70%),
        var(--hh-bg);
}

.hh-auth__card {
    width: 100%;
    max-width: 420px;
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-lg);
    box-shadow: var(--hh-shadow-lg);
    padding: var(--hh-space-6);
}

.hh-auth__title { font-size: 1.35rem; font-weight: 700; margin-bottom: 4px; }
.hh-auth__sub { color: var(--hh-text-muted); font-size: 0.875rem; margin-bottom: var(--hh-space-5); }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

.hh-sidebar__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1999;
}

@media (max-width: 991.98px) {
    .hh-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 2000 !important;
    }
    .hh-sidebar.is-open {
        transform: translateX(0) !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.8) !important;
    }
    .hh-sidebar__backdrop.is-open {
        display: block !important;
    }
    .hh-main { margin-inline-start: 0; }
    .hh-content { padding: var(--hh-space-4); }
    .hh-metric__value { font-size: 1.5rem; }
}

@media (min-width: 992px) {
    .hh-sidebar.is-collapsed { transform: translateX(-100%); }
    .hh-main.is-wide { margin-inline-start: 0; }
}

/* Comfortable hit targets on touch devices without bloating the desktop UI. */
@media (pointer: coarse) {
    .hh-nav__link { padding-block: 12px; }
    .btn { padding-block: 11px; }
    .hh-icon-btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   17. Comprehensive Mobile & Small Screen Enhancements
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* Main Layout Spacing */
    .hh-content {
        padding: var(--hh-space-4) var(--hh-space-3);
    }
    .hh-topbar {
        padding: 0 var(--hh-space-3);
        gap: var(--hh-space-2);
    }
    .hh-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--hh-space-3);
    }
    .hh-page-head__title {
        font-size: 1.25rem;
    }
    .hh-page-head .btn,
    .hh-page-head .d-flex {
        width: 100%;
    }

    /* Metric Tiles Grid */
    .hh-metrics {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: var(--hh-space-3);
    }
    .hh-metric {
        padding: var(--hh-space-3);
    }
    .hh-metric__value {
        font-size: 1.35rem;
    }
    .hh-metric__icon {
        top: var(--hh-space-3);
        right: var(--hh-space-3);
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    /* Table & Actions Polish */
    .hh-table-wrap {
        border-radius: var(--hh-radius-sm);
        margin-inline: calc(var(--hh-space-3) * -1);
    }
    .table > tbody td, .table > thead th {
        padding: var(--hh-space-3);
        font-size: 0.8125rem;
    }
    .table .btn-group {
        display: flex;
        gap: 4px;
    }
    .table .btn-sm {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    /* Store & Pricing Cards Scale Reset */
    .store-pricing-card-highlight,
    [style*="transform: scale(1.05)"] {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Landing Page Hero & Fixes */
    .hero-title {
        font-size: 2.1rem !important;
        line-height: 1.2 !important;
    }
    .hero-badge-float {
        position: static !important;
        transform: none !important;
        margin-top: 12px;
    }
    .hex-grid-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
}

@media (max-width: 575.98px) {
    .hh-balance {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    .hh-wordmark {
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   18. Modern Redesign for Login & Register Pages (Matches Mockup)
   --------------------------------------------------------------------------
   NOTE: the media query above used to be left unclosed here, so every rule
   from this point to the end of the file — the whole login redesign, and
   everything appended after it — was nested inside
   @media (max-width: 575.98px) and only applied on screens under 576px wide.
   On a desktop browser none of it existed. That is why the redesigned login
   looked unstyled and why later sections appeared to do nothing.
   -------------------------------------------------------------------------- */

.auth-page-body {
    background-color: #090C13;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif);
}

.hh-auth-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    overflow: hidden;
    background-color: #090C13;
}

.auth-glow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.05) 45%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.auth-particles-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.auth-p-bee {
    position: absolute;
    font-size: 1.25rem;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6));
    animation: authBeeFloat 9s ease-in-out infinite alternate;
}
.auth-p-bee.b-1 { top: 22%; left: 16%; animation-delay: 0s; }
.auth-p-bee.b-2 { top: 30%; right: 18%; animation-delay: -3s; }
.auth-p-bee.b-3 { bottom: 20%; left: 24%; animation-delay: -6s; }

@keyframes authBeeFloat {
    0%   { transform: translate(0, 0) scale(0.9) rotate(-5deg); }
    50%  { transform: translate(15px, -15px) scale(1.1) rotate(5deg); }
    100% { transform: translate(-10px, 10px) scale(0.95) rotate(-3deg); }
}

.auth-p-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FBBF24;
    box-shadow: 0 0 12px #F59E0B;
    animation: authDotPulse 4s ease-in-out infinite alternate;
}
.auth-p-dot.d-1 { top: 28%; left: 12%; animation-delay: 0s; }
.auth-p-dot.d-2 { top: 45%; right: 14%; animation-delay: -1s; }
.auth-p-dot.d-3 { bottom: 32%; right: 28%; animation-delay: -2s; }
.auth-p-dot.d-4 { top: 68%; left: 18%; animation-delay: -3s; }
.auth-p-dot.d-5 { top: 15%; right: 30%; animation-delay: -1.5s; }

@keyframes authDotPulse {
    0%   { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 0.9; transform: scale(1.4); }
}

.auth-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 440px;
}

.auth-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-hex-icon {
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.7));
    transition: transform 0.3s ease;
}
.auth-brand-logo:hover .brand-hex-icon {
    transform: scale(1.08) rotate(15deg);
}

.auth-brand-name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #FFFFFF;
}

.hh-auth-card {
    background: #141822;
    border: 1.5px solid #F59E0B;
    border-radius: 12px;
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.35), 0 0 12px rgba(245, 158, 11, 0.2), 0 15px 35px rgba(0, 0, 0, 0.8);
    padding: 32px 28px 0 28px;
    overflow: hidden;
    position: relative;
}

.auth-card-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.auth-card-sub {
    color: #94A3B8;
    font-size: 0.875rem;
    margin-bottom: 24px;
}

.auth-form-label {
    font-size: 0.825rem;
    font-weight: 600;
    color: #CBD5E1;
    margin-bottom: 6px;
    display: block;
}

.auth-form-control {
    background-color: #0E121B !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.auth-form-control:focus {
    border-color: #F59E0B !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
    outline: none !important;
}

.auth-form-control::placeholder {
    color: #475569 !important;
}

.auth-link-forgot {
    color: #F59E0B;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color 0.2s;
}
.auth-link-forgot:hover {
    color: #FBBF24;
    text-decoration: underline;
}

.btn-auth-primary {
    background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #D97706 100%) !important;
    color: #0B0E14 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 16px !important;
    font-size: 0.95rem !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-auth-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.65) !important;
    color: #000 !important;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.auth-divider span {
    padding: 0 10px;
}

.auth-social-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0E121B;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #CBD5E1;
    font-size: 1.1rem;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.auth-social-btn:hover {
    border-color: #F59E0B;
    color: #FBBF24;
    background: #141822;
}

.auth-card-footer {
    background: rgba(11, 14, 20, 0.65);
    margin: 24px -28px 0 -28px;
    padding: 14px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.875rem;
    color: #94A3B8;
}

.auth-card-footer a {
    color: #FBBF24;
    font-weight: 600;
    text-decoration: none;
}
.auth-card-footer a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   17. SEO report
   -------------------------------------------------------------------------- */

.hh-score { position: relative; display: inline-grid; place-items: center; margin: 0 auto; }

.hh-score__value {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.hh-score__value span {
    display: block;
    font-family: var(--hh-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hh-score-tone, var(--hh-honey));
}

.hh-score__value small { color: var(--hh-text-subtle); font-size: .8rem; }

/* Category meters */
.hh-meter {
    height: 8px;
    border-radius: var(--hh-radius-pill);
    background: var(--hh-surface-inset);
    overflow: hidden;
}

.hh-meter__fill {
    height: 100%;
    border-radius: var(--hh-radius-pill);
    transition: width var(--hh-transition);
}

/* Fix list — Bootstrap's accordion, retoned. */
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--hh-border); }

.hh-fix { background: transparent; border-bottom: 1px solid var(--hh-border); }
.hh-fix:last-child { border-bottom: 0; }

.hh-fix .accordion-button {
    background: transparent;
    color: var(--hh-text);
    padding: var(--hh-space-4) var(--hh-space-5);
    box-shadow: none;
    gap: var(--hh-space-3);
}

.hh-fix .accordion-button:not(.collapsed) { background: var(--hh-surface-2); color: var(--hh-text); }
.hh-fix .accordion-button:focus-visible { outline: 2px solid var(--hh-honey); outline-offset: -2px; }
.hh-fix .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }

.hh-fix__icon { flex: 0 0 auto; font-size: 1rem; }

.hh-fix .accordion-body {
    padding: 0 var(--hh-space-5) var(--hh-space-5);
    background: var(--hh-surface-2);
}

.hh-fix__heading {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
    margin-bottom: 6px;
}

/* Copy-paste snippets */
.hh-snippet {
    margin: 0;
    padding: var(--hh-space-4);
    background: var(--hh-surface-inset);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-sm);
    font-family: var(--hh-font-mono);
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--hh-honey-bright);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Compact score pill for the websites table */
.hh-seo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--hh-radius-pill);
    font-family: var(--hh-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    font-weight: 700;
    background: var(--hh-neutral-bg);
    color: var(--hh-text-muted);
}

/* --------------------------------------------------------------------------
   16. Knowledge base
   --------------------------------------------------------------------------
   Article bodies are rendered from Markdown, so these styles have to work on
   plain generated tags — there is no opportunity to put a class on an <h2>
   that CommonMark produced. Everything for the body is scoped under .hh-prose
   for that reason.
   -------------------------------------------------------------------------- */

.hh-kb-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--hh-space-5);
    align-items: start;
}

@media (max-width: 991px) {
    .hh-kb-layout { grid-template-columns: minmax(0, 1fr); }
}

.hh-kb-side {
    position: sticky;
    top: calc(var(--hh-topbar-h) + var(--hh-space-4));
    display: flex;
    flex-direction: column;
    gap: var(--hh-space-1);
}

@media (max-width: 991px) {
    .hh-kb-side { position: static; }
}

.hh-kb-side__heading {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
    padding: 0 var(--hh-space-3);
    margin-bottom: var(--hh-space-2);
}

/* Category filter -------------------------------------------------------- */

.hh-kb-cat {
    display: flex;
    align-items: center;
    gap: var(--hh-space-3);
    padding: var(--hh-space-2) var(--hh-space-3);
    border-radius: var(--hh-radius-sm);
    color: var(--hh-text-muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background var(--hh-transition), color var(--hh-transition);
}

.hh-kb-cat:hover {
    background: var(--hh-surface-2);
    color: var(--hh-text);
}

/* The active nav item is one of the four places honey is permitted. */
.hh-kb-cat--active {
    background: rgba(var(--hh-honey-rgb), 0.10);
    color: var(--hh-honey-bright);
    font-weight: 600;
}

.hh-kb-cat__icon {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    font-size: .8rem;
}

.hh-kb-cat__count {
    margin-left: auto;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: var(--hh-text-subtle);
}

.hh-kb-cat--active .hh-kb-cat__count { color: var(--hh-honey); }

/* Search ----------------------------------------------------------------- */

.hh-kb-search { position: relative; margin-bottom: var(--hh-space-5); }

.hh-kb-search__icon {
    position: absolute;
    left: var(--hh-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--hh-text-subtle);
    pointer-events: none;
}

.hh-kb-search__input {
    width: 100%;
    padding: var(--hh-space-3) var(--hh-space-4) var(--hh-space-3) 42px;
    background: var(--hh-surface-inset);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    color: var(--hh-text);
    font-family: var(--hh-font);
    font-size: .9375rem;
    transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}

.hh-kb-search__input::placeholder { color: var(--hh-text-subtle); }

.hh-kb-search__input:focus {
    outline: none;
    border-color: var(--hh-border-strong);
    box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb), 0.12);
}

/* Article cards ---------------------------------------------------------- */

.hh-kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--hh-space-4);
}

.hh-kb-card {
    display: flex;
    flex-direction: column;
    gap: var(--hh-space-2);
    padding: var(--hh-space-5);
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    text-decoration: none;
    transition: border-color var(--hh-transition),
                transform var(--hh-transition),
                box-shadow var(--hh-transition);
}

.hh-kb-card:hover {
    border-color: var(--hh-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--hh-shadow-md);
}

.hh-kb-card__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--hh-space-1);
    border-radius: var(--hh-radius-sm);
    background: var(--hh-surface-3);
    color: var(--hh-text-muted);
    font-size: .9rem;
    transition: color var(--hh-transition);
}

.hh-kb-card:hover .hh-kb-card__icon { color: var(--hh-honey); }

.hh-kb-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hh-text);
}

.hh-kb-card__sub {
    margin: 0;
    flex-grow: 1;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--hh-text-muted);
}

.hh-kb-card__meta {
    display: flex;
    align-items: center;
    gap: var(--hh-space-3);
    margin-top: var(--hh-space-2);
    font-size: .75rem;
    color: var(--hh-text-subtle);
}

.hh-kb-group__heading {
    display: flex;
    align-items: center;
    gap: var(--hh-space-3);
    margin: var(--hh-space-6) 0 var(--hh-space-4);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hh-text-subtle);
}

.hh-kb-group:first-child .hh-kb-group__heading { margin-top: 0; }

.hh-kb-group__rule {
    flex: 1;
    height: 1px;
    background: var(--hh-border);
}

/* Article page ----------------------------------------------------------- */

.hh-kb-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--hh-space-6);
    align-items: start;
}

@media (max-width: 991px) {
    .hh-kb-article { grid-template-columns: minmax(0, 1fr); }
    .hh-kb-toc { display: none; }
}

.hh-kb-toc {
    position: sticky;
    top: calc(var(--hh-topbar-h) + var(--hh-space-4));
    padding-left: var(--hh-space-4);
    border-left: 1px solid var(--hh-border);
}

.hh-kb-toc__link {
    display: block;
    padding: var(--hh-space-1) 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--hh-text-muted);
    text-decoration: none;
    transition: color var(--hh-transition);
}

.hh-kb-toc__link:hover { color: var(--hh-honey-bright); }
.hh-kb-toc__link--sub { padding-left: var(--hh-space-3); font-size: .78rem; }

.hh-kb-crumb {
    display: flex;
    align-items: center;
    gap: var(--hh-space-2);
    margin-bottom: var(--hh-space-3);
    font-size: .8125rem;
    color: var(--hh-text-subtle);
}

.hh-kb-crumb a { color: var(--hh-text-muted); text-decoration: none; }
.hh-kb-crumb a:hover { color: var(--hh-honey-bright); }

/* Rendered Markdown ------------------------------------------------------ */

.hh-prose {
    max-width: 72ch;
    color: var(--hh-text-muted);
    font-size: .9375rem;
    line-height: 1.75;
}

.hh-prose > *:first-child { margin-top: 0; }

.hh-prose h2 {
    margin: var(--hh-space-6) 0 var(--hh-space-3);
    padding-top: var(--hh-space-2);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hh-text);
    scroll-margin-top: calc(var(--hh-topbar-h) + var(--hh-space-4));
}

.hh-prose h3 {
    margin: var(--hh-space-5) 0 var(--hh-space-2);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--hh-text);
    scroll-margin-top: calc(var(--hh-topbar-h) + var(--hh-space-4));
}

.hh-prose p { margin: 0 0 var(--hh-space-4); }

.hh-prose strong { color: var(--hh-text); font-weight: 650; }

.hh-prose a {
    color: var(--hh-honey-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(var(--hh-honey-rgb), 0.4);
}

.hh-prose a:hover { text-decoration-color: var(--hh-honey); }

.hh-prose ul,
.hh-prose ol { margin: 0 0 var(--hh-space-4); padding-left: var(--hh-space-5); }
.hh-prose li { margin-bottom: var(--hh-space-2); }
.hh-prose li::marker { color: var(--hh-text-subtle); }

.hh-prose code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--hh-surface-3);
    color: var(--hh-honey-bright);
    font-family: var(--hh-font-mono);
    font-size: .85em;
}

.hh-prose pre {
    margin: 0 0 var(--hh-space-4);
    padding: var(--hh-space-4);
    background: var(--hh-surface-inset);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-sm);
    overflow-x: auto;
}

.hh-prose pre code {
    padding: 0;
    background: none;
    color: var(--hh-text);
    font-size: .8125rem;
    line-height: 1.7;
}

.hh-prose blockquote {
    margin: 0 0 var(--hh-space-4);
    padding: var(--hh-space-3) var(--hh-space-4);
    border-left: 3px solid var(--hh-honey-deep);
    background: var(--hh-surface-2);
    border-radius: 0 var(--hh-radius-sm) var(--hh-radius-sm) 0;
}

.hh-prose blockquote p:last-child { margin-bottom: 0; }

/* Tables carry most of the reference data in these articles — the earning
   ratios, the level bonuses, the fair-use limits — so they get real treatment
   rather than browser defaults. */
.hh-prose table {
    width: 100%;
    margin: 0 0 var(--hh-space-4);
    border-collapse: collapse;
    font-size: .875rem;
}

.hh-prose thead th {
    padding: var(--hh-space-2) var(--hh-space-3);
    background: var(--hh-surface-2);
    border-bottom: 1px solid var(--hh-border-strong);
    color: var(--hh-text);
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-prose tbody td {
    padding: var(--hh-space-2) var(--hh-space-3);
    border-bottom: 1px solid var(--hh-border);
}

.hh-prose tbody tr:last-child td { border-bottom: none; }
.hh-prose tbody td:first-child { color: var(--hh-text); }

.hh-prose hr {
    margin: var(--hh-space-6) 0;
    border: 0;
    border-top: 1px solid var(--hh-border);
}

/* Wide tables scroll inside their own box rather than pushing the page. */
.hh-prose-scroll { overflow-x: auto; }

/* Helpful vote ----------------------------------------------------------- */

.hh-kb-vote {
    display: flex;
    align-items: center;
    gap: var(--hh-space-3);
    flex-wrap: wrap;
    margin-top: var(--hh-space-6);
    padding: var(--hh-space-4) var(--hh-space-5);
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
}

.hh-kb-vote__label {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--hh-text);
}

/* --------------------------------------------------------------------------
   17. Analytics world map
   --------------------------------------------------------------------------
   Shared by Exchange Analytics and Site Analytics. Leaflet ships its own light
   theme and injects the elements itself, so these overrides have to reach
   generated classes and need !important to beat the plugin stylesheet.
   -------------------------------------------------------------------------- */

.hh-map {
    height: 420px;
    border-radius: var(--hh-radius);
    background: var(--hh-surface-inset);
    /* Belt and braces against a mis-measured map painting tiles outside its
       box and over the panel above it. */
    overflow: hidden;
    /* Below the sidebar and any modal: Leaflet's panes claim high z-indexes
       and will otherwise sit on top of the navigation. */
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.hh-map--short { height: 340px; }

.leaflet-container { background: var(--hh-surface-inset) !important; }

.leaflet-popup-content-wrapper {
    background: var(--hh-surface) !important;
    border: 1px solid var(--hh-border-strong) !important;
    border-radius: var(--hh-radius-sm) !important;
    color: var(--hh-text) !important;
    box-shadow: var(--hh-shadow-md) !important;
}

.leaflet-popup-tip { background: var(--hh-surface) !important; }

.leaflet-popup-content {
    margin: 10px 14px;
    font-family: var(--hh-font);
    font-size: .875rem;
}

.leaflet-control-attribution {
    background: rgba(11, 14, 20, 0.7) !important;
    color: var(--hh-text-subtle) !important;
    font-size: .65rem;
}

.leaflet-control-attribution a { color: var(--hh-text-muted) !important; }

.leaflet-control-zoom a {
    background: var(--hh-surface) !important;
    color: var(--hh-text) !important;
    border-color: var(--hh-border) !important;
}

.leaflet-control-zoom a:hover { background: var(--hh-surface-2) !important; }

/* Expanding ring under each marker. */
.map-ping-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid var(--hh-honey);
    animation: pingRing 2s ease-out infinite;
}

@keyframes pingRing {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(4); opacity: 0; }
}

/* A pulsing ring is decoration; it should not animate for anyone who has
   asked the system to stop moving things. */
@media (prefers-reduced-motion: reduce) {
    .map-ping-ring { animation: none; opacity: 0.35; }
}

.hh-map-legend {
    display: flex;
    gap: var(--hh-space-4);
    flex-wrap: wrap;
    padding: var(--hh-space-3) var(--hh-space-4);
    background: var(--hh-surface-2);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-sm);
    font-size: .8rem;
    color: var(--hh-text-muted);
}

.hh-map-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}