/*
 * Alpha — page-specific styles.
 *
 * The avatar stack + hover tooltip styles live in
 * `components/smart_mentions/styles.css` (the renderer in
 * `static/js/components/ts_table/renderers.js:mentionersStack` outputs
 * `.sm-mentioners-*` classes). The alpha template loads that stylesheet
 * too, and this file adds only the page chrome: title, period pill tabs,
 * info hint, column widths, footer note, dark-mode tweaks.
 *
 * Six-column layout: № · Username · Followers · Twitter Score
 *                  · New Smart Followers · Description.
 */

.alpha-page {
    --alpha-blue: #0544FD;
    --alpha-blue-hover: #0033AD;
    --alpha-text: #000;
    --alpha-muted: #656565;
    --alpha-faint: #878593;
    --alpha-line: #EBEBEB;
    --alpha-soft: #F3F3F3;
    --alpha-row-hover: #FAFAFA;
    --alpha-tab-bg: #fff;
    --alpha-tab-inactive: #6B7280;
}

/* Tooltip's project-score badge — colored via `var(--sm-blue)` in
   smart_mentions/styles.css. That variable is scoped to .smart-mentions-page,
   so on .alpha-page it falls through to `inherit` (black). Re-pin it to
   our blue so the score in the "Top new followers" hover card matches
   the smart-mentions look. */
.alpha-page .sm-mentioners-tip__score {
    color: var(--alpha-blue);
}

/* See the same trio of overrides + rationale in
   components/smart_mentions/styles.css. The avatar-stack tooltip is a
   DOM descendant of a `<td>`, so it needs (a) the container's overflow
   relaxed, (b) the hovered row promoted above neighbours so the tooltip
   paints over them, and (c) the row hosting the open tooltip promoted
   above other hovered siblings so the 250ms close delay does not get
   covered by the new row's hover bg. */
.alpha-page .ts-table-container {
    overflow: visible !important;
}
.alpha-page table.ts-table tbody td {
    overflow: visible !important;
}
.alpha-page table.ts-table tbody tr:hover {
    position: relative;
    z-index: 200;
}
.alpha-page table.ts-table tbody tr:has(.sm-mentioners-stack.is-open) {
    position: relative;
    z-index: 300;
}

/* "Top new Alpha Followers" hover tooltip — solid, theme-aware surface.
   The shared smart-mentions card has only a base `background:#fff` with no
   dark override, so on the dark Alpha page it read as a see-through panel
   with the table bleeding through. Scoped to .alpha-page so the
   smart-mentions page tooltip is untouched. */
.alpha-page .sm-mentioners-tip,
.alpha-page .sm-mentioners-tip__inner {
    background: #fff;
}
.alpha-page .sm-mentioners-tip {
    z-index: 400;
}
.dark .alpha-page .sm-mentioners-tip,
.dark .alpha-page .sm-mentioners-tip__inner {
    background: #1c1c23;
}
.dark .alpha-page .sm-mentioners-tip {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dark .alpha-page .sm-mentioners-tip__title {
    color: #f4f4f6;
}

.alpha-page-title {
    text-align: center;
    padding: 55px 0 24px !important;
}
.alpha-page-title h1 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.4px;
}
.alpha-page-title p {
    color: var(--alpha-muted);
    font-size: 16px;
}

.content-wrapper.alpha-page {
    padding-top: 0 !important;
}

.mobile .content-wrapper.table-page.alpha-page {
    padding-left: 16px;
    padding-right: 16px;
}

/* ---- Period tabs --------------------------------------------------- */

.alpha-period-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.alpha-period-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--alpha-tab-bg);
    border: 1px solid var(--alpha-line);
    border-radius: 8px;
}
.alpha-period-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: 500;
    color: var(--alpha-tab-inactive);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.alpha-period-tab:hover:not(.active) {
    background: #F3F4F6;
    color: var(--alpha-text);
}
.alpha-period-tab.active {
    background: var(--alpha-blue);
    color: #fff;
    font-weight: 600;
}

/* ---- Period hint (info popover next to tabs) ---------------------- */

.alpha-period-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.alpha-period-hint__btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--alpha-faint);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.alpha-period-hint__btn:hover,
.alpha-period-hint__btn:focus-visible {
    color: var(--alpha-text);
    background: var(--alpha-soft);
    outline: none;
}
.alpha-period-hint__tip {
    display: none;
    position: absolute;
    z-index: 60;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 320px;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.alpha-period-hint:hover .alpha-period-hint__tip,
.alpha-period-hint:focus-within .alpha-period-hint__tip {
    display: block;
}
.alpha-period-hint__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--alpha-text);
    margin-bottom: 4px;
}
.alpha-period-hint__body {
    font-size: 12px;
    line-height: 1.4;
    color: var(--alpha-muted);
}
.alpha-period-hint__body strong {
    color: var(--alpha-text);
    font-weight: 600;
}

.mobile .alpha-period-row {
    position: relative;
}

.mobile .alpha-period-hint {
    position: static;
}

.mobile .alpha-period-hint__tip {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

/* ---- Column widths (6-col layout) --------------------------------- */

.alpha-page table.ts-table thead th,
.alpha-page table.ts-table tbody td {
    padding: 12px 10px !important;
}

.alpha-page table.ts-table thead th.alpha-col-rank        { width: 44px;  min-width: 44px; }
.alpha-page table.ts-table thead th.alpha-col-username    { width: 240px; min-width: 220px; }
.alpha-page table.ts-table thead th.alpha-col-followers   { width: 130px; min-width: 120px; }
.alpha-page table.ts-table thead th.alpha-col-score       { width: 110px; min-width: 100px; }
.alpha-page table.ts-table thead th.alpha-col-new         { width: 220px; min-width: 200px; }
.alpha-page table.ts-table thead th.alpha-col-description { width: auto;  min-width: 240px; }

.alpha-page table.ts-table tbody td.alpha-col-description { max-width: 360px; }

/* ---- Footer note --------------------------------------------------- */

.alpha-footer-note {
    margin-top: 32px;
    text-align: center;
    color: var(--alpha-muted);
    font-size: 12px;
}

/* ---- Dark mode ----------------------------------------------------- */

.dark .alpha-period-tabs {
    background: var(--card-bg, #1f1f23);
    border-color: var(--border, #2a2a2f);
}
.dark .alpha-period-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: #e6e6e6;
}
.dark .alpha-period-hint__btn:hover,
.dark .alpha-period-hint__btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #e6e6e6;
}
.dark .alpha-period-hint__tip {
    background: var(--card-bg, #1f1f23);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dark .alpha-period-hint__title,
.dark .alpha-period-hint__body strong {
    color: #e6e6e6;
}

/* ===================================================================
 * REDESIGN 2026-05-29 — left-aligned hero (replaces centered title)
 * Design source: claude.ai/design Alpha bundle. The old
 * `.alpha-page-title` (centered) is superseded by `.alpha-hero` in
 * templates/twitter/alpha.html. Tokens mirror static/css/basic/design_tokens.
 * =================================================================== */

.alpha-hero {
    max-width: 1136px;
    margin: 0 auto;
    padding: 36px 0 0;
    box-sizing: border-box;
}
.alpha-hero__title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 50px;
    letter-spacing: -0.6px;
    color: var(--alpha-text);
    margin: 0;
}
.alpha-hero__lead {
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #303030;
    margin: 12px 0 0;
}
.alpha-hero__desc {
    font-size: 15px;
    line-height: 23px;
    color: var(--alpha-muted);
    margin: 8px 0 0;
    max-width: 720px;
}

/* "How to read this page" — collapsible toggle + steps panel */
.alpha-hero__how {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--alpha-blue);
}
.alpha-hero__how svg {
    transition: transform 0.18s ease;
}
.alpha-hero__how[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.alpha-hero__steps {
    display: none;
    margin-top: 12px;
    padding: 16px 18px;
    background: var(--alpha-soft);
    border-radius: 12px;
    max-width: 720px;
}
.alpha-hero__steps.is-open {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.alpha-hero__step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.alpha-hero__step-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #DDDCE5;
    color: var(--alpha-blue);
    font-weight: 600;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
}
.alpha-hero__step-text {
    font-size: 14px;
    line-height: 20px;
    color: #484848;
}
.alpha-hero__step-text b {
    color: var(--alpha-text);
    font-weight: 600;
}

/* context sentence under the controls */
.alpha-context {
    padding-left: 8px;
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--alpha-faint);
}
.alpha-context b {
    color: #303030;
    font-weight: 600;
}

.mobile .alpha-hero {
    padding-left: 16px;
    padding-right: 16px;
}
.mobile .alpha-hero__title { font-size: 34px; line-height: 40px; }

/* ---- Hero dark mode ---- */
.dark .alpha-hero__title { color: #f4f4f6; }
.dark .alpha-hero__lead { color: #d8d8de; }
.dark .alpha-hero__desc { color: #9a98a4; }
.dark .alpha-hero__steps { background: rgba(255, 255, 255, 0.05); }
.dark .alpha-hero__step-num {
    background: #16161b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #2d6bff;
}
.dark .alpha-hero__step-text { color: #b4b4bc; }
.dark .alpha-hero__step-text b { color: #f4f4f6; }
.dark .alpha-context b { color: #d8d8de; }
.dark .alpha-hero__how { color: #2d6bff; }

/* ===================================================================
 * REDESIGN 2026-05-29 — period pills (rounded track) + tier gating
 * =================================================================== */

/* Single controls row (REDESIGN 2026-05-30): periods · divider · pills on one
   line, wrapping on narrow widths. Matches the design's "Controls" flex row
   (alpha.jsx): align-center, gap 16, flex-wrap, paddingLeft 8, margin 30/0/16.
   Replaces the old two-row layout (.alpha-period-row + .sf-v2-categories-wrapper). */
.alpha-controls-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-left: 8px;
    margin: 30px 0 16px;
}
.alpha-controls-divider {
    width: 1px;
    height: 26px;
    background: var(--alpha-line);
    flex-shrink: 0;
}
.alpha-categories {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dark .alpha-controls-divider { background: rgba(255, 255, 255, 0.12); }
.mobile .alpha-controls-row { padding-left: 16px; }
.mobile .alpha-controls-divider { display: none; }

/* Period track → rounded pill group (was a bordered radius-8 box).
   Track bg + button metrics match the design (alpha.jsx): bgElev #F2F3F6,
   buttons 8x18 padding, inactive weight 400 so the active blue pill stands
   out (the base rule sets weight 500; the design uses 400/600). */
.alpha-period-tabs {
    background: #F2F3F6;
    border: 0;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.alpha-period-tab {
    border-radius: 999px;
    height: 36px;
    line-height: 36px;
    padding: 0 18px;
    font-weight: 400;
}
.alpha-period-tab.active {
    box-shadow: 0 1px 2px rgba(16, 16, 20, 0.12);
}
/* locked period (1d / 30d for non-PRO) */
.alpha-period-tab.is-locked {
    color: var(--alpha-faint);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.alpha-period-tab.is-locked:hover {
    background: transparent;
    color: var(--alpha-muted);
}
.alpha-lock-ico {
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: -1px;
    flex-shrink: 0;
}

/* ---- Category pills: match the design's pill shape + gated state ----
 * Pills are emitted in JS as `.sf-v2-nav-link` (shared with smart-followers),
 * whose base style is a radius-10 "box". The design (alpha.jsx) wants a
 * fully-rounded pill (radius 999, 9x16 padding). Override under `.alpha-page`
 * only, so smart-followers is untouched.
 *
 * Locked pills (VC / Influencers / Angels for non-PRO) keep the SAME shape
 * and a SOLID border + lock glyph — NOT the dashed treatment (that came from
 * the free-tier mock; the approved design uses solid). They open a login/PRO
 * popover on hover. */
.alpha-page .sf-v2-nav-link {
    border-radius: 999px;
    padding: 9px 16px;
    gap: 9px;
    /* Base .sf-v2-nav-link forces height:28px + 12px text (smart-followers
       sizing). The design uses 14px text / ~40px tall pills, so override
       both here and on the label below. */
    height: auto;
    font-size: 14px;
    line-height: 20px;
}
.alpha-page .sf-v2-nav-link .sf-v2-tag-name {
    font-size: 14px;
    line-height: 20px;
}
.alpha-page .sf-v2-nav-link.active {
    border-radius: 999px;
}
.alpha-page .sf-v2-nav-link .sf-v2-tag-count-wrapper,
.alpha-page .sf-v2-nav-link .sf-v2-tag-count {
    border-radius: 999px;
}

/* Active (blue) pill: translucent-white count badge + white number, as in
   the design — instead of the base solid-white badge with dark text. */
.alpha-page .sf-v2-nav-link.active .sf-v2-tag-count-wrapper {
    background: rgba(255, 255, 255, 0.2);
}
.alpha-page .sf-v2-nav-link.active .sf-v2-tag-count {
    color: #fff;
}
/* Locked pill: white surface + solid 1px border + lock glyph, matching the
   approved design (state.png). The grey-box base from .sf-v2-nav-link is
   overridden so locked pills read as "outlined / inactive", distinct from
   the blue active pill and the grey free pills. */
.alpha-page .sf-v2-nav-link.is-locked {
    background: #fff;
    border: 1px solid #DDDCE5;
    color: var(--alpha-faint);
}
.alpha-page .sf-v2-nav-link.is-locked .sf-v2-tag-name {
    color: var(--alpha-faint);
}
.alpha-page .sf-v2-nav-link.is-locked .sf-v2-tag-count-wrapper {
    background: var(--alpha-soft);
}
.alpha-page .sf-v2-nav-link .alpha-lock-ico {
    margin-right: 5px;
    color: var(--alpha-faint);
}
.dark .alpha-page .sf-v2-nav-link.is-locked {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
}
.dark .alpha-page .sf-v2-nav-link.is-locked .sf-v2-tag-count-wrapper {
    background: rgba(255, 255, 255, 0.06);
}

/* Hover popover anchored to a locked pill / period. Positioned by JS via
 * `.alpha-gate-pop--open`. Reuses the visual language of the design's gate
 * card; copy comes from premium.py paywall tags where possible. */
.alpha-gate-pop {
    position: absolute;
    z-index: 70;
    top: calc(100% + 10px);
    left: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    padding: 18px;
    background: #fff;
    border: 1px solid var(--alpha-line);
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(16, 16, 20, 0.14);
    display: none;
    /* The trigger pill sets white-space:nowrap; without resetting it the
       popover body never wraps and overflows far past the card (the bug:
       text "flying off" to the right). Reset wrap + alignment here. */
    white-space: normal;
    text-align: left;
}
.alpha-gate-pop.alpha-gate-pop--open { display: block; }
/* Invisible hover-bridge over the 10px gap between the pill and the card.
   The popover is a child of the trigger pill, so the cursor is "inside" the
   pill while over this bridge — mouseleave does not fire and the card stays
   open as you move down to click the CTA. (Без него курсор на миг попадает
   в пустоту зазора → mouseleave → плашка закрывается.) */
.alpha-gate-pop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}
.alpha-gate-pop__head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.alpha-gate-pop__icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.alpha-gate-pop__icon svg { width: 20px; height: 20px; }
.alpha-gate-pop--login .alpha-gate-pop__icon { background: rgba(5, 68, 253, 0.13); color: var(--alpha-blue); }
.alpha-gate-pop--pro   .alpha-gate-pop__icon { background: rgba(207, 182, 108, 0.20); color: #B8923A; }
.alpha-gate-pop__title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; line-height: 22px; color: var(--alpha-text); }
.alpha-gate-pop__sub   { font-size: 13px; line-height: 18px; color: var(--alpha-faint); margin-top: 2px; }
.alpha-gate-pop__body  { font-size: 14px; line-height: 21px; color: var(--alpha-muted); margin: 0 0 16px; }
.alpha-gate-pop__cta {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
}
.alpha-gate-pop--login .alpha-gate-pop__cta { background: var(--alpha-blue); color: #fff; }
.alpha-gate-pop--pro   .alpha-gate-pop__cta { background: linear-gradient(135deg, #CFB66C, #9C7C2E); color: #1A1406; }
.alpha-gate-pop__foot  { text-align: center; font-size: 13px; line-height: 18px; color: var(--alpha-faint); margin-top: 10px; }

/* gate trigger wrapper — gives the popover a positioning context */
.alpha-gate { position: relative; display: inline-flex; }

/* ---- Dark mode (redesign additions) ---- */
.dark .alpha-period-tab.active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.dark .alpha-gate-pop {
    background: #1c1c23;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
}
.dark .alpha-gate-pop__title { color: #f4f4f6; }
.dark .alpha-gate-pop__sub,
.dark .alpha-gate-pop__foot { color: #76747f; }
.dark .alpha-gate-pop__body { color: #9a98a4; }
.dark .alpha-gate-pop--login .alpha-gate-pop__icon { background: rgba(45, 107, 255, 0.20); color: #2d6bff; }
.dark .alpha-gate-pop--login .alpha-gate-pop__cta { background: #2d6bff; }