/* ── Skill Bar Animation ────────────────────────────────────────── */
.skill-bar {
    width: 0;
}

/* JS (about.js) sets --target-width from data-percentage attribute */
.skill-item.reveal-visible .skill-bar {
    animation: skill-animation 1.5s ease-out forwards;
}

@keyframes skill-animation {
    0% {
        width: 0%;
    }

    100% {
        width: var(--target-width);
    }
}

/* ── Experience Timeline ─────────────────────────────────────────── */
.experience-timeline {
    position: relative;
    padding-left: 2rem;
    margin-left: 0.5rem;
}

/* Vertical line */
.experience-timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    bottom: -2rem;
    width: 1px;
    background: linear-gradient(to bottom,
            rgba(34, 211, 238, 0.25) 0%,
            rgba(34, 211, 238, 0.15) 80%,
            transparent);
}

/* Each timeline entry */
.timeline-item {
    position: relative;
    padding-bottom: 2rem;
    opacity: 0;
    transform: translateY(16px);
}

.reveal-visible .timeline-item {
    animation: timeline-reveal 0.6s ease-out forwards;
    animation-delay: calc(var(--delay, 0) * 0.12s);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* Dot on the line */
.timeline-dot {
    position: absolute;
    left: -2rem;
    top: 0.35rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-400);
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.4);
    z-index: 1;
}

/* Card */
.timeline-card {
    padding: 0.6rem 0 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


.timeline-item:last-child .timeline-card {
    border-bottom: none;
    padding-bottom: 0;
}

/* Card header with logo */
.timeline-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.timeline-logo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 0.1rem;
}

.timeline-logo img,
.timeline-logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.timeline-card-info {
    flex: 1;
    min-width: 0;
}

/* Position title */
.timeline-position {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 0.15rem 0;
    line-height: 1.4;
}

/* Company name */
.timeline-company {
    font-size: 0.95rem;
    color: var(--text-soft);
    margin: 0 0 0.2rem 0;
}

/* Meta line (date + duration, location + work type) */
.timeline-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.1rem 0;
    line-height: 1.6;
}

/* Dot separator */
.timeline-sep {
    margin: 0 0.35rem;
    color: var(--text-dim);
}

/* Bullet-pointed achievements */
.timeline-bullets {
    list-style-type: none;
    padding-left: 0;
    margin: 0.65rem 0 0 0;
}

.timeline-bullets li {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 0.3rem;
    padding-left: 0;
}

.timeline-bullets li.hidden-bullet {
    display: none;
}

/* Inline more/less buttons */
.timeline-inline-more,
.timeline-inline-less {
    background: none;
    border: none;
    color: var(--text-faint);
    /* meta data color */
    font-size: 0.9rem;
    font-family: inherit;
    padding: 0 0.15rem;
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s, transform var(--dur-release) var(--ease-spring);
    display: inline;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.timeline-inline-less {
    margin-left: 0.45rem;
}

.timeline-inline-more:hover,
.timeline-inline-less:hover {
    color: var(--text-muted);
    text-decoration: underline;
}

.timeline-inline-more:active,
.timeline-inline-less:active {
    transform: scale(0.92) translateZ(0);
    transition: transform var(--dur-tap) var(--ease-standard);
}

.timeline-ellipsis {
    color: inherit;
}

/* ── Company header link (wraps logo + name + meta, no hover effects) ──── */
.timeline-header-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.timeline-header-link .timeline-position,
.timeline-header-link .timeline-company,
.timeline-header-link .timeline-role-title {
    color: inherit;
}

.timeline-header-link .timeline-meta {
    color: var(--text-faint);
}

/* ── Multi-role: grouped by company ────────────────────────────────── */

.timeline-roles {
    position: relative;
    margin-top: 0.75rem;
    padding-left: 1.25rem;
    margin-left: 0.25rem;
}

.timeline-role {
    position: relative;
    padding-bottom: 1.25rem;
}

.timeline-role:last-child {
    padding-bottom: 0;
}

/* Line connecting this dot to the next dot */
.timeline-role:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: calc(0.4rem + 7px);
    bottom: -0.4rem;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.08);
}

/* Small dot for each role */
.timeline-role-dot {
    position: absolute;
    left: -1.25rem;
    top: 0.4rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-role-content {
    padding-top: 0.1rem;
}

.timeline-role-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.1rem 0;
    line-height: 1.4;
}

/* ── Timeline Animation ──────────────────────────────────────────── */
@keyframes timeline-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Mobile adjustments ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .experience-timeline {
        padding-left: 1.5rem;
        margin-left: 0.25rem;
    }

    .timeline-dot {
        left: -1.5rem;
        width: 7px;
        height: 7px;
    }

    .timeline-position {
        font-size: 1.15rem;
    }

    .timeline-logo {
        width: 34px;
        height: 34px;
    }

    .timeline-roles {
        padding-left: 1rem;
    }

    .timeline-role-dot {
        left: -1rem;
        width: 6px;
        height: 6px;
    }

    .timeline-role:not(:last-child)::after {
        left: -1rem;
        top: calc(0.4rem + 6px);
    }

    .timeline-role-title {
        font-size: 1.05rem;
    }
}

/* ── Profiles & Stats ─────────────────────────────────────────── */
.profiles-section {
    width: 100%;
}

.profiles-grid {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.profile-card {
    display: block;
    text-decoration: none;
    color: inherit;
    container-type: inline-size;
    border-radius: 1.125rem;
    background: var(--surface-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border);
    box-shadow:
        var(--surface-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 1.25rem;
    padding-top: 0.25rem;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color var(--dur) ease,
        box-shadow var(--dur) ease,
        transform var(--dur-slow) var(--ease-spring);
}

.profile-card:hover {
    border-color: var(--surface-border-hover);
    box-shadow:
        var(--surface-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Press feedback — quick dip, springy release (matches site buttons/cards).
   !important + opacity:1 override the generic .tapped rule so a large card
   gets a subtle dip instead of the heavier default scale/fade. */
.profile-card:active,
.profile-card.tapped {
    transform: scale(0.98) translateZ(0) !important;
    opacity: 1 !important;
    transition: transform var(--dur-tap) var(--ease-standard) !important;
}

/* ── Card Top (brand + link) ──────────────────────────────────── */
.profile-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.profile-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-brand__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.15);
    flex-shrink: 0;
}

.profile-brand__icon i {
    font-size: 1.35rem;
    color: var(--text);
}

.profile-brand__icon--leetcode {
    border-color: rgba(245, 158, 11, 0.25);
}

.profile-brand__img {
    width: 1.4rem;
    height: 1.4rem;
    filter: invert(1);
}

.profile-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.3;
}

.profile-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.profile-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.4rem;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, transform var(--dur-release) var(--ease-spring);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.profile-link:hover {
    color: var(--text);
    border-color: rgba(148, 163, 184, 0.4);
}

.profile-link:active {
    transform: scale(0.94) translateZ(0);
    transition: transform var(--dur-tap) var(--ease-standard);
}

/* ── Card Body ────────────────────────────────────────────────── */
.profile-card__body {
    margin-top: 0;
}

/* ── LeetCode Media (single wide image) ───────────────────────── */
.profile-media {
    overflow: hidden;
    background: transparent;
    width: 100%;
    margin: 0 auto 0.5rem auto;
    display: flex;
    justify-content: center;
}

.profile-media__img {
    width: 100%;
    max-width: 100%;
    /* Allow SVG to stretch so heatmap cells match GitHub's 11px size */
    height: auto;
    display: block;
}

/* Safari Intrinsic Ratio (Padding) Hack - Bulletproof for all versions */
#leetcode-stats-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 64%;
    /* 320 / 500 = 64% aspect ratio */
    height: 0;
    overflow: hidden;
    display: block;
    /* Override flex */
}

#leetcode-stats-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 500 / 320;
}





/* ── GitHub Stats Grid ────────────────────────────────────────── */
.profile-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-panel {
    border-radius: 0.5rem;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.profile-panel__label {
    display: none !important;
}

.profile-panel__img {
    width: 100%;
    max-width: 495px;
    height: auto;
    display: block;
    border-radius: 0.35rem;
    margin-left: auto;
    margin-right: auto;
}

/* ── Calendar Panel ───────────────────────────────────────────── */
.calendar-shell {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────
   GitHub Calendar Library — Dark Theme Overrides
   The library injects its own DOM. We override colors here.
   ───────────────────────────────────────────────────────────────── */

/* Top-level .calendar container — override library defaults */
.calendar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--text-soft);
    background: transparent !important;
    border: none !important;
    min-height: auto !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#github-calendar-container .calendar .position-relative {
    grid-column: 1 / -1;
}

/* SVG text labels (day-of-week, month) */
.calendar-graph text.wday,
.calendar-graph text.month {
    fill: var(--text-muted);
    font-size: 10px;
}

/* ── SVG rect-based heatmap colors ────────────────────────────── */
.calendar-graph rect[fill="#ebedf0"],
.calendar-graph rect[data-level="0"] {
    fill: #2d3748 !important;
}

.calendar-graph rect[fill="#c6e48b"],
.calendar-graph rect[data-level="1"] {
    fill: var(--accent-900) !important;
}

.calendar-graph rect[fill="#7bc96f"],
.calendar-graph rect[data-level="2"] {
    fill: var(--accent-700) !important;
}

.calendar-graph rect[fill="#239a3b"],
.calendar-graph rect[data-level="3"] {
    fill: var(--accent-400) !important;
}

.calendar-graph rect[fill="#196127"],
.calendar-graph rect[data-level="4"] {
    fill: var(--accent-300) !important;
}

/* ── DIV-based calendar (ContributionCalendar) ────────────────── */
#github-calendar-container .ContributionCalendar {
    color: var(--text-soft) !important;
    max-width: 100%;
}

#github-calendar-container .ContributionCalendar-day {
    background-color: #2d3748 !important;
    border-radius: 4px !important;
    /* Bigger cells + tighter gap (see border-spacing below) so the grid reads
       as dense as the LeetCode heatmap instead of small, spaced-out dots.
       Final on-screen size is set by the fit-to-width scale; what matters
       here is the cell-to-gap ratio. */
    width: 17px !important;
    height: 17px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

#github-calendar-container .ContributionCalendar-day[data-level="1"] {
    background-color: var(--accent-900) !important;
}

#github-calendar-container .ContributionCalendar-day[data-level="2"] {
    background-color: var(--accent-700) !important;
}

#github-calendar-container .ContributionCalendar-day[data-level="3"] {
    background-color: var(--accent-400) !important;
}

#github-calendar-container .ContributionCalendar-day[data-level="4"] {
    background-color: var(--accent-300) !important;
}

#github-calendar-container .border {
    border: none !important;
}

#github-calendar-container .calendar .position-relative>a,
#github-calendar-container .contrib-footer a,
#github-calendar-container a,
#github-calendar-container .sr-only,
#github-calendar-container .color-bg-default {
    display: none !important;
}

/* Stats columns rendered by the library */
#github-calendar-container .contrib-column,
#github-calendar-container .flex-wrap,
#github-calendar-container .text-muted,
#github-calendar-container .float-right {
    display: none !important;
}

/* Ensure SVG graph doesn't overflow and handles native scrolling */
#github-calendar-container .js-calendar-graph {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

#github-calendar-container .calendar-graph {
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* ── Custom Scrollbar for Calendar ────────────────────────────── */
#github-calendar-container *::-webkit-scrollbar {
    height: 6px !important;
    display: block !important;
}

#github-calendar-container *::-webkit-scrollbar-track {
    background: transparent !important;
}

#github-calendar-container *::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3) !important;
    border-radius: 4px !important;
}

#github-calendar-container *::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5) !important;
}

#github-calendar-container * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent !important;
}

#github-calendar-container .calendar-graph svg,
#github-calendar-container .js-calendar-graph svg {
    height: auto;
    display: block;
}

/* The GitHub grid is a <table> scaled to fit the panel via JS
   (see about.html fitGithubCalendar). Clip instead of scroll so the
   scaled-down grid matches the LeetCode heatmap footprint. */
#github-calendar-container .js-calendar-graph,
#github-calendar-container .calendar-graph {
    overflow-x: hidden !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#github-calendar-container table.ContributionCalendar-grid {
    width: max-content !important;
    border-spacing: 2px !important;
    border-collapse: separate !important;
}

#github-calendar-container .graph-before-activity-overview {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#github-calendar-container .ContributionCalendar-label {
    padding-left: 0.35rem !important;
    padding-right: 1.5rem !important;
}

/* The month labels (top row, <thead>) are <td colspan> cells. The
   padding-right above, applied to the current month's small colspan (e.g.
   "Jun" spanning ~2 weeks), forces those last columns wider — so the final
   week's cells render as wide rectangles instead of squares. Month text is
   absolutely positioned, so it still shows with zero padding. Only touch
   horizontal padding here; leave heights/widths alone so rows aren't
   affected. */
#github-calendar-container thead .ContributionCalendar-label {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── New GitHub table markup: hide GitHub chrome & fix label placement ──
   The proxy injects GitHub's own contributions HTML, which assumes GitHub's
   stylesheet. Without it, the "813 contributions in the last year" heading,
   the year-list link and the absolutely-positioned month/day labels render
   misplaced or clipped (labels overlap the grid, the heading is redundant
   with the stats card above). */
#github-calendar-container #js-contribution-activity-description,
#github-calendar-container a[href="#contributions-year-list"],
#github-calendar-container .js-year-link {
    display: none !important;
}

/* Don't let the inner scroll wrapper show a bar while the JS fit hasn't
   run yet (fonts load asynchronously and widen the table). */
#github-calendar-container [style*="overflow-x: auto"] {
    overflow-x: hidden !important;
}

#github-calendar-container .ContributionCalendar-label span[aria-hidden="true"] {
    /* NB: no clip-path override here — GitHub's inline clip-path: Circle(0)
       deliberately hides the Sun/Tue/Thu/Sat labels so only Mon/Wed/Fri
       show, like on github.com. */
    position: absolute !important;
    left: 0.3rem !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* Month labels: center vertically inside their <thead> strip. */
#github-calendar-container thead .ContributionCalendar-label span[aria-hidden="true"] {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* Day labels: center in their row instead of GitHub's inline bottom:-4px,
   which made them overlap the cells below. */
#github-calendar-container tbody .ContributionCalendar-label span[aria-hidden="true"] {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* Breathing room between the labels and the grid. The grid is JS-scaled to
   ~62%, so gaps must be sized pre-scale: a taller thead strip lifts the
   month labels off the first cell row, and extra right padding on the day
   cells widens the label column so "Mon/Wed/Fri" no longer touches the
   first week column. */
#github-calendar-container thead tr {
    height: 1.5rem !important;
}

#github-calendar-container tbody .ContributionCalendar-label {
    padding-right: 2rem !important;
}

/* Date range row under the grid — LeetCode-heatmap style: small, muted,
   one date at each corner, tight against the grid. Lives outside the
   overflow-clipping graph wrapper (appended to the container). Uses the
   same Poppins font as the LeetCode card (font=Poppins) and the site. */
#github-calendar-container .calendar-range-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.6rem;
    line-height: 1;
    color: #94a3b8;
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    margin-top: 0.15rem;
}

#github-calendar-container {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.github-img-hidden {
    display: none !important;
}

.github-img-show {
    display: block;
    animation: fadeIn 0.4s ease-out forwards;
}

.skeleton-loader {
    width: 100%;
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.4) 25%, rgba(51, 65, 85, 0.4) 50%, rgba(30, 41, 59, 0.4) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 0.5rem;
}

/* Keep panel skeletons in lock-step with the stat images they replace
   so there is no oversize/layout-shift on mobile. */
.profile-panel .skeleton-loader {
    max-width: 495px;
    margin-left: auto;
    margin-right: auto;
}

/* The contribution grid lives in a fixed-height wrapper (#github-cal-wrap,
   sized by setCalReserve in about.html) that stays the same before and after
   load, so the card never resizes. The skeleton simply fills that wrapper. */
#github-cal-skeleton {
    max-width: 100%;
    height: 100%;
    flex: none;
}

/* Languages skeleton mirrors the breakpoint-swapped languages card:
   495x165 on mobile (full width), 320x165 on desktop (side column). */
#github-langs-skeleton {
    aspect-ratio: 495 / 165;
}

@media (min-width: 640px) {
    #github-langs-skeleton {
        aspect-ratio: 320 / 165;
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Contrib legend overrides */
.contrib-legend .legend li[style*="background-color: #ebedf0"] {
    background-color: #2d3748 !important;
}

.contrib-legend .legend li[style*="background-color: #c6e48b"] {
    background-color: rgba(6, 182, 212, 0.4) !important;
}

.contrib-legend .legend li[style*="background-color: #7bc96f"] {
    background-color: rgba(6, 182, 212, 0.6) !important;
}

.contrib-legend .legend li[style*="background-color: #239a3b"] {
    background-color: rgba(6, 182, 212, 0.8) !important;
}

.contrib-legend .legend li[style*="background-color: #196127"] {
    background-color: rgba(6, 182, 212, 1) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.contrib-column {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.contrib-number {
    color: var(--text-soft) !important;
}

/* ── Responsive: 2-column stats grid on wider screens ─────────── */
@media (min-width: 640px) {
    .profile-grid {
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        gap: 0.75rem;
    }

    .profile-panel--full {
        grid-column: 1 / -1;
    }
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .profile-card {
        padding: 1rem;
    }

    .profile-card__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-brand__icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .profile-title {
        font-size: 1rem;
    }

    .profile-subtitle {
        font-size: 0.78rem;
    }
}

/* ── Streak responsive sizing ────────────────────────────────── */
.streak-responsive {
    max-width: 495px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    /* The second selector matches the streak skeleton specifically. It needs
       higher specificity than `.profile-panel .skeleton-loader { max-width:
       495px }` (0,2,0); otherwise the skeleton would render wider (and taller)
       than the 65% streak image, making the card shrink once the image loads. */
    .streak-responsive,
    .profile-panel .skeleton-loader.streak-responsive {
        max-width: 65%;
    }
}