/* ==========================================================================
   comparisons-best-of.css: the 9 comparisons (/c/2026/c/*-vs-*) and 4 best-of guides (/c/2026/best-*)
   Restyle ticket 06. Linked after site.css through `extra_css: [comparisons-best-of]`; only the pieces site.css
   has no component for: the two contenders, part heads, the centres' profiles, plain panels, notes, the
   verdict rule, the Top picks, and the bar charts. Rules and the two inks, square, left-aligned.
   ========================================================================== */

/* The two centres side by side under the intro: a cobalt rule over each, the price in the heading face. */
.contenders {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 28px 0 8px;
}
.contender { padding: 12px 0 14px; border-top: 2px solid var(--ink); }
.contender-name { font: 700 19px/1.25 var(--serif); color: var(--ink); }
.contender-tagline { margin-top: 4px; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }
.contender-price { margin-top: 10px; font: 700 26px/1.1 var(--serif); color: var(--ink); }
.contender-note { font-size: 14px; color: var(--muted); }
.vs { font: 600 12px/1.4 var(--sans); letter-spacing: .12em; color: var(--red); }
@media (min-width: 600px) {
    /* Two equal columns, with or without the VS between them (one page has none). */
    .contenders { flex-direction: row; gap: 20px; }
    .contender { flex: 1 1 0; }
    .vs { flex: none; align-self: center; }
}

/* A part of a long comparison (what used to be "Section 1/2/3"): a heavier rule and a muted line under it.
   The section head that follows sits under that line without a rule of its own. */
h2.part { border-top-width: 3px; margin-top: 56px; }
.part-sub { margin: 0 0 8px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.part-sub + h2 { border-top: 0; padding-top: 0; margin-top: 28px; }

/* The two centres' profiles: plain blocks, two columns on a laptop. */
.sides { display: grid; grid-template-columns: 1fr; column-gap: 32px; margin: 8px 0 16px; }
.side > h3:first-child { margin-top: 20px; }
.side .cross { margin-top: -1em; }      /* the bad points continue the good ones' ruled rows */
@media (min-width: 720px) {
    .sides { grid-template-columns: 1fr 1fr; }
}
.tagline { margin: 0 0 8px; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }

/* Long sections that sat in tinted boxes: now plain flow. */
.panel { margin: 24px 0; }
.panel > h3:first-child { margin-top: 0; }

/* Which to choose: between two cobalt rules, as the review pages' verdict. */
.verdict-box { margin: 28px 0; padding: 16px 0 4px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.verdict-box > h3:first-child, .verdict-box > h4:first-child { margin-top: 0; }
h2 + .verdict-box { border-top: 0; padding-top: 0; }    /* the section head's rule is enough */


/* Calls to action: the selling points as a tick list (the line under the button is site.css .cta-note). */
.cta .cta-features { margin: 0 0 18px; }

/* Best-of "Our Top Picks": ruled entries, the price as a muted line. */
.picks { list-style: none; margin: 8px 0 1em; padding: 0; border-top: 1px solid var(--ink); }
.picks > li { margin: 0; padding: 14px 0 6px; border-bottom: 1px solid var(--soft); }
.picks h3 { margin: 0 0 2px; font-size: 20px; }
.picks h3 a { color: var(--ink); text-decoration: none; }
.picks h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.picks p { margin: 0 0 8px; }
.picks .price-tag { font: 600 14px/1.4 var(--sans); color: var(--muted); }

/* Bar charts (forgetting curve, six-year cost): flat cobalt bars on the practice-grid tint, numbers in paper. */
.forgetting-curve { margin: 24px 0; }
.forgetting-curve > h4 { margin: 0 0 12px; }
.curve-visual { display: flex; align-items: flex-end; gap: 8px; height: 140px; border-bottom: 1.5px solid var(--ink); }
.curve-bar { flex: 1; max-width: 56px; display: flex; justify-content: center; padding-top: 6px; background: var(--ink); }
.curve-bar span { font: 700 12px/1 var(--sans); color: var(--paper); }
.curve-labels { display: flex; gap: 8px; margin: 6px 0 16px; }
.curve-labels span { flex: 1; max-width: 56px; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: start; }

.curve-rows, .cost-bars { display: grid; gap: 10px; margin: 0 0 16px; }
.curve-row, .cost-bar-item { display: grid; grid-template-columns: 1fr; gap: 4px; }
.curve-label, .cost-bar-label { font-size: 14px; color: var(--muted); }
.curve-bar-wrapper, .cost-bar-wrapper { background: var(--soft); }
.curve-fill, .cost-bar {
    min-width: 4.5em;
    padding: 6px 8px;
    background: var(--ink);
    font: 700 13px/1.2 var(--sans);
    color: var(--paper);
    white-space: nowrap;
}
@media (min-width: 600px) {
    .curve-row, .cost-bar-item { grid-template-columns: 9.5em 1fr; gap: 12px; align-items: center; }
}