/* ============================================================
   Components for the WinForms to Avalonia article.

   Loaded only by this article, via the data file's `stylesheet` field. Code
   listings are not here: those come from the shared component in
   resources/styles/code-block.css, which the API documentation uses too.

   The recurring motif is the diff. Anything belonging to the old codebase
   takes the amber rail, anything belonging to the new one takes brand blue.
   ============================================================ */

/* ---------------------------------------------- Old / new tags */

.article-section .wfa-tag {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}

.article-section .wfa-tag-old {
    background: var(--yellow-warning-bg);
    color: var(--yellow-warning-text);
}

.article-section .wfa-tag-new {
    background: var(--blue-e6f3ff);
    color: var(--primary-blue-dark);
}

/* ---------------------------------------------- Before / after scorecard */

.article-section .wfa-scorecard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 32px 0;
}

.article-section .wfa-score {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 20px;
    background: var(--white);
}

.article-section .wfa-score-old {
    border-top: 3px solid var(--gold-f0c040);
}

.article-section .wfa-score-new {
    border-top: 3px solid var(--primary-blue);
}

.article-section .wfa-score-head {
    margin: 0 0 14px;
}

.article-section .wfa-score ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-section .wfa-score li {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--gray-900);
    padding: 8px 0;
    border-top: 1px solid var(--gray-100);
}

.article-section .wfa-score li:first-child {
    border-top: 0;
    padding-top: 0;
}

.article-section .wfa-score li strong {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--gray-900);
    display: block;
    margin-bottom: 2px;
}

/* ---------------------------------------------- Callouts */

.article-section .wfa-callout {
    margin: 32px 0;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    border-left: 3px solid var(--gray-400);
}

.article-section .wfa-callout-warn {
    background: var(--warm-bg);
    border-left-color: var(--gold-f0c040);
}

.article-section .wfa-callout-head {
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-900);
    margin: 0 0 10px;
}

.article-section .wfa-callout p {
    font-size: var(--text-sm);
    line-height: 1.7;
}

.article-section .wfa-callout p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------- Before / after screenshots */

/* Stacked rather than side by side: at half the text column each these are too
   dense to read a single label. They fill the column and never break out of it:
   a vw-sized break-out overflowed the narrower single-column container, which
   put a horizontal scrollbar on the page and made the layout shift on scroll. */
.article-section .wfa-figure-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 36px 0;
    width: 100%;
}

.article-section .wfa-figure-half img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    box-shadow: var(--elevation-sm);
}

.article-section .wfa-figure-pair figcaption {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: var(--text-2xs);
    color: var(--gray-900);
    line-height: 1.5;
}

/* ---------------------------------------------- Comparison table */

.article-section .wfa-table-wrap {
    margin: 32px 0;
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

.article-section .wfa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
    min-width: 560px;
    margin: 0;
}

.article-section .wfa-table th,
.article-section .wfa-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    line-height: 1.5;
}

.article-section .wfa-table thead th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-900);
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gray-200);
}

.article-section .wfa-table tbody th {
    font-weight: 500;
    color: var(--gray-900);
    width: 34%;
}

.article-section .wfa-table tbody td {
    color: var(--gray-900);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
}

.article-section .wfa-table tbody tr:last-child th,
.article-section .wfa-table tbody tr:last-child td {
    border-bottom: 0;
}

/* The rows that went to zero carry the argument, so they are marked. */
.article-section .wfa-row-hi th,
.article-section .wfa-row-hi td {
    background: var(--blue-e6f3ff);
}

.article-section .wfa-row-hi td:last-child {
    font-weight: 700;
    color: var(--primary-blue-dark);
}

.article-section .wfa-note {
    font-size: var(--text-2xs);
    color: var(--gray-900);
    line-height: 1.65;
    margin-top: -18px;
}

/* ---------------------------------------------- Narrow screens */

@media (max-width: 720px) {

    .article-section .wfa-scorecard {
        grid-template-columns: 1fr;
    }

    .article-section .wfa-figure-pair {
        gap: 24px;
    }
}


/* ---------------------------------------------- Screenshot theme swap */

/* Both screenshots ship in both themes so a reader on dark mode is not shown a
   bright white application. Scoped through .wfa-figure-half because
   `.article-section .wfa-figure-half img` sets display:block and would
   otherwise outrank a lone class and show both shots at once. */
.article-section .wfa-figure-half .wfa-shot-dark {
    display: none;
}

[data-theme="dark"] .article-section .wfa-figure-half .wfa-shot-light {
    display: none;
}

[data-theme="dark"] .article-section .wfa-figure-half .wfa-shot-dark {
    display: block;
    /* Already dark, so it skips the dimming applied to light screenshots. */
    filter: none;
}