/*
 * DTS Theme — mcp.css
 *
 * Page-specific styles for the mcp area. Loaded after components.css in
 * includes/head.tpl. Compose the shared classes from components.css
 * (.dts-section--dark, .dts-testimonial-card, .dts-browser-mockup,
 * .dts-terminal-mockup, .dts-roadmap-card, .dts-compare-table,
 * .dts-trust-strip, .dts-skeleton) rather than duplicating them here.
 *
 * Owned by one Phase 2 agent — do not edit from another agent's task.
 *
 * All selectors below are scoped under `.dts-mcp-page` (the wrapper div
 * present on whmcs-mcp.tpl, whmcs-mcp-docs.tpl, whmcs-mcp-changelog.tpl and
 * whmcs-mcp-trial.tpl) so they never leak onto other pages that reuse the
 * same shared classes from custom.css (.dts-feature-card, .dts-cta-strip,
 * .dts-page-hero-actions, etc. are used site-wide).
 */

/* ── Hero — extra breathing room above the CTA buttons ──────────────────── */

.dts-mcp-page .dts-page-hero-actions {
    margin-top: var(--dts-space-8);
}

/* ── "What is WHMCS MCP?" feature cards — centered icon-on-top layout,
 * equal height across the row (previously a repeated inline
 * `style="display:flex;flex-direction:column;align-items:center;"` on every
 * card in whmcs-mcp.tpl and whmcs-mcp-trial.tpl) ─────────────────────────── */

.dts-mcp-page .dts-feature-card.text-center {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Compatibility cards — brand accent colour, set via data attribute
 * instead of an inline `style="--card-accent:#…"` ──────────────────────── */

.dts-mcp-compat-card[data-accent="claude"]  { --card-accent: #d97706; }
.dts-mcp-compat-card[data-accent="chatgpt"] { --card-accent: #16a34a; }
.dts-mcp-compat-card[data-accent="cursor"]  { --card-accent: #7c3aed; }
.dts-mcp-compat-card[data-accent="open"]    { --card-accent: #0ea5e9; }

/* ── Small fine-print helpers (previously inline font-size overrides) ───── */

.dts-mcp-fineprint {
    font-size: var(--dts-font-size-sm);
}

.dts-mcp-fineprint--spaced {
    margin-top: var(--dts-space-2);
}

.dts-mcp-trial-link {
    font-size: var(--dts-font-size-base);
}

.dts-mcp-external-icon {
    font-size: 0.8rem;
    margin-left: 4px;
}

/* Hero lead links that should read as part of the sentence rather than a
 * standard blue link (previously `style="color:inherit;text-decoration:underline;"`) */
.dts-mcp-hero-inline-link {
    color: inherit;
    text-decoration: underline;
}

/* ── Related-links pill row — default spacing + ghost variant for use on
 * dark/gradient sections like the bottom CTA strip ─────────────────────── */

.dts-mcp-related-links {
    margin-top: var(--dts-space-6);
}

.dts-mcp-related-links--spaced {
    margin-top: var(--dts-space-8);
}

.dts-mcp-related-link--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.dts-mcp-related-link--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* ── "See it in Action" example mockups ──────────────────────────────────
 * Real code-only mockups (terminal + chat window) replacing the old
 * "Screenshots coming soon" placeholders. Terminal mockups reuse
 * .dts-terminal-mockup from components.css; chat mockups use the sibling
 * component defined below. Both are wrapped in .dts-mcp-mock-col so all
 * three columns in the row stretch to equal height. ────────────────────── */

.dts-mcp-mock-col {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dts-mcp-mock-col .dts-terminal-mockup,
.dts-mcp-mock-col .dts-mcp-chat-mockup {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dts-mcp-mock-col .dts-terminal-mockup-body,
.dts-mcp-mock-col .dts-mcp-chat-mockup-body {
    flex: 1;
}

.dts-mcp-mock-caption {
    margin-top: var(--dts-space-3);
    text-align: center;
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

/* Chat-window mockup — Claude.ai / ChatGPT style conversational UI, built
 * from the same "browser chrome" idea as .dts-terminal-mockup but with a
 * light body and message bubbles instead of a monospace shell. */

.dts-mcp-chat-mockup {
    border-radius: var(--dts-radius-lg);
    overflow: hidden;
    box-shadow: var(--dts-shadow-lg);
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
}

.dts-mcp-chat-mockup-bar {
    display: flex;
    align-items: center;
    gap: var(--dts-space-2);
    padding: 10px var(--dts-space-4);
    background: #eef1f5;
    border-bottom: 1px solid var(--dts-border);
}

.dts-mcp-chat-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d5dae1;
    display: inline-block;
}

.dts-mcp-chat-mockup-dot:nth-child(1) { background: #ff5f57; }
.dts-mcp-chat-mockup-dot:nth-child(2) { background: #febc2e; }
.dts-mcp-chat-mockup-dot:nth-child(3) { background: #28c840; }

.dts-mcp-chat-mockup-title {
    margin-left: var(--dts-space-3);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--dts-font-size-xs);
    font-weight: 600;
    color: var(--dts-text-secondary);
}

.dts-mcp-chat-mockup-body {
    padding: var(--dts-space-5);
    background: var(--dts-bg-alt);
    display: flex;
    flex-direction: column;
    gap: var(--dts-space-4);
}

.dts-mcp-chat-msg {
    max-width: 94%;
    display: flex;
    flex-direction: column;
}

.dts-mcp-chat-msg-label {
    display: block;
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    color: var(--dts-text-muted);
}

.dts-mcp-chat-bubble {
    padding: var(--dts-space-3) var(--dts-space-4);
}

.dts-mcp-chat-bubble p {
    margin: 0 0 8px;
    font-size: var(--dts-font-size-sm);
    line-height: 1.55;
}

.dts-mcp-chat-bubble p:last-child {
    margin-bottom: 0;
}

.dts-mcp-chat-msg--user {
    align-self: flex-end;
}

.dts-mcp-chat-msg--user .dts-mcp-chat-msg-label {
    text-align: right;
}

.dts-mcp-chat-msg--user .dts-mcp-chat-bubble {
    background: var(--dts-gradient-cta);
    color: #fff;
    border-radius: var(--dts-radius-lg) var(--dts-radius-lg) 4px var(--dts-radius-lg);
}

.dts-mcp-chat-msg--ai {
    align-self: flex-start;
}

.dts-mcp-chat-msg--ai .dts-mcp-chat-bubble {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg) var(--dts-radius-lg) var(--dts-radius-lg) 4px;
}

.dts-mcp-chat-tool-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.78rem !important;
    color: var(--dts-primary);
    background: rgba(74, 144, 217, 0.08);
    border-radius: var(--dts-radius-sm);
    padding: 4px 10px;
}

.dts-mcp-chat-tool-call code {
    background: none;
    padding: 0;
    color: inherit;
    font-weight: 600;
}

.dts-mcp-chat-result {
    color: var(--dts-success);
    font-weight: 600;
}

/* ── Trial page — quick-start panel ──────────────────────────────────────
 * Reuses .dts-feature-card as a generic bordered panel (not the centered
 * icon-card variant above) plus .dts-docs-h3 / .dts-docs-code from the docs
 * page so code samples look identical across docs.tpl and trial.tpl. ───── */

.dts-mcp-quickstart-card {
    padding: var(--dts-space-8);
}

.dts-mcp-quickstart-title {
    margin-top: 0;
    margin-bottom: var(--dts-space-6);
}

.dts-mcp-quickstart-step {
    margin-bottom: var(--dts-space-6);
}

.dts-mcp-quickstart-step:last-of-type {
    margin-bottom: var(--dts-space-5);
}

.dts-mcp-quickstart-step .dts-docs-h3 {
    margin-top: 0;
}

.dts-mcp-quickstart-note {
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-sm);
    margin-bottom: var(--dts-space-3);
}

/* Warning-tinted variant of the shared .dts-docs-callout component */
.dts-docs-callout--warning {
    background: #fff8e6;
    border-left: 3px solid var(--dts-warning);
    color: #7a5b00;
}

.dts-docs-callout--warning i {
    margin-right: 6px;
}

@media (max-width: 767px) {
    .dts-mcp-quickstart-card {
        padding: var(--dts-space-6) var(--dts-space-5);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   BEAUTY PASS — MCP pages (composes the shared beauty kit from
   components.css: .dts-hero--mesh, .dts-eyebrow-chip, .dts-text-gradient,
   .dts-glass-card, .dts-reveal)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero terminal — glow + float treatment ─────────────────────────────
 * The animated terminal is the hero's centrepiece; give it a blue halo
 * that reads against the mesh navy background. ─────────────────────────── */

.dts-mcp-page .dts-mcp-terminal {
    border: 1px solid rgba(122, 178, 235, 0.28);
    box-shadow:
        0 0 0 1px rgba(13, 17, 23, 0.6),
        0 24px 64px rgba(2, 10, 22, 0.55),
        0 0 90px rgba(74, 144, 217, 0.30);
}

/* ── Compatibility cards — accent-tinted icon chips + hover ring ───────── */

.dts-mcp-page .dts-mcp-compat-card {
    padding: 32px 16px 24px;
    border-radius: var(--dts-radius-lg);
    border-top-width: 3px;
}

.dts-mcp-page .dts-mcp-compat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 1.55rem;
    background: color-mix(in srgb, var(--card-accent, var(--dts-primary)) 12%, transparent);
}

.dts-mcp-page .dts-mcp-compat-card:hover {
    border-color: color-mix(in srgb, var(--card-accent, var(--dts-primary)) 45%, var(--dts-border));
    box-shadow: 0 12px 32px color-mix(in srgb, var(--card-accent, var(--dts-primary)) 16%, transparent);
    transform: translateY(-4px);
}

/* ── "Ask Your WHMCS Anything" — chat exchange thread ──────────────────
 * User bubble (right, gradient) → AI reply (left) with tool-call chips
 * and a green result line. Replaces the old flat quote blocks. ─────────── */

.dts-mcp-ask-thread {
    display: flex;
    flex-direction: column;
    gap: var(--dts-space-6);
}

.dts-mcp-ask-exchange {
    display: flex;
    flex-direction: column;
    gap: var(--dts-space-3);
}

.dts-mcp-ask-user,
.dts-mcp-ask-ai {
    display: flex;
    align-items: flex-end;
    gap: var(--dts-space-3);
}

.dts-mcp-ask-user {
    justify-content: flex-end;
}

.dts-mcp-ask-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: var(--dts-shadow-sm);
}

.dts-mcp-ask-avatar--you {
    background: var(--dts-gradient-cta);
    color: #fff;
}

.dts-mcp-ask-avatar--ai {
    background: #1c2029;
    color: #7db8e8;
}

.dts-mcp-ask-user-bubble {
    max-width: 560px;
    background: var(--dts-gradient-cta);
    color: #fff;
    font-size: var(--dts-font-size-base);
    line-height: 1.55;
    padding: 14px 20px;
    border-radius: var(--dts-radius-xl) var(--dts-radius-xl) 4px var(--dts-radius-xl);
    box-shadow: 0 6px 20px rgba(30, 90, 142, 0.28);
}

.dts-mcp-ask-ai-body {
    max-width: 620px;
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-xl) var(--dts-radius-xl) var(--dts-radius-xl) 4px;
    padding: 14px 18px;
    box-shadow: var(--dts-shadow-sm);
}

.dts-mcp-ask-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.dts-mcp-ask-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.78rem;
    color: var(--dts-primary);
    background: rgba(74, 144, 217, 0.09);
    border: 1px solid rgba(74, 144, 217, 0.22);
    border-radius: var(--dts-radius-pill);
    padding: 4px 12px;
    white-space: nowrap;
}

.dts-mcp-ask-tool i {
    font-size: 0.68rem;
    opacity: 0.75;
}

.dts-mcp-ask-tool code {
    background: none;
    padding: 0;
    color: inherit;
    font-weight: 600;
    font-size: inherit;
}

.dts-mcp-ask-result {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--dts-font-size-sm);
    font-weight: 500;
    color: #0d5c2a;
    line-height: 1.5;
}

.dts-mcp-ask-result i {
    color: var(--dts-success);
    margin-top: 3px;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .dts-mcp-ask-avatar { display: none; }
    .dts-mcp-ask-user-bubble,
    .dts-mcp-ask-ai-body { max-width: 100%; }
}

/* ── Pricing card — premium elevation + navy gradient header ──────────── */

.dts-mcp-page .dts-pricing-card.featured {
    border: none;
    border-radius: var(--dts-radius-xl);
    box-shadow:
        0 0 0 1px rgba(30, 90, 142, 0.25),
        0 24px 64px rgba(15, 58, 96, 0.22),
        0 0 60px rgba(74, 144, 217, 0.12);
}

.dts-mcp-page .dts-pricing-card.featured:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(30, 90, 142, 0.35),
        0 32px 80px rgba(15, 58, 96, 0.28),
        0 0 80px rgba(74, 144, 217, 0.18);
}

.dts-mcp-page .dts-pricing-card-header--gradient {
    background: var(--dts-gradient-mesh);
    border-bottom: none;
    text-align: center;
    padding: 32px 24px 26px;
}

.dts-mcp-page .dts-pricing-card-header--gradient .dts-pricing-badge {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #cfe6ff;
}

.dts-mcp-page .dts-pricing-card-header--gradient .dts-pricing-plan-name {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.dts-mcp-page .dts-pricing-card-header--gradient .dts-pricing-price {
    justify-content: center;
    align-items: baseline;
}

.dts-mcp-page .dts-pricing-card-header--gradient .dts-pricing-currency {
    color: #aad4ff;
    font-size: 1.4rem;
    font-weight: 600;
}

.dts-mcp-page .dts-pricing-card-header--gradient .dts-pricing-amount {
    color: #fff;
    text-shadow: 0 2px 18px rgba(74, 144, 217, 0.45);
}

.dts-mcp-page .dts-pricing-card-header--gradient .dts-pricing-period {
    color: rgba(232, 244, 248, 0.75);
}

.dts-mcp-page .dts-pricing-card-header--gradient .dts-pricing-tagline {
    color: rgba(232, 244, 248, 0.68);
}

/* ── "See It in Action" mockups — framed gallery treatment ─────────────── */

.dts-mcp-mock-col .dts-terminal-mockup,
.dts-mcp-mock-col .dts-mcp-chat-mockup {
    border: 1px solid rgba(74, 144, 217, 0.22);
    box-shadow:
        0 0 0 6px rgba(30, 90, 142, 0.05),
        0 18px 44px rgba(15, 58, 96, 0.16);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.dts-mcp-mock-col:hover .dts-terminal-mockup,
.dts-mcp-mock-col:hover .dts-mcp-chat-mockup {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 6px rgba(30, 90, 142, 0.08),
        0 26px 56px rgba(15, 58, 96, 0.22);
}

.dts-mcp-mock-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 600;
    color: var(--dts-text-secondary);
}

.dts-mcp-mock-caption::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dts-accent);
}

/* ── FAQ — card affordance upgrade ──────────────────────────────────────
 * Separated rounded cards with a circled +/− toggle instead of one flat
 * white slab. Scoped to the MCP page (contact keeps its own treatment). ── */

.dts-mcp-page .dts-faq {
    background: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--dts-space-3);
}

.dts-mcp-page .dts-faq-item {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    overflow: hidden;
    transition: var(--dts-transition-fast);
}

.dts-mcp-page .dts-faq-item + .dts-faq-item {
    border-top: 1px solid var(--dts-border);
}

.dts-mcp-page .dts-faq-item:hover {
    border-color: rgba(74, 144, 217, 0.45);
    box-shadow: var(--dts-shadow-sm);
}

.dts-mcp-page .dts-faq-item:has(.dts-faq-q[aria-expanded="true"]) {
    border-color: rgba(74, 144, 217, 0.45);
    box-shadow: var(--dts-shadow-md);
}

.dts-mcp-page .dts-faq-q {
    background: transparent;
    font-size: var(--dts-font-size-base);
    padding: 18px 22px;
}

.dts-mcp-page .dts-faq-q::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(74, 144, 217, 0.10);
    font-size: 1.15rem;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dts-mcp-page .dts-faq-q[aria-expanded="true"]::after {
    background: var(--dts-primary);
    color: #fff;
    transform: rotate(180deg);
}

.dts-mcp-page .dts-faq-a {
    background: transparent;
    padding: 0 22px 20px;
    color: var(--dts-text-secondary);
}

/* ── Trial quickstart — checklist stepper ───────────────────────────────
 * Numbered gradient bubbles joined by a soft connector line; the final
 * "done" step gets a green check bubble. ───────────────────────────────── */

.dts-mcp-quickstart-card .dts-eyebrow-chip {
    margin-bottom: var(--dts-space-3);
}

.dts-mcp-steps {
    list-style: none;
    margin: 0 0 var(--dts-space-5);
    padding: 0;
    counter-reset: dts-step;
}

.dts-mcp-step {
    position: relative;
    padding-left: 62px;
    padding-bottom: var(--dts-space-6);
    counter-increment: dts-step;
}

.dts-mcp-step:last-child {
    padding-bottom: var(--dts-space-2);
}

.dts-mcp-step::before {
    content: counter(dts-step);
    position: absolute;
    left: 0;
    top: -4px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dts-gradient-cta);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(30, 90, 142, 0.30);
}

.dts-mcp-step::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 42px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(74, 144, 217, 0.45), rgba(74, 144, 217, 0.12));
}

.dts-mcp-step:last-child::after {
    display: none;
}

.dts-mcp-step--done::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 1rem;
    background: var(--dts-success);
    box-shadow: 0 4px 14px rgba(0, 166, 62, 0.30);
}

.dts-mcp-step-title {
    font-size: var(--dts-font-size-lg);
    font-weight: 600;
    color: var(--dts-text);
    margin: 2px 0 10px;
}

.dts-mcp-step-done-note {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .dts-mcp-step {
        padding-left: 48px;
    }

    .dts-mcp-step::before {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .dts-mcp-step::after {
        left: 16px;
        top: 36px;
    }
}

/* ── Docs — readable typography + nav polish ───────────────────────────── */

.dts-mcp-page .dts-docs-section {
    scroll-margin-top: 90px;
}

.dts-mcp-page .dts-docs-section p,
.dts-mcp-page .dts-docs-list li {
    max-width: 70ch;
}

.dts-mcp-page .dts-docs-section-title {
    position: relative;
    padding-left: 16px;
}

.dts-mcp-page .dts-docs-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--dts-gradient-accent);
}

.dts-mcp-page .dts-docs-nav {
    background: var(--dts-bg);
    box-shadow: var(--dts-shadow-sm);
    border-radius: var(--dts-radius-lg);
}

.dts-mcp-page .dts-docs-nav ul li {
    margin-bottom: 0;
}

.dts-mcp-page .dts-docs-nav ul li a {
    display: block;
    padding: 6px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--dts-radius-sm) var(--dts-radius-sm) 0;
    transition: var(--dts-transition-fast);
}

.dts-mcp-page .dts-docs-nav ul li a:hover {
    border-left-color: var(--dts-accent);
    background: rgba(74, 144, 217, 0.07);
    text-decoration: none;
}

/* ── Changelog — release timeline (rail + dots) ────────────────────────── */

.dts-mcp-page .dts-changelog-release {
    position: relative;
    padding-left: 46px;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 2.75rem;
}

.dts-mcp-page .dts-changelog-release::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: -6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(74, 144, 217, 0.35), var(--dts-border));
}

.dts-mcp-page .dts-changelog-release:last-of-type::before {
    display: none;
}

.dts-mcp-page .dts-changelog-release::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dts-bg);
    border: 3px solid var(--dts-accent);
    box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.14);
}

.dts-mcp-page .dts-changelog-release:first-of-type::after {
    background: var(--dts-accent);
    box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.22);
}

.dts-mcp-page .dts-changelog-version {
    font-size: 1.1rem;
    color: var(--dts-primary-dark);
    background: rgba(74, 144, 217, 0.10);
    border: 1px solid rgba(74, 144, 217, 0.22);
    border-radius: var(--dts-radius-sm);
    padding: 2px 10px;
}

/* Migration table — keep inside the viewport on small screens */
.dts-mcp-page .dts-changelog-migration {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dts-mcp-page .dts-changelog-table code {
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 575px) {
    .dts-mcp-page .dts-changelog-release {
        padding-left: 34px;
    }

    .dts-mcp-page .dts-changelog-release::before {
        left: 6px;
    }

    .dts-mcp-page .dts-changelog-release::after {
        left: 0;
    }
}