/* ==========================================================
   SQLISM — STAR / FAVORITE TOGGLE BUTTONS
   Injected by includes/user-activity.js on tool + blog pages for
   logged-in users only. Reuses the --primary / --bg-card / --border
   variables already defined in includes/navbar.css so it matches
   both the light and dark theme without any extra setup.
   ========================================================== */

.sqlism-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-card, #ffffff);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sqlism-toggle-btn:hover {
    transform: scale(1.08);
    border-color: var(--primary, #8b5cf6);
}

.sqlism-toggle-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.sqlism-toggle-btn--star.is-active {
    color: #f59e0b;
    border-color: #f59e0b;
}

.sqlism-toggle-btn--heart.is-active {
    color: #ef4444;
    border-color: #ef4444;
}

/* Sitting on top of a whole-card link (.tool-card / .blog-card) — only
   used as a fallback when the card has no badge/pill to group with
   (see .sqlism-card-topright below for the tools-index case). */
.sqlism-toggle-btn--card {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Grouped inline next to a card's existing top-right badge (e.g.
   .tool-badge "Beginner"/"Intermediate") instead of floating on top of
   it — see initToolsIndex() in user-activity.js. */
.sqlism-card-topright {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sqlism-toggle-btn--inline {
    width: 28px;
    height: 28px;
    font-size: 12px;
    flex-shrink: 0;
}

/* Sitting next to a page/article heading */
.sqlism-toggle-btn--heading {
    margin-left: 12px;
    vertical-align: middle;
}

@media (max-width: 640px) {
    .sqlism-toggle-btn {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

/* ==========================================================
   GUEST "WHY SIGN IN" TOOLTIP
   includes/navbar.php swaps the guest Sign in link's icon for an
   info glyph and hovering/focusing it shows what an account
   actually unlocks — the real, synced Dashboard built above.
   Logged-in users never render this markup at all.
   ========================================================== */
/* Plain layout box — intentionally has NO background/border/radius of its
   own. The visible "Sign in" pill look comes entirely from the .nav-login
   <a> itself (styled by the shared .navbar .nav-links a chip rules in
   navbar.css); this wrapper's only job is to position the tooltip relative
   to the pill (desktop) and stack the tooltip under the pill without the
   pill's own chip background stretching to cover it (mobile). */
.nav-login-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-login-tooltip {
    /* Border-box so the 14px/16px padding + 1px border are INCLUDED in the
       width below rather than added on top of it. Without this (the
       default content-box model), a "300px" tooltip actually renders ~330px
       wide, wide enough to get silently sliced by the mobile panel's
       overflow-x:hidden below — text loses its left few characters and the
       card's left padding/edge with it, which read as "truncation". */
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: max-content;
    max-width: min(250px, 82vw);
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 14px 32px -12px rgba(15, 23, 42, 0.3);
    color: var(--text-primary, #1f2937);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
}

.nav-login-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--bg-card, #ffffff);
    filter: drop-shadow(0 -2px 2px rgba(15, 23, 42, 0.06));
}

.nav-login-tooltip strong {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #8b5cf6);
}

.nav-login-tooltip ul {
    margin: 0;
    padding-left: 16px;
}

.nav-login-tooltip li {
    margin-bottom: 4px;
}
.nav-login-tooltip li:last-child {
    margin-bottom: 0;
}

.nav-login-info-icon {
    cursor: pointer;
}

.nav-login-wrap:hover .nav-login-tooltip,
.nav-login-wrap:focus-within .nav-login-tooltip,
.nav-login-wrap.is-open .nav-login-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* Below 768px (the site's actual navbar collapse point — see
   includes/navbar.css). REWRITTEN 2026-08-23 — the comment this replaced
   described an OLDER architecture where "Sign in" lived inside the
   slide-out .nav-links panel and the tooltip opened as an in-flow
   accordion block (pushing the rest of the dropdown down). That stopped
   being true the same day it was written: navbar.css's later "NAV ORDER
   (v5)" change moved .nav-login-wrap OUT of .nav-links to be a
   .navbar-level sibling, always visible in the top bar (same slot as the
   logged-in avatar, .nav-user) — nobody circled back to update this file
   for that, so the accordion rules below kept firing in a context they
   were never designed for.

   Concretely, two live bugs this caused, both reported together and
   traced to this same stale block:
   1) `.navbar .nav-login-wrap { width: 100%; ... }` requested 100% of the
      TOP BAR's width (its actual flex container now), not 100% of a
      dropdown panel — ballooning the pill far past the hamburger. Per the
      flexbox spec an `auto` margin can't resolve negative, so once total
      item width overflowed the row, `.theme-toggle-container`'s
      `margin-left: auto` (in navbar.css) silently collapsed to 0 — which
      is what visually pulled the theme toggle flush against the logo.
   2) `.nav-login-tooltip { position: static; ...; display: none/block }`
      made the opened tooltip a normal in-flow block INSIDE the fixed-height
      top bar (not a dropdown panel that can grow), so tapping the info
      icon stretched the whole navbar taller to fit it.

   Fix: keep .nav-login-wrap a normal, fixed-size inline pill on mobile
   (same as desktop) and keep the tooltip an absolutely-positioned
   floating dropdown — just right-anchored instead of centered, since the
   pill now sits close to the right edge of the top bar. Still opens only
   via a tap on the info icon (initGuestSignInTooltip in user-activity.js,
   unchanged), toggling the same .is-open class. */
@media (max-width: 768px) {
    .navbar .nav-login-wrap {
        width: auto;
    }
    .nav-login-tooltip {
        left: auto;
        right: 0;
        transform: translateY(4px);
        width: max-content;
        max-width: min(240px, calc(100vw - 32px));
    }
    .nav-login-tooltip::before {
        display: none;
    }
    .navbar .nav-login-wrap.is-open .nav-login-tooltip {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* includes/navbar.css has an OLDER, unprefixed `.nav-links { overflow:
       hidden; ... }` rule (same 768px breakpoint, lower specificity, but
       nothing else in that file sets overflow-x, so it still wins for that
       axis) plus `.navbar .nav-links.show { max-height: 520px; }` (no
       overflow override at all). Together: any content taller than 520px
       gets hard-clipped vertically, AND overflow-x stays hidden even
       though nothing intentionally wants horizontal clipping here — a
       tooltip that's a hair wider than its box (see the box-sizing note
       above) gets silently sliced down its left edge instead of just
       being visible. Both were live bugs the moment this tooltip could
       render taller/wider than a normal one-line nav item, not just a
       remote edge case. Selector matches includes/navbar.css's
       `.navbar .nav-links.show` exactly, and this file loads after it, so
       these properties win without needing !important. */
    .navbar .nav-links.show {
        max-height: min(80vh, 720px);
        overflow-x: visible;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   SQLISM PRO — account-menu badge + upgrade link
   Added here rather than navbar.css on purpose, same reasoning as
   the guest tooltip above: navbar.css has several overlapping
   legacy rule blocks at the same breakpoints, a recurring source of
   bugs in that file specifically. This file loads after it.

   Colors use navbar.css's --gold/--gold-soft/--gold-border tokens
   (theme-aware) rather than a fixed pale gold — this dropdown's
   background is var(--bg-card), which is WHITE in light theme, and
   the badge/link previously used a flat #fde68a that read fine on
   the always-dark surfaces elsewhere on the site but washed out to
   near-invisible on a white card. Fixed 2026-08-23 as part of a
   sitewide Pro-branding gold pass — see [[navbar_css_notes]].
   ============================================================ */
.nav-pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--gold-soft);
    border: 1px solid var(--gold-border);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.nav-user__upgrade {
    color: var(--gold) !important;
    font-weight: 700;
}
.nav-user__upgrade i { color: var(--gold); }