/*!
 * HBP Design Refine
 * -----------------------------------------------------------------
 * A global, load-last layer that refines the plugin's existing look
 * WITHOUT renaming a single class or changing a single color value.
 * Every color reference below is one of the --hbp-* variables the
 * admin already controls (Settings → Appearance) — this file only
 * ever reads them, never redefines them.
 *
 * What "refine" means here, concretely:
 *   - No hover-lift + colored-glow-shadow combo. Depth on hover comes
 *     from a border/background shift, not the button/card jumping up
 *     with a shadow blooming under it.
 *   - Hairline borders do more of the work than shadows. Shadows stay
 *     as a faint anchor (already --hbp-shadow-xs/sm in style.css),
 *     never as the primary hover feedback.
 *   - Real focus-visible rings, a thin custom scrollbar, and a
 *     branded ::selection — small signature touches that cost
 *     nothing in risk since they only apply where the browser default
 *     would otherwise show.
 *   - A touch of type rhythm on headings or uppercase labels
 *     (tightened tracking on large text, wider tracking on small caps
 *     labels) — the same instinct as the reference file's h1–h6 scale,
 *     applied only as tweaks, not a rewrite of every heading rule.
 *
 * Loaded after every other plugin stylesheet in each context (see the
 * enqueue calls in helpblogger-profiler.php / settings.php), so these
 * rules win the cascade on shared selectors without needing !important.
 * -----------------------------------------------------------------
 */

/* ============================================================
   1. GLOBAL BASICS — scrollbar, selection, focus, motion
   ============================================================ */
.hbp-dashboard,
.hbp-reader-body,
.hbp-sitemode-body,
body {
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--hbp-gray-300, #CBD5E1);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--hbp-gray-400, #94A3B8); }

::selection { background: var(--hbp-primary); color: #fff; }

/* A real focus ring wherever the browser default would show its own
   (native buttons/links/inputs not already covered by a component's
   own :focus rule) — never removes focus, only makes it consistent. */
a:focus-visible,
button:focus-visible,
.hbp-btn:focus-visible,
.hbp-tts-listen-btn:focus-visible,
.hbp-scomp-pay-btn:focus-visible {
    outline: 2px solid var(--hbp-primary);
    outline-offset: 2px;
}

/* Respect reduced-motion preferences globally */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   2. BUTTONS — kill the hover-lift + glow-shadow combo
      Depth comes from a background/border shift only, same as the
      button's own hover already darkens the fill — we just remove
      the jump-up-with-shadow on top of it.
   ============================================================ */
.hbp-btn-primary:hover,
.hbp-btn-outline:hover,
.hbp-btn-ghost:hover,
.hbp-btn-danger:hover,
.hbp-btn-success:hover,
.hbp-unlock-btn:hover,
.hbp-unlock-pay-btn:hover,
.hbp-support-vote:hover,
.hbp-support-prevnext-link:hover,
.hbp-support-related-card:hover,
.hbp-chat-side-fab--left:hover {
    transform: none;
}
.hbp-btn-primary:hover { box-shadow: var(--hbp-shadow-xs, 0 1px 2px rgba(0,0,0,.06)); }
.hbp-unlock-btn:hover, .hbp-unlock-pay-btn:hover { box-shadow: none; border-color: var(--hbp-primary); }
.hbp-chat-side-fab--left:hover { box-shadow: var(--hbp-shadow-sm, 0 2px 8px rgba(0,0,0,.08)); }

/* ============================================================
   3. CARDS / TILES — hairline emphasis on hover instead of a lift
   ============================================================ */
.hbp-type-card:hover,
.hbp-plan-card:hover {
    transform: none;
}
.hbp-plan-card:hover { box-shadow: var(--hbp-shadow-xs, 0 1px 2px rgba(0,0,0,.06)); }

.hbp-card { transition: border-color .16s ease, box-shadow .16s ease; }
.hbp-card:hover { border-color: var(--hbp-gray-300, #CBD5E1); }

/* ============================================================
   4. STORY READER / TTS — same treatment on the pieces built most
      recently, kept consistent with the rest of the plugin.
   ============================================================ */
.hbp-tts-listen-btn { transition: background .14s ease, border-color .14s ease, color .14s ease; }
.hbp-tts-voice-option { transition: background .12s ease; }

/* ============================================================
   5. TYPE RHYTHM — small, safe tightening/loosening of tracking,
      matching the reference file's scale without touching any
      font-family, font-size, or color declared elsewhere.
   ============================================================ */
.hbp-dashboard h1, .hbp-reader-title, .hbp-scomp-modal-title {
    letter-spacing: -.01em;
}
.hbp-badge {
    letter-spacing: .04em;
}

/* ============================================================
   6. FORM CONTROLS — a calmer focus ring (border + soft ring
      together, not a heavier box-shadow stack) — values already
      exist in style.css, this only trims the stacking.
   ============================================================ */
.hbp-input:focus, .hbp-select:focus, .hbp-textarea:focus {
    transition: border-color .14s ease, box-shadow .14s ease;
}

/* ============================================================
   7. STATUS / BADGES — a hairline border to match the reference
      file's "bordered, not just filled" tag treatment, using the
      badge's own existing text color so nothing new is introduced.
   ============================================================ */
.hbp-badge { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 28%, transparent); }