/* /perbandingan/aplikasi-kerja-rumah-terbaik/ and /en/compare/best-chore-apps-malaysia/: seven apps
   on one page. Loaded after site.css, vs.css and compare.css, so marks (.m-*), .cmp-table, .cmp-scroll
   and .cmp-checked come from there. Art is existing generated clay; never another app's logo. */

/* hero: four clay objects on one tile, decorative */
.ba-hero-art { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); padding: var(--s8); background: var(--tile); border-radius: var(--radius-card); }
@media (min-width: 46rem) { .ba-hero-art { padding: var(--s10); gap: var(--s6); } }
.ba-hero-art img { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto; }
.ba-disclose { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--t-small); max-width: 62ch; }

/* the seven-app table: apps are rows, the app column stays pinned while the rest scrolls */
.ba-table { min-width: 84rem; }
.ba-table col.c-topic { width: 11rem; }
.ba-table thead th { vertical-align: bottom; }
.ba-table thead th:first-child, .ba-table tbody th { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--hairline); }
.ba-table tbody th small { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--t-meta); font-weight: var(--wt-regular); }
.ba-table tbody tr.is-us > * { background: var(--tile); color: var(--text); }
.ba-table tbody tr.is-us th { padding-left: var(--s4); border-radius: var(--radius-card) 0 0 var(--radius-card); }
.ba-table tbody tr.is-us > :last-child { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.ba-table td { font-size: var(--t-small); }
.ba-table .cmp-state { align-items: flex-start; font-size: var(--t-small); }
.ba-table .cmp-state .m { margin-top: 1px; }
@media (max-width: 51.99rem) { .ba-table { min-width: 76rem; } .ba-table col.c-topic { width: 8.5rem; } }

/* app by app: one card each, two columns on wide screens */
.ba-apps { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .ba-apps { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.ba-apps > li { margin: 0; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s8) var(--pad-card); background: var(--tile); border-radius: var(--radius-card); scroll-margin-top: 88px; }
.ba-apps h3 { margin: 0; font-size: var(--t-lead); line-height: 1.3; }
.ba-apps .ba-kind { margin: 0; color: var(--muted); font-size: var(--t-small); }
.ba-apps .ba-price { margin: 0; font-size: var(--t-small); color: var(--text); font-weight: var(--wt-medium); }
.ba-apps dl { margin: 0; display: grid; gap: var(--s3); }
.ba-apps dl > div { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.ba-apps dt { grid-column: 2; font-size: var(--t-meta); color: var(--muted); }
.ba-apps dd { grid-column: 2; margin: 0; font-size: var(--t-small); color: var(--text); }
.ba-apps dl .m { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; }
.ba-apps .ba-more { margin-top: auto; padding-block: 11px; font-size: var(--t-small); font-weight: var(--wt-medium); }
.ba-apps > li.is-us { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }

/* best for: family type on the left, the pick on the right */
.ba-picks { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0; }
.ba-picks li { display: grid; gap: var(--s1) var(--s8); margin: 0; padding: var(--s5) 0; border-top: 1px solid var(--hairline); }
.ba-picks li:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 46rem) { .ba-picks li { grid-template-columns: 1fr 1fr; align-items: baseline; } }
.ba-picks b { font-weight: var(--wt-strong); }
.ba-picks span { color: var(--muted); font-size: var(--t-small); }
.ba-picks span a { font-weight: var(--wt-medium); }

/* how we checked: a plain list of rules, then sources */
.ba-method { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); max-width: 75ch; }
.ba-method li { position: relative; margin: 0; padding-left: var(--s5); }
.ba-method li::before { content: ""; position: absolute; left: var(--s1); top: .62em; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--border); }
.ba-method + .cmp-sources { margin-top: var(--s8); }