/* ═══════════════════════════════════════════════════════
   AXIOM — article.css
   Reading layout · Article typography · LaTeX · Comments
   TOC panel · Share sheet · Floating action buttons
   ═══════════════════════════════════════════════════════ */

/* ── Reading mode body override ──────────────────────── */
body.axm-reading-mode .axm-sidebar {
    display: none !important;
}

body.axm-reading-mode .axm-feed-layout {
    padding-left: 0;
}

    /* ── Reading Layout ───────────────────────────────────── */
    .axm-reading-layout {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* ── Reading top bar ──────────────────────────────────── */
    .axm-reading-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 90;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease;
        will-change: transform;
        padding: 0 1.5rem;
        height: 5rem;
        margin: 0;
        border-radius: 0;
        background: var(--axm-surface);
        box-shadow: var(--neo-raised);
        gap: 1rem;
        transform: translateY(-110%);
        pointer-events: none;
    }

body.admin-bar .axm-reading-topbar {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .axm-reading-topbar {
        top: 46px;
    }
}

.axm-reading-topbar.axm-reading-topbar--fixed {
    transform: translateY(0) !important;
    pointer-events: auto !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    background: color-mix(in srgb, var(--axm-surface) 90%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
    .axm-reading-topbar {
        padding: 0 2rem;
    }
}

.axm-reading-topbar .axm-nav__brand {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--axm-primary);
}

.axm-reading-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Reading progress bar */
.axm-reading-progress-bar {
    position: sticky;
    top: 4.5rem;
    z-index: 29;
    height: 3px;
    background: var(--axm-surface-container);
    margin: 0 1.5rem;
    border-radius: var(--r-full);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.axm-reading-topbar--hidden {
    transform: translateY(-110%) !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.axm-reading-progress-bar--hidden {
    transform: translateY(-150%);
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .axm-reading-progress-bar {
        margin: 0 2rem;
    }
}

.axm-reading-progress-bar__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--axm-primary), var(--axm-tertiary));
    border-radius: var(--r-full);
    transition: width 0.1s linear;
}

/* Progress ring */
.axm-progress-ring {
    width: 2.25rem;
    height: 2.25rem;
}

.axm-progress-ring circle {
    fill: none;
    stroke-width: 3;
    transform-origin: center;
    transform: rotate(-90deg);
}

.axm-progress-ring__bg {
    stroke: var(--axm-surface-container);
}

.axm-progress-ring__fill {
    stroke: var(--axm-primary);
    transition: stroke-dashoffset 0.15s linear;
    stroke-linecap: round;
}

/* ── Article main area ────────────────────────────────── */
.axm-article-main {
    max-width: 52rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 6rem;
    width: 100%;
}

@media (min-width: 768px) {
    .axm-article-main {
        padding: 3rem 2rem 6rem;
    }
}

/* ── Article header ───────────────────────────────────── */
.axm-article__topic-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--axm-on-surface-variant);
}

.axm-article__read-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--axm-on-surface-variant);
}

.axm-article__read-time .material-symbols-outlined {
    font-size: 1rem;
}

.axm-article__divider {
    color: var(--axm-outline);
}

.axm-article__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--axm-on-surface);
    margin-bottom: 1.5rem;
}

.axm-article__lede {
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--axm-on-surface-variant);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

/* Author card */
.axm-author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--r-lg);
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
    width: fit-content;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.axm-author-card__avatar-link {
    flex-shrink: 0;
}

.axm-author-card__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-full);
    object-fit: cover;
    box-shadow: var(--neo-pressed);
    display: block;
}

.axm-author-card__name {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--axm-on-surface);
    text-decoration: none;
    transition: color var(--t-base);
}

.axm-author-card__name:hover {
    color: var(--axm-primary);
}

.axm-author-card__bio {
    font-size: 0.8125rem;
    color: var(--axm-on-surface-variant);
    display: block;
}

/* Follow button */
.axm-follow-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.125rem;
    border-radius: var(--r-lg);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
    color: var(--axm-primary);
    transition: all var(--t-base);
    margin-left: auto;
}

.axm-follow-btn:hover {
    box-shadow: var(--neo-float);
}

.axm-follow-btn:active {
    box-shadow: var(--neo-pressed);
}

.axm-follow-btn--active {
    color: var(--axm-on-surface-variant);
}

.axm-follow-btn .material-symbols-outlined {
    font-size: 1rem;
}

/* Hero image */
.axm-article__hero {
    width: 100%;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--neo-raised);
    margin-bottom: 2.5rem;
    aspect-ratio: 16/9;
}

.axm-article__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.axm-article__caption {
    font-size: 0.8125rem;
    color: var(--axm-on-surface-variant);
    padding: 0.625rem 0.875rem;
    text-align: center;
    font-style: italic;
    background: var(--axm-surface-container);
}

/* ── Article Body Typography ──────────────────────────── */
.axm-article__body {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--axm-on-surface-variant);
}

.axm-article__body p {
    margin-bottom: 1.5rem;
}

.axm-article__body h2 {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--axm-on-surface);
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.01em;
}

.axm-article__body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--axm-primary);
    margin: 2rem 0 0.875rem;
}

.axm-article__body h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--axm-on-surface);
    margin: 1.75rem 0 0.75rem;
}

.axm-article__body ul,
.axm-article__body ol {
    margin: 1.25rem 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.axm-article__body li {
    color: var(--axm-on-surface-variant);
    line-height: 1.75;
}

.axm-article__body a {
    color: var(--axm-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.axm-article__body a:hover {
    color: var(--axm-tertiary);
}

.axm-article__body strong {
    color: var(--axm-on-surface);
    font-weight: 700;
}

.axm-article__body em {
    font-style: italic;
}

/* Blockquote */
.axm-article__body blockquote,
.axm-article__body .wp-block-quote {
    border-left: 4px solid var(--axm-primary);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    background: var(--axm-surface-container);
    box-shadow: var(--neo-pressed);
}

.axm-article__body blockquote p {
    font-style: italic;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--axm-on-surface);
    margin-bottom: 0.5rem;
}

.axm-article__body blockquote cite,
.axm-article__body .wp-block-quote cite {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--axm-primary);
    font-style: normal;
}

/* Inline code */
.axm-article__body code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875em;
    background: var(--axm-surface-container);
    color: var(--axm-primary);
    padding: 0.125em 0.375em;
    border-radius: var(--r-sm);
}

/* Code block */
.axm-article__body pre {
    background: var(--axm-surface-container);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    overflow-x: auto;
    box-shadow: var(--neo-pressed);
    margin: 2rem 0;
}

.axm-article__body pre code {
    background: none;
    color: var(--axm-on-surface);
    font-size: 0.875rem;
    padding: 0;
}

/* Images in body */
.axm-article__body img,
.axm-article__body figure {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--neo-raised);
    margin: 2rem auto;
}

.axm-article__body figcaption {
    font-size: 0.8125rem;
    text-align: center;
    color: var(--axm-on-surface-variant);
    font-style: italic;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--axm-surface-container);
}

/* Horizontal rule */
.axm-article__body hr {
    border: none;
    border-top: 2px solid var(--axm-outline-variant);
    margin: 3rem 0;
    border-radius: var(--r-full);
}

/* ── End-of-article recommendations ─────────────────── */
.axm-related-end {
    margin: 3rem 0 0;
    padding: 2rem;
    border-radius: var(--r-xl);
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
}

.axm-related-end .axm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.axm-related-end__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .axm-related-end__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.axm-related-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--r-lg);
    background: var(--axm-surface-container);
    transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
    box-shadow: var(--neo-pressed);
}

.axm-related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--neo-float);
    background: var(--axm-surface);
}

.axm-related-card__media {
    display: block;
    overflow: hidden;
    border-radius: var(--r-md);
    width: 100%;
    aspect-ratio: 16/10;
    box-shadow: var(--neo-raised);
    transition: transform var(--t-base);
}

.axm-related-card:hover .axm-related-card__media {
    transform: scale(1.025);
}

.axm-related-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.axm-related-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.axm-related-card__topic {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-full);
    background: var(--axm-surface);
    color: var(--axm-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    box-shadow: var(--neo-raised);
}

.axm-related-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.5rem;
}

.axm-related-card__title a {
    color: var(--axm-on-surface);
    text-decoration: none;
    transition: color var(--t-base);
}

.axm-related-card__title a:hover {
    color: var(--axm-primary);
}

.axm-related-card__excerpt {
    color: var(--axm-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 1rem;
    flex-grow: 1;
}

.axm-related-card__meta {
    color: var(--axm-on-surface-variant);
    font-size: 0.8125rem;
    margin: auto 0 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--axm-outline-variant);
}

/* ── LaTeX / Math blocks ──────────────────────────────── */
.axm-article__body .katex-display {
    overflow-x: auto;
    padding: 1.5rem;
    margin: 2rem 0;
    background: var(--axm-surface-container);
    border-radius: var(--r-lg);
    box-shadow: var(--neo-pressed);
    font-size: 1.1rem;
}

/* Fallback math block styling (pre-KaTeX render) */
.axm-math-block {
    overflow-x: auto;
    padding: 1.5rem;
    margin: 2rem 0;
    background: var(--axm-surface-container);
    border-radius: var(--r-lg);
    box-shadow: var(--neo-pressed);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    color: var(--axm-primary);
    text-align: center;
}

/* ── Article footer: tags, share ──────────────────────── */
.axm-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--axm-outline-variant);
}

/* ── Social Share (inline) ────────────────────────────── */
.axm-social-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 1.5rem 0;
    margin: 2rem 0;
    border-top: 1px solid var(--axm-outline-variant);
    border-bottom: 1px solid var(--axm-outline-variant);
}

.axm-social-share__label {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--axm-on-surface-variant);
    margin-right: 0.25rem;
}

.axm-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.125rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
    color: var(--axm-on-surface-variant);
    text-decoration: none;
    transition: all var(--t-base);
}

.axm-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--neo-float);
    color: var(--axm-primary);
}

.axm-social-btn:active {
    box-shadow: var(--neo-pressed);
    transform: scale(0.97);
}

.axm-social-btn .material-symbols-outlined {
    font-size: 1rem;
}

/* ── Comments ─────────────────────────────────────────── */
.axm-comments {
    margin-top: 3rem;
}

.axm-comments .comments-title,
.axm-comments #reply-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--axm-on-surface);
    margin-bottom: 1.5rem;
}

.axm-comments .comment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.axm-comments .comment {
    padding: 1.25rem;
    border-radius: var(--r-lg);
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
}

.axm-comments .comment-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.axm-comments .comment-author img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-full);
    box-shadow: var(--neo-pressed);
}

.axm-comments .comment-author .fn {
    font-weight: 700;
    color: var(--axm-on-surface);
    font-size: 0.9375rem;
}

.axm-comments .comment-metadata a {
    font-size: 0.75rem;
    color: var(--axm-outline);
    text-decoration: none;
}

.axm-comments .comment-content p {
    font-size: 0.9375rem;
    color: var(--axm-on-surface-variant);
    margin-bottom: 0;
}

.axm-must-log-in {
    padding: 1.25rem;
    border-radius: var(--r-lg);
    background: var(--axm-surface-container);
    box-shadow: var(--neo-pressed);
    color: var(--axm-on-surface-variant);
    font-size: 0.9375rem;
    text-align: center;
}

.axm-must-log-in a {
    color: var(--axm-primary);
    font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    outline: none;
    border-radius: var(--r-lg);
    background: var(--axm-surface);
    box-shadow: var(--neo-pressed);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--axm-on-surface);
    transition: box-shadow var(--t-base);
    margin-bottom: 1rem;
}

.comment-form input:focus,
.comment-form textarea:focus {
    box-shadow: var(--neo-pressed), 0 0 0 2px var(--axm-primary);
}

.comment-form textarea {
    min-height: 8rem;
    resize: vertical;
}

.comment-form .submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border-radius: var(--r-lg);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9375rem;
    background: var(--axm-primary);
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--axm-primary) 30%, transparent);
    transition: all var(--t-base);
}

.comment-form .submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── Floating Action Buttons ──────────────────────────── */
.axm-fabs {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    z-index: 50;
}

@media (min-width: 768px) {
    .axm-fabs {
        right: 2rem;
    }
}

@media (max-width: 768px) {
    .axm-fabs {
        bottom: calc(5rem + 1rem + env(safe-area-inset-bottom, 0));
        right: 1rem;
        z-index: 90;
    }
}

.axm-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
    color: var(--axm-on-surface-variant);
    font-family: inherit;
    transition: all var(--t-base);
}

.axm-fab[hidden] {
    display: none !important;
}

.axm-fab:hover {
    color: var(--axm-primary);
    transform: translateY(-2px);
    box-shadow: var(--neo-float);
}

.axm-fab:active {
    box-shadow: var(--neo-pressed);
    transform: scale(0.95);
}

.axm-fab .material-symbols-outlined {
    font-size: 1.375rem;
}

.axm-fab--active {
    color: var(--axm-primary);
}

.axm-fab--active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1 !important;
}

.axm-fab-dislike--active {
    color: var(--axm-error) !important;
}

.axm-fab-dislike--active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1 !important;
}


.axm-fab--primary {
    background: var(--axm-primary);
    color: white;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--axm-primary) 35%, transparent), var(--neo-raised);
}

.axm-fab--primary:hover {
    color: white;
    opacity: 0.9;
}

/* ── Table of Contents Panel (Elite Glassmorphic Widget) ─────────────── */
.axm-toc {
    position: fixed;
    bottom: 2rem;
    left: 1.5rem;
    width: min(19.5rem, calc(100vw - 3rem));
    max-height: 60vh;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--axm-surface) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), var(--neo-float);
    padding: 1.25rem;
    z-index: 45;
    display: flex;
    flex-direction: column;
    animation: fadeSlideUp var(--t-slow) ease;
}

.axm-toc[hidden] {
    display: none;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.axm-toc__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.875rem;
    gap: 0.75rem;
}

/* macOS title bar dots */
.axm-toc__dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.axm-toc__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.axm-toc__dot--red { background: #ef4444; }
.axm-toc__dot--yellow { background: #f59e0b; }
.axm-toc__dot--green { background: #10b981; }

.axm-toc__header h2 {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--axm-on-surface);
    margin: 0;
    flex-grow: 1;
}

/* Dynamic scroll percentage badge */
.axm-toc__progress-badge {
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--axm-primary);
    background: var(--axm-surface-container);
    padding: 0.25rem 0.625rem;
    border-radius: var(--r-full);
    box-shadow: var(--neo-pressed);
    white-space: nowrap;
}

/* Dynamic scroll track bar */
.axm-toc__progress-track {
    background: var(--axm-surface-container);
    border-radius: var(--r-full);
    height: 4px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--neo-pressed);
}

.axm-toc__progress-fill {
    background: linear-gradient(90deg, var(--axm-primary), var(--axm-tertiary));
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    border-radius: var(--r-full);
}

.axm-toc__list {
    overflow-y: auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    scrollbar-width: thin;
    padding-right: 2px;
}

/* Custom scrollbars inside the list */
.axm-toc__list::-webkit-scrollbar {
    width: 4px;
}
.axm-toc__list::-webkit-scrollbar-track {
    background: transparent;
}
.axm-toc__list::-webkit-scrollbar-thumb {
    background: var(--axm-outline-variant);
    border-radius: var(--r-full);
}

.axm-toc__item--sub {
    padding-left: 1rem;
}

.axm-toc__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--axm-on-surface-variant);
    text-decoration: none;
    transition: all var(--t-base);
}

.axm-toc__link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Cumulative read time milestones */
.axm-toc__milestone {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--axm-outline);
    background: var(--axm-surface-container);
    padding: 0.125rem 0.375rem;
    border-radius: var(--r-sm);
    box-shadow: var(--neo-pressed);
    transition: all var(--t-base);
}

.axm-toc__link:hover {
    color: var(--axm-primary);
    background: var(--axm-surface-container);
}

.axm-toc__link:hover .axm-toc__milestone {
    color: var(--axm-primary);
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
}

.axm-toc__link--active {
    color: white !important;
    font-weight: 800;
    background: var(--axm-primary) !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--axm-primary) 30%, transparent);
}

.axm-toc__link--active .axm-toc__milestone {
    color: var(--axm-primary) !important;
    background: white !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* ── Related Concepts Sidebar ─────────────────────────── */
.axm-related-sidebar {
    position: fixed;
    right: 2rem;
    top: 25%;
    width: 17rem;
    border-radius: var(--r-lg);
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
    padding: 1.5rem;
    z-index: 30;
    opacity: 0;
    transform: translateX(2rem);
    transition: opacity var(--t-slow), transform var(--t-slow);
    display: none;
}

@media (min-width: 1400px) {
    .axm-related-sidebar {
        display: block;
    }
}

.axm-related-sidebar.axm-related--visible {
    opacity: 1;
    transform: translateX(0);
}

.axm-related-sidebar__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--axm-on-surface);
    margin-bottom: 1rem;
}

.axm-related-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
}

.axm-related-item {
    display: block;
    padding: 0.875rem 1rem;
    border-radius: var(--r-lg);
    background: var(--axm-surface);
    box-shadow: var(--neo-pressed);
    text-decoration: none;
    transition: all var(--t-base);
}

.axm-related-item:hover {
    box-shadow: var(--neo-raised);
}

.axm-related-item__topic {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--axm-primary);
    margin-bottom: 0.25rem;
    display: block;
}

.axm-related-item__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--axm-on-surface-variant);
    line-height: 1.4;
}

.axm-related-item:hover .axm-related-item__title {
    color: var(--axm-primary);
}

/* ── Share Sheet ─────────────────────────────────────── */
.axm-share-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--axm-surface);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
    animation: slideUp var(--t-slow) ease;
}

.axm-share-sheet[hidden] {
    display: none;
}

@media (min-width: 640px) {
    .axm-share-sheet {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        left: auto;
        width: 22rem;
        border-radius: var(--r-xl);
        padding: 1.5rem;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.axm-share-sheet__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.axm-share-sheet__header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--axm-on-surface);
}

.axm-share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.axm-share-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 0.5rem;
    border-radius: var(--r-lg);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
    color: var(--axm-on-surface-variant);
    text-decoration: none;
    transition: all var(--t-base);
}

.axm-share-platform:hover {
    transform: translateY(-2px);
    box-shadow: var(--neo-float);
    color: var(--axm-primary);
}

.axm-share-platform:active {
    box-shadow: var(--neo-pressed);
    transform: scale(0.96);
}

.axm-share-platform .material-symbols-outlined {
    font-size: 1.375rem;
}

/* Copy link */
.axm-share-copy {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--axm-outline-variant);
}

.axm-share-copy__input {
    flex: 1;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: var(--r-lg);
    background: var(--axm-surface);
    box-shadow: var(--neo-pressed);
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--axm-on-surface-variant);
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.axm-share-copy__btn {
    padding: 0.625rem 1.125rem;
    border-radius: var(--r-lg);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8125rem;
    background: var(--axm-surface);
    color: var(--axm-primary);
    box-shadow: var(--neo-raised);
    transition: all var(--t-base);
    white-space: nowrap;
}

.axm-share-copy__btn:hover {
    box-shadow: var(--neo-float);
}

.axm-share-copy__btn:active {
    box-shadow: var(--neo-pressed);
}

/* ── Share Sheet Preview Card ─────────────────────────── */
.axm-share-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: var(--r-lg);
    background: var(--axm-surface-container);
    box-shadow: var(--neo-pressed);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.axm-share-preview__img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--neo-raised);
}

.axm-share-preview__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.axm-share-preview__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.axm-share-preview__badge {
    align-self: flex-start;
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
    margin-bottom: 0.25rem;
}

.axm-share-preview__title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--axm-on-surface);
    margin: 0;
}

.axm-share-preview__excerpt {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--axm-on-surface-variant);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Share Actions Row ────────────────────────────────── */
.axm-share-actions {
    display: flex;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.axm-share-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 0.625rem;
    border-radius: var(--r-xl);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.8125rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: -0.01em;
}

/* Elite Story Card download button (High contrast primary accent gradient) */
.axm-share-action-btn--story {
    background: linear-gradient(135deg, #4f46e5, #6366f1, #818cf8);
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4), var(--neo-raised);
}

.axm-share-action-btn--story:hover {
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.55), var(--neo-float);
}

.axm-share-action-btn--story:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.3);
}

/* Premium Neomorphic Rich Post button */
.axm-share-action-btn--rich {
    background: var(--axm-surface);
    color: var(--axm-primary);
    border: 1.5px solid color-mix(in srgb, var(--axm-primary) 20%, transparent);
    box-shadow: var(--neo-raised);
}

.axm-share-action-btn--rich:hover {
    color: var(--axm-primary);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--neo-float);
    background: color-mix(in srgb, var(--axm-primary) 6%, var(--axm-surface));
}

.axm-share-action-btn--rich:active {
    box-shadow: var(--neo-pressed);
    transform: translateY(0) scale(0.97);
}

/* Premium Neomorphic Embed Code button */
.axm-share-action-btn--embed {
    background: var(--axm-surface);
    color: var(--axm-primary);
    border: 1.5px solid color-mix(in srgb, var(--axm-primary) 20%, transparent);
    box-shadow: var(--neo-raised);
}

.axm-share-action-btn--embed:hover {
    color: var(--axm-primary);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--neo-float);
    background: color-mix(in srgb, var(--axm-primary) 6%, var(--axm-surface));
}

.axm-share-action-btn--embed:active,
.axm-share-action-btn--embed.neo-pressed {
    box-shadow: var(--neo-pressed);
    transform: translateY(0) scale(0.97);
    background: color-mix(in srgb, var(--axm-primary) 12%, var(--axm-surface)) !important;
}

.axm-share-action-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

/* ── Share Embed Drawer (Elite macOS dark editor theme) ───────────────── */
.axm-share-embed-drawer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--r-xl);
    background: #0b0f19; /* Rich deep slate background */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.35);
    margin-bottom: 1.5rem;
    animation: fadeSlideUp var(--t-base) ease;
}

.axm-share-embed-drawer__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.axm-share-embed-drawer__header .material-symbols-outlined {
    font-size: 1.125rem;
    color: #38bdf8; /* Vibrant light-blue accent */
}

.axm-share-embed-drawer__info {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.45;
    font-weight: 600;
}

.axm-share-embed-drawer__editor {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: #070a12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.axm-share-embed-drawer__editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111625;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.axm-share-embed-drawer__dots {
    display: flex;
    gap: 6px;
}

.axm-share-embed-drawer__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.axm-share-embed-drawer__dot--red { background: #ef4444; }
.axm-share-embed-drawer__dot--yellow { background: #f59e0b; }
.axm-share-embed-drawer__dot--green { background: #10b981; }

.axm-share-embed-drawer__filename {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
}

.axm-share-embed-drawer__code {
    width: 100%;
    height: 6rem;
    padding: 0.875rem;
    border: none;
    background: transparent;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #38bdf8; /* Glowing cyan code coloring */
    resize: none;
    outline: none;
}

/* Custom scrollbar for deep slate drawer editor */
.axm-share-embed-drawer__code::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.axm-share-embed-drawer__code::-webkit-scrollbar-track {
    background: transparent;
}

.axm-share-embed-drawer__code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--r-full);
}

.axm-share-embed-drawer__code::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.axm-share-embed-drawer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8125rem;
    background: var(--axm-primary);
    color: white !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--axm-primary) 30%, transparent);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.axm-share-embed-drawer__btn:hover {
    background: var(--axm-primary-container);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--axm-primary) 45%, transparent);
    transform: translateY(-2px);
}

.axm-share-embed-drawer__btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.axm-share-embed-drawer__btn .material-symbols-outlined {
    font-size: 1.125rem;
}

/* ── Share Backdrop Overlay ───────────────────────────── */
.axm-share-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45); /* Translucent dark blue */
    z-index: 190; /* Right behind the share sheet (z-index 200) */
    backdrop-filter: blur(4px); /* Glassmorphic blur */
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn var(--t-base) ease;
}

.axm-share-overlay[hidden] {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Article Feedback (Likes/Dislikes at end of article) ── */
.axm-article-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    margin: 3rem auto 2rem;
    border-radius: var(--r-xl);
    background: var(--axm-surface);
    box-shadow: var(--neo-pressed);
    max-width: 32rem;
    text-align: center;
}

.axm-article-feedback h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--axm-on-surface);
    margin: 0;
}

.axm-article-feedback__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
}

.axm-feedback-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.65rem;
    border-radius: var(--r-full);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800; /* Extra bold premium look */
    font-size: 0.875rem;
    background: var(--axm-surface);
    box-shadow: var(--neo-raised);
    color: var(--axm-on-surface-variant);
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    will-change: transform;
}

.axm-feedback-btn-pill .material-symbols-outlined {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

/* Hover States with specialized, delicate color theme shifts */
.axm-feedback-btn-pill.js-like:hover {
    transform: translateY(-2px);
    box-shadow: var(--neo-float);
    color: var(--axm-primary) !important;
    background: color-mix(in srgb, var(--axm-primary) 5%, var(--axm-surface)) !important;
}

.axm-feedback-btn-pill.js-like:hover .material-symbols-outlined {
    animation: axm-icon-bounce 0.6s ease infinite;
}

.axm-feedback-btn-pill.js-dislike:hover {
    transform: translateY(-2px);
    box-shadow: var(--neo-float);
    color: var(--axm-error) !important;
    background: color-mix(in srgb, var(--axm-error) 5%, var(--axm-surface)) !important;
}

.axm-feedback-btn-pill.js-dislike:hover .material-symbols-outlined {
    animation: axm-icon-wobble 0.6s ease infinite;
}

.axm-feedback-btn-pill:active {
    box-shadow: var(--neo-pressed);
    transform: scale(0.96);
}

/* Active pressed states with distinct glowing accents */
.axm-feedback-btn-pill.axm-fab--active {
    background: color-mix(in srgb, var(--axm-primary) 10%, var(--axm-surface)) !important;
    color: var(--axm-primary) !important;
    box-shadow: var(--neo-pressed) !important;
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--axm-primary) 30%, transparent));
    animation: axm-like-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.axm-feedback-btn-pill.axm-fab--active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1 !important;
}

.axm-feedback-btn-pill.axm-fab-dislike--active {
    background: color-mix(in srgb, var(--axm-error) 10%, var(--axm-surface)) !important;
    color: var(--axm-error) !important;
    box-shadow: var(--neo-pressed) !important;
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--axm-error) 30%, transparent));
    animation: axm-dislike-shake 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.axm-feedback-btn-pill.axm-fab-dislike--active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1 !important;
}

/* Inline premium counts layout & rounded inset shadows */
.axm-like-count,
.axm-dislike-count {
    font-size: 0.8125rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-full);
    background: var(--axm-surface-container-low, var(--axm-surface-container));
    box-shadow: var(--neo-pressed);
    font-weight: 800;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.axm-feedback-btn-pill.axm-fab--active .axm-like-count {
    background: color-mix(in srgb, var(--axm-primary) 20%, var(--axm-surface)) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

.axm-feedback-btn-pill.axm-fab-dislike--active .axm-dislike-count {
    background: color-mix(in srgb, var(--axm-error) 20%, var(--axm-surface)) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* High-performance hardware accelerated GPU micro-animations */
@keyframes axm-like-pop {
    0% { transform: scale(1); }
    15% { transform: scale(0.85) rotate(-6deg); }
    45% { transform: scale(1.22) rotate(10deg); }
    70% { transform: scale(0.95) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes axm-dislike-shake {
    0% { transform: scale(1); }
    15% { transform: scale(0.9) rotate(-10deg); }
    35% { transform: scale(1.15) rotate(15deg); }
    55% { transform: scale(0.95) rotate(-15deg); }
    75% { transform: scale(1.05) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes axm-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes axm-icon-wobble {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(-10deg); }
}

/* Responsive topbar for compact screens & brand constraints to avoid overflow */
@media (max-width: 640px) {
    .axm-reading-topbar {
        padding: 0 0.875rem !important;
        gap: 0.5rem !important;
    }
    .axm-reading-topbar__actions {
        gap: 0.5rem !important;
    }
    .axm-reading-topbar .axm-nav__brand {
        max-width: none !important;
        overflow: visible !important;
        white-space: nowrap;
        display: flex !important;
    }
    .axm-reading-topbar .axm-nav__brand img.custom-logo {
        height: 28px !important;
        width: 28px !important;
    }
}

@media (max-width: 480px) {
    .axm-reading-topbar {
        padding: 0 0.35rem !important;
        gap: 0.25rem !important;
    }
    .axm-reading-topbar__actions {
        gap: 0.25rem !important;
    }
    /* Compact topbar elements on tiny devices */
    .axm-reading-topbar .axm-icon-btn,
    .axm-reading-topbar .axm-progress-ring {
        width: 1.875rem !important;
        height: 1.875rem !important;
        min-width: 1.875rem !important;
        box-shadow: var(--neo-pressed) !important;
        border-radius: 50% !important; /* Circular boundary */
    }
    .axm-reading-topbar .axm-icon-btn .material-symbols-outlined {
        font-size: 1rem !important;
    }
    .axm-reading-topbar .axm-progress-ring svg {
        width: 24px !important;
        height: 24px !important;
    }
    /* Scale down the logo and brand text extremely neatly to fit */
    .axm-reading-topbar .axm-nav__brand {
        display: flex !important;
        max-width: none !important;
        overflow: visible !important;
        font-size: 0.7rem !important;
        gap: 0.15rem !important;
        letter-spacing: -0.03em !important;
    }
    .axm-reading-topbar .axm-nav__site-name {
        font-size: 0.7rem !important;
        letter-spacing: -0.03em !important;
        display: inline-block !important;
    }
    .axm-reading-topbar .axm-nav__brand img.custom-logo {
        height: 16px !important;
        width: 16px !important;
    }
}