/*
 * Article Design v2 — loaded only for single posts whose body has an element with the class `omx2-article`
 * (see inc/article-v2.php). Everything is scoped to .omx2-article, so legacy articles are never affected.
 * Colours come from the theme tokens (--color-*), which the shared shell sets to white / #171719.
 * Contract for article generators: docs/Article-Design-v2-Spec.md.
 */

/* ------------------------------------------------------------------ tokens */
.omx2-article {
    /* generic brand = the site accent */
    --omx2-accent: #6735c7;      /* decorative: bars, borders, bullets (>= 3:1 on the page background) */
    --omx2-ink: #6735c7;         /* text and links (>= 4.5:1 on the page background and on cards) */
    --omx2-solid: #6735c7;       /* fill that carries white text (>= 4.5:1 against white) */
    --omx2-soft: color-mix(in srgb, var(--omx2-accent) 10%, transparent);
    --omx2-tip-ink: #1a7a4a;
    --omx2-warn-ink: #8a4b00;
    --omx2-warn: #c27803;
    --omx2-code-bg: #16151a;
    --omx2-code-fg: #ecebf1;
    --omx2-radius: 14px;

    color: var(--color-text, #202023);
    font-size: 1.0625rem;
    line-height: 1.95;
    overflow-wrap: anywhere;
}
:root[data-theme="dark"] .omx2-article {
    --omx2-accent: #bf9afa;
    --omx2-ink: #bf9afa;
    --omx2-solid: #6735c7;
    --omx2-tip-ink: #5fd39a;
    --omx2-warn-ink: #f5b25c;
    --omx2-warn: #f5b25c;
    --omx2-code-bg: #0f0e12;
}

/* brand accents (light) */
.omx2-article[data-brand="openai"]    { --omx2-accent: #10a37f; --omx2-ink: #0a7a5e; --omx2-solid: #0a7a5e; }
.omx2-article[data-brand="anthropic"] { --omx2-accent: #d97757; --omx2-ink: #b0462a; --omx2-solid: #b0462a; }
.omx2-article[data-brand="google"]    { --omx2-accent: #4285f4; --omx2-ink: #1a5fd0; --omx2-solid: #1a5fd0; }
.omx2-article[data-brand="meta"]      { --omx2-accent: #0866ff; --omx2-ink: #0a54d6; --omx2-solid: #0a54d6; }
.omx2-article[data-brand="nvidia"]    { --omx2-accent: #5e9600; --omx2-ink: #4a7600; --omx2-solid: #4a7600; }
.omx2-article[data-brand="microsoft"] { --omx2-accent: #0078d4; --omx2-ink: #005fa8; --omx2-solid: #005fa8; }
.omx2-article[data-brand="mistral"]   { --omx2-accent: #fa520f; --omx2-ink: #c03a00; --omx2-solid: #c03a00; }
.omx2-article[data-brand="xai"]       { --omx2-accent: #111111; --omx2-ink: #111111; --omx2-solid: #111111; }
/* brand accents (dark): lighter decor and ink; solid fills stay dark enough for white text */
:root[data-theme="dark"] .omx2-article[data-brand="openai"]    { --omx2-accent: #2fcfa6; --omx2-ink: #4fd8b0; --omx2-solid: #0a7a5e; }
:root[data-theme="dark"] .omx2-article[data-brand="anthropic"] { --omx2-accent: #e8906f; --omx2-ink: #f0a285; --omx2-solid: #b0462a; }
:root[data-theme="dark"] .omx2-article[data-brand="google"]    { --omx2-accent: #7aa7f7; --omx2-ink: #8ab4f8; --omx2-solid: #1a5fd0; }
:root[data-theme="dark"] .omx2-article[data-brand="meta"]      { --omx2-accent: #5b97ff; --omx2-ink: #6ea8ff; --omx2-solid: #0a54d6; }
:root[data-theme="dark"] .omx2-article[data-brand="nvidia"]    { --omx2-accent: #8fd400; --omx2-ink: #9ad619; --omx2-solid: #4a7600; }
:root[data-theme="dark"] .omx2-article[data-brand="microsoft"] { --omx2-accent: #4aa3ec; --omx2-ink: #5aa9ee; --omx2-solid: #005fa8; }
:root[data-theme="dark"] .omx2-article[data-brand="mistral"]   { --omx2-accent: #ff7a3d; --omx2-ink: #ff8a57; --omx2-solid: #c03a00; }
:root[data-theme="dark"] .omx2-article[data-brand="xai"]       { --omx2-accent: #e8e8ea; --omx2-ink: #f2f2f4; --omx2-solid: #111111; }

/* -------------------------------------------------------------- typography */
.omx2-article > :first-child { margin-top: 0; }
.omx2-article p { margin: 0 0 1.4em; }
.omx2-article a { color: var(--omx2-ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.omx2-article a:hover { text-decoration-thickness: 2px; }
.omx2-article strong { font-weight: 700; }
.omx2-article h2 {
    margin: 72px 0 24px;
    padding: 2px 0 2px 16px;
    border-top: 0;
    border-left: 4px solid var(--omx2-accent);
    font-size: clamp(1.45rem, 4.6vw, 1.85rem);
    line-height: 1.45;
    letter-spacing: -0.02em;
    scroll-margin-top: calc(var(--shell-sticky-top, 0px) + 32px);
}
.omx2-article h3 {
    margin: 48px 0 16px;
    font-size: clamp(1.15rem, 3.6vw, 1.35rem);
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.omx2-article h4 { margin: 32px 0 12px; font-size: 1.05rem; line-height: 1.6; }
.omx2-article ul, .omx2-article ol { margin: 0 0 1.6em; padding-left: 1.5em; }
.omx2-article li { margin: 0.4em 0; }
.omx2-article li::marker { color: var(--omx2-accent); }
.omx2-article hr { margin: 56px 0; border: 0; border-top: 1px solid var(--color-line, #e9e9ec); }
.omx2-article img { max-width: 100%; height: auto; }
.omx2-article code {
    padding: 0.1em 0.4em;
    background: var(--color-surface, #f6f5f8);
    border-radius: 6px;
    font-size: 0.9em;
}
.omx2-article .omx2-lead{ margin: 0 0 40px; color: var(--color-muted, #65656e); font-size: 1.125rem; line-height: 1.9; }
.omx2-article .omx2-label {
    margin: 0 0 10px;
    color: var(--omx2-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ------------------------------------------------- blocks share rhythm/edge */
.omx2-article .omx2-tldr, .omx2-article .omx2-callout, .omx2-article .omx2-cards, .omx2-article .omx2-stats, .omx2-article .omx2-steps, .omx2-article .omx2-flow, .omx2-article .omx2-compare,
.omx2-article .omx2-table-wrap, .omx2-article .omx2-quote, .omx2-article .omx2-sources, .omx2-article .omx2-code, .omx2-article .omx2-cta, .omx2-article .omx2-figure { margin: 40px 0; }

/* ------------------------------------------------------------------ TL;DR */
.omx2-article .omx2-tldr {
    padding: 24px 26px;
    background: var(--color-surface, #f6f5f8);
    border: 1px solid var(--color-line, #e9e9ec);
    border-top: 4px solid var(--omx2-accent);
    border-radius: var(--omx2-radius);
}
.omx2-article .omx2-tldr ul, .omx2-article .omx2-tldr ol{ margin: 0; padding: 0; list-style: none; }
.omx2-article .omx2-tldr li{ position: relative; margin: 0; padding: 0.25em 0 0.25em 1.7em; line-height: 1.8; }
.omx2-article .omx2-tldr li::before {
    content: "";
    position: absolute;
    left: 0.15em;
    top: 0.78em;
    width: 0.62em;
    height: 0.62em;
    background: var(--omx2-accent);
    border-radius: 50%;
}

/* ---------------------------------------------------------------- callouts */
.omx2-article .omx2-callout {
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--omx2-accent) 35%, var(--color-line, #e9e9ec));
    border-left: 4px solid var(--omx2-accent);
    border-radius: var(--omx2-radius);
    background: color-mix(in srgb, var(--omx2-accent) 7%, var(--color-bg, #fff));
}
.omx2-article .omx2-callout__title{ margin: 0 0 6px; color: var(--omx2-ink); font-weight: 700; line-height: 1.5; }
.omx2-article .omx2-callout > :last-child{ margin-bottom: 0; }
.omx2-article .omx2-callout--point{ border-left-color: var(--omx2-accent); }
.omx2-article .omx2-callout--note{ border-color: var(--color-line, #e9e9ec); border-left-color: var(--color-muted, #65656e); background: var(--color-surface, #f6f5f8); }
.omx2-article .omx2-callout--note .omx2-callout__title{ color: var(--color-text, #202023); }
.omx2-article .omx2-callout--tip{ border-color: color-mix(in srgb, var(--omx2-tip-ink) 35%, var(--color-line, #e9e9ec)); border-left-color: var(--omx2-tip-ink); background: color-mix(in srgb, var(--omx2-tip-ink) 7%, var(--color-bg, #fff)); }
.omx2-article .omx2-callout--tip .omx2-callout__title{ color: var(--omx2-tip-ink); }
.omx2-article .omx2-callout--warning{ border-color: color-mix(in srgb, var(--omx2-warn) 40%, var(--color-line, #e9e9ec)); border-left-color: var(--omx2-warn); background: color-mix(in srgb, var(--omx2-warn) 9%, var(--color-bg, #fff)); }
.omx2-article .omx2-callout--warning .omx2-callout__title{ color: var(--omx2-warn-ink); }

/* ------------------------------------------------------------------- cards */
.omx2-article .omx2-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.omx2-article .omx2-card {
    padding: 22px;
    background: var(--color-surface, #f6f5f8);
    border: 1px solid var(--color-line, #e9e9ec);
    border-radius: var(--omx2-radius);
}
.omx2-article .omx2-card__meta{ margin: 0 0 6px; color: var(--omx2-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.omx2-article .omx2-card__title{ margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.omx2-article .omx2-card > :last-child{ margin-bottom: 0; }

/* ------------------------------------------------------------------- stats */
.omx2-article .omx2-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.omx2-article .omx2-stat{ padding: 18px 18px 16px; border: 1px solid var(--color-line, #e9e9ec); border-radius: var(--omx2-radius); background: var(--color-surface, #f6f5f8); }
.omx2-article .omx2-stat__label{ margin: 0 0 4px; color: var(--color-muted, #65656e); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.omx2-article .omx2-stat__value{ margin: 0; color: var(--omx2-ink); font-size: 1.6rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.omx2-article .omx2-stat__note{ margin: 4px 0 0; color: var(--color-muted, #65656e); font-size: 0.8125rem; line-height: 1.6; }

/* ------------------------------------------------------------------- steps */
.omx2-article .omx2-steps { padding: 0; list-style: none; counter-reset: omx2-step; }
.omx2-article .omx2-step{ position: relative; margin: 0 0 16px; padding: 4px 0 4px 56px; counter-increment: omx2-step; min-height: 40px; }
.omx2-article .omx2-step::before {
    content: counter(omx2-step);
    position: absolute;
    left: 0;
    top: 2px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: var(--omx2-soft);
    border: 1px solid var(--omx2-accent);
    border-radius: 50%;
    color: var(--omx2-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.omx2-article .omx2-step__title{ margin: 0 0 4px; font-weight: 700; line-height: 1.5; }
.omx2-article .omx2-step > :last-child{ margin-bottom: 0; }

/* -------------------------------------------------------------------- flow */
.omx2-article .omx2-flow { display: flex; gap: 0; padding: 0; list-style: none; counter-reset: omx2-flow; }
.omx2-article .omx2-flow__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 28px 0 0;
    padding: 16px 16px;
    background: var(--color-surface, #f6f5f8);
    border: 1px solid var(--color-line, #e9e9ec);
    border-radius: var(--omx2-radius);
    font-size: 0.9375rem;
    line-height: 1.7;
    counter-increment: omx2-flow;
}
.omx2-article .omx2-flow__item:last-child{ margin-right: 0; }
.omx2-article .omx2-flow__item::after {
    content: "→";
    content: "→" / "";
    position: absolute;
    right: -26px;
    top: 50%;
    width: 24px;
    transform: translateY(-50%);
    color: var(--omx2-ink);
    font-size: 1.25rem;
    text-align: center;
}
.omx2-article .omx2-flow__item:last-child::after{ content: none; }
.omx2-article .omx2-flow__title{ display: block; margin: 0 0 4px; font-weight: 700; }

/* ----------------------------------------------------------------- compare */
.omx2-article .omx2-compare { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.omx2-article .omx2-compare__item {
    position: relative;
    padding: 24px 22px 20px;
    background: var(--color-surface, #f6f5f8);
    border: 1px solid var(--color-line, #e9e9ec);
    border-radius: var(--omx2-radius);
}
.omx2-article .omx2-compare__item--best{ border: 2px solid var(--omx2-accent); padding: 23px 21px 19px; }
.omx2-article .omx2-compare__name{ margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; line-height: 1.5; }
.omx2-article .omx2-badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 2px 10px;
    background: var(--omx2-soft);
    border: 1px solid var(--omx2-accent);
    border-radius: 999px;
    color: var(--omx2-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
}
.omx2-article .omx2-compare ul{ margin: 12px 0 0; padding-left: 1.2em; }

/* ------------------------------------------------------------------- table */
.omx2-article .omx2-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-line, #e9e9ec);
    border-radius: var(--omx2-radius);
    -webkit-overflow-scrolling: touch;
}
.omx2-article .omx2-table{ width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.7; }
.omx2-article .omx2-table caption{ padding: 12px 16px; color: var(--color-muted, #65656e); font-size: 0.8125rem; text-align: left; caption-side: bottom; }
.omx2-article .omx2-table th, .omx2-article .omx2-table td{ padding: 12px 16px; border-bottom: 1px solid var(--color-line, #e9e9ec); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.omx2-article .omx2-table thead th{ background: var(--color-surface, #f6f5f8); color: var(--color-text, #202023); font-weight: 700; white-space: nowrap; }
.omx2-article .omx2-table tbody th{ font-weight: 700; }
.omx2-article .omx2-table tbody tr:last-child > *{ border-bottom: 0; }
.omx2-article .omx2-table .omx2-best{ color: var(--omx2-ink); font-weight: 700; }

/* scrollable regions are keyboard-focusable (tabindex="0" in the markup); show where the focus is */
.omx2-article .omx2-table-wrap:focus-visible, .omx2-article .omx2-code pre:focus-visible { outline: 2px solid var(--omx2-ink); outline-offset: 2px; }

/* ------------------------------------------------------------------- quote */
.omx2-article .omx2-quote { padding: 4px 0 4px 22px; border-left: 4px solid var(--omx2-accent); color: var(--color-text, #202023); font-size: 1.05rem; }
.omx2-article .omx2-quote p{ margin: 0 0 0.6em; }
.omx2-article .omx2-quote cite{ display: block; color: var(--color-muted, #65656e); font-size: 0.875rem; font-style: normal; }

/* ----------------------------------------------------------------- sources */
.omx2-article .omx2-sources {
    padding: 22px 24px;
    border: 1px dashed var(--color-muted, #65656e);
    border-radius: var(--omx2-radius);
    font-size: 0.9375rem;
    line-height: 1.8;
}
.omx2-article .omx2-sources ul, .omx2-article .omx2-sources ol{ margin: 0 0 12px; padding-left: 1.3em; }
.omx2-article .omx2-sources__checked{ margin: 0; color: var(--color-muted, #65656e); font-size: 0.875rem; }

/* -------------------------------------------------------------------- code */
.omx2-article .omx2-code { overflow: hidden; border-radius: var(--omx2-radius); background: var(--omx2-code-bg); color: var(--omx2-code-fg); }
.omx2-article .omx2-code figcaption {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #b9b7c1;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.omx2-article .omx2-code code{ padding: 0; background: transparent; color: inherit; font-size: inherit; overflow-wrap: normal; }
.omx2-article pre {
    margin: 32px 0;
    padding: 18px;
    overflow-x: auto;
    border-radius: var(--omx2-radius);
    background: var(--omx2-code-bg);
    color: var(--omx2-code-fg);
    font-size: 0.875rem;
    line-height: 1.75;
}
.omx2-article .omx2-code pre { border-radius: 0; margin: 0; padding: 18px 18px; overflow-x: auto; background: transparent; color: inherit; font-size: 0.875rem; line-height: 1.75; }
.omx2-article pre code { padding: 0; background: transparent; color: inherit; overflow-wrap: normal; }

/* --------------------------------------------------------------------- CTA */
.omx2-article .omx2-cta {
    padding: 28px 28px;
    background: var(--omx2-soft);
    border: 1px solid color-mix(in srgb, var(--omx2-accent) 40%, var(--color-line, #e9e9ec));
    border-radius: var(--omx2-radius);
}
.omx2-article .omx2-cta__title{ margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; line-height: 1.5; }
.omx2-article .omx2-cta p{ margin: 0 0 16px; }
.omx2-article a.omx2-cta__button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 22px;
    background: var(--omx2-solid);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.omx2-article a.omx2-cta__button:hover { filter: brightness(1.08); text-decoration: none; }
.omx2-article a.omx2-cta__button:focus-visible, .omx2-article a:focus-visible { outline: 2px solid var(--omx2-ink); outline-offset: 3px; }

/* ----------------------------------------------------------------- figures */
.omx2-article .omx2-figure img { display: block; width: 100%; border-radius: var(--omx2-radius); }
.omx2-article .omx2-figure figcaption{ margin-top: 10px; color: var(--color-muted, #65656e); font-size: 0.8125rem; line-height: 1.7; text-align: center; }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 767px) {
    .omx2-article { font-size: 1rem; line-height: 1.9; }
    .omx2-article h2 { margin-top: 56px; padding-left: 14px; }
    .omx2-article h3 { margin-top: 40px; }
    .omx2-article .omx2-tldr, .omx2-article .omx2-callout, .omx2-article .omx2-cards, .omx2-article .omx2-stats, .omx2-article .omx2-steps, .omx2-article .omx2-flow, .omx2-article .omx2-compare,
    .omx2-article .omx2-table-wrap, .omx2-article .omx2-quote, .omx2-article .omx2-sources, .omx2-article .omx2-code, .omx2-article .omx2-cta, .omx2-article .omx2-figure{ margin: 32px 0; }
    .omx2-article .omx2-tldr, .omx2-article .omx2-callout, .omx2-article .omx2-card, .omx2-article .omx2-sources, .omx2-article .omx2-cta{ padding: 18px 18px; }
    .omx2-article .omx2-flow{ flex-direction: column; }
    .omx2-article .omx2-flow__item{ margin: 0 0 30px; }
    .omx2-article .omx2-flow__item:last-child{ margin-bottom: 0; }
    .omx2-article .omx2-flow__item::after{ content: "↓"; content: "↓" / ""; right: auto; left: 50%; top: auto; bottom: -28px; width: auto; transform: translateX(-50%); }
    .omx2-article .omx2-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .omx2-article .omx2-stat__value{ font-size: 1.35rem; }
    .omx2-article .omx2-table-wrap {
        background:
            linear-gradient(to right, var(--color-bg, #fff) 30%, transparent) left center / 24px 100% no-repeat local,
            linear-gradient(to left, var(--color-bg, #fff) 30%, transparent) right center / 24px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), transparent) left center / 10px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), transparent) right center / 10px 100% no-repeat scroll;
    }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .omx2-article .omx2-flow__item{ font-size: 0.875rem; padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .omx2-article a.omx2-cta__button:hover { filter: none; }
}