/* Adanos 2026 redesign: the rules of type:article only. Its pages link site-2026.css first, then this sheet. Filed by scripts/kit/split.py. */
/* ---------- Articles (insights: weekly reports, blog, data in action) ----------
   A content page (head, contents list, prose) plus the blocks articles carry. article-2026.html is built from a live
   article (scratchpad article/build.py); the chart and the stock card read recorded API data. */
/* the head of an article runs straight into its figures: no rule under it, the author's picture in the meta line */
.doc--article .doc-head { padding-bottom: 0; border-bottom: 0; }
.doc--article .doc-meta { align-items: center; }
/* in articles the sections part by space alone, no hairline between them */
.doc--article .prose section + section { padding-top: 0; border-top: 0; }
/* the text of an article takes the whole column beside the contents, no measure */
.doc--article .prose { max-width: none; }
/* the components of an article read at the size of its running text, not at the 15px of UI text: the short version,
   the editorial points, the questions of the FAQ and the quote of a post */
.doc--article :is(.art-key li, .points li, .faq summary, .post blockquote) { font-size: var(--text-base); }
.byline { display: inline-flex; align-items: center; gap: var(--space-2-5); color: var(--ink-2); }
/* the short version: a box with its title in the head band, the points with the key figures beside them on wide
   screens and under them on narrow ones, then the note on the data in the foot band. A large box, so its bands and
   its content pad with --pad-lg */
.art-key { --pad: var(--pad-lg); display: grid; margin-top: var(--space-8); }
.art-key-points { padding: var(--pad); }
.art-key .stats { --cols: 4; padding: var(--pad); border-top: var(--divider); }
@media (min-width: 1025px) {
    .art-key { grid-template-columns: minmax(0, 1fr) auto; }
    .art-key > :is(.box-head, .box-foot) { grid-column: 1 / -1; }
    .art-key .stats { --cols: 2; align-content: start; column-gap: var(--space-8); border-top: 0; border-left: var(--divider); }
}
.art-key ul { display: grid; gap: var(--space-3); }
.art-key li { position: relative; padding-left: var(--space-5); color: var(--ink-2); }
.art-key li::before { content: ""; position: absolute; left: 2px; top: calc(0.8em - var(--dot-sm) / 2); width: var(--dot-sm); height: var(--dot-sm); border-radius: var(--r-round); background: var(--gold); }
.art-key strong { color: var(--ink); }
/* the note is running text: the foot's tabular digits would widen its hyphens */
.art-key-note { padding-block: var(--space-4); line-height: var(--lh-body); }
.art-key-note > p { font-variant-numeric: normal; }
.art-key-note a { color: var(--ink-2); text-decoration: underline 1px var(--line-2); text-underline-offset: 3px; }
.art-key-note p + p { margin-top: var(--space-2); }
.art-label { margin-bottom: var(--space-1-5); }
.art-bars { display: flex; align-items: flex-end; gap: 3px; height: 180px; border-bottom: 1px solid var(--line-2); }
.art-bars span { flex: 1; height: calc(var(--h) * 100%); border-radius: var(--r-2xs) var(--r-2xs) 0 0; background: color-mix(in srgb, var(--slate) 45%, transparent); transition: background-color var(--dur-fast) ease-out; }
.art-bars span.is-peak { background: var(--gold); }
@media (hover: hover) { .art-bars span:hover { background: var(--slate); } }
.art-fig figcaption { margin-top: var(--space-3); }
/* a chart drawn in SVG: its labels scale with it, so below the width that keeps the smallest at 13px (--w, set by the
   article's markup) it scrolls sideways, as a wide table does */
.art-plot { overflow-x: auto; overscroll-behavior-x: contain; }
.art-plot svg { display: block; width: 100%; min-width: var(--w); height: auto; font-size: var(--text-xs); }
.art-table { overflow-x: auto; overscroll-behavior-x: contain; }
.art-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--lh-title); }
/* the description goes under the table, as a figure caption goes under its chart */
.art-table caption { caption-side: bottom; padding-top: var(--space-3); text-align: left; }
.art-table :is(th, td) { padding: var(--space-2-5) var(--space-3); border-bottom: var(--divider); text-align: left; white-space: nowrap; }
.art-table :is(th, td):first-child { padding-left: 0; }
.art-table :is(th, td):last-child { padding-right: 0; }
.art-table thead th { border-bottom-color: var(--line-2); }
.art-table tbody th { font-weight: var(--fw-medium); color: var(--ink); }
.art-table .n { text-align: right; font-variant-numeric: tabular-nums; }
/* a comparison of many columns wraps its cells, each column at least 5.5rem wide. Where they still run out of room
   the table scrolls under its first column.
   Adanos's own row takes the gold fill of a notice, so every cell keeps an inset from the fill's edge, the first and
   the last too. */
.art-table--wide :is(th, td) { min-width: 5.5rem; padding-inline: var(--space-2-5); white-space: normal; vertical-align: top; }
.art-table--wide :is(th, td):is(:first-child, :last-child) { padding-inline: var(--space-2-5); }
.art-table--wide :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; min-width: 8rem; background: var(--bg); box-shadow: inset -1px 0 var(--line); }
.art-table--wide tbody tr.is-us > :is(th, td) { background: color-mix(in srgb, var(--gold-light) 30%, var(--paper)); }
/* a card in the text: a ranked tool of a comparison (its rank, name and category over its price, its text, its facts,
   then its strengths and watch-outs side by side) or a graded call (its claim over its grade, then the reasoning) */
.art-card { padding: var(--pad-lg); }
.art-card > * + * { margin-top: var(--space-5); }
.art-card.is-us { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.art-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3) var(--space-4); }
.art-card-head h3 .tag { margin-right: var(--space-1); vertical-align: 2px; }
.art-card-head .type-meta { margin-top: var(--space-1-5); }
.art-card .kv { --label-col-text: 7rem; border-top: var(--divider); }
/* boxes side by side: two options on the box surface, or strengths and limits in the tint of a good fact and of a
   caution with a plus or a minus before each line */
.art-pcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.art-card .art-pcs { margin-block: var(--space-5) 0; }
.art-pc { padding: var(--pad); }
.art-pc:has(> .pos) { border-color: color-mix(in srgb, var(--bull) 30%, transparent); background: color-mix(in srgb, var(--bull) 6%, var(--paper)); }
.art-pc:has(> .neg) { border-color: color-mix(in srgb, var(--bear) 30%, transparent); background: color-mix(in srgb, var(--bear) 6%, var(--paper)); }
.art-pc ul { display: grid; gap: var(--space-2); }
.art-pc li { position: relative; padding-left: var(--space-5); }
.art-pc li::before { content: "+" / ""; position: absolute; left: 2px; font-weight: var(--fw-medium); color: var(--bull-ink); }
.art-pc .neg li::before { content: "\2212" / ""; color: var(--bear-ink); }
.art-stock { padding: var(--pad); }
.art-stock-stats { --cols: 5; margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--divider); }
/* the code of a method: the dark panel of the playground with its copy button */
.art-code { border-radius: var(--r-box); overflow: hidden; }
.art-code .ep-code:focus-visible { outline-offset: -2px; } /* the panel clips a ring outside the code */
.art-note { font-size: var(--text-sm); color: var(--ink-2); }
.art-sources { margin-top: var(--space-4); padding-left: var(--space-5); list-style: decimal; font-size: var(--text-sm); }
.art-sources li + li { margin-top: var(--space-2); }
.art-sources li::marker { color: var(--muted); }
/* after the text: the points of the homepage's closing band, the older and the newer piece of the family first */
.art-more { margin-top: var(--space-16); }
.art-more h2 { margin-bottom: var(--space-5); font-size: var(--text-2xl); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    /* articles: the figures of the stock card in rows of three */
    .art-stock-stats { --cols: 3; }
    .art-pcs { grid-template-columns: minmax(0, 1fr); }
    /* the four key figures in two rows of two */
    .art-key .stats { --cols: 2; }
    .art-more h2 { font-size: var(--text-xl); }
}