/* Guide articles (/cara-cakap-dengan-anak/, /bahagi-kerja-rumah-suami-isteri/,
   /jadual-kerja-rumah-keluarga/ and their /en/ twins). Loads after site.css, seasons.css,
   answers.css and screen-time.css and reuses their tiles, the by-age table and the source list.
   Adds only the checklist, the timed agenda, the free ebook box and the safety note. Tokens only. */

/* checklist: hairline rows with an empty square to tick on paper */
.ar-check { list-style: none; padding: 0; margin: 0; max-width: 68ch; }
.ar-check li { position: relative; margin: 0; padding: var(--s4) 0 var(--s4) calc(20px + var(--s4)); border-top: 1px solid var(--border); color: var(--muted); line-height: 1.5; }
.ar-check li:last-child { border-bottom: 1px solid var(--border); }
.ar-check li::before { content: ""; position: absolute; left: 0; top: calc(var(--s4) + .2em); width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--text); border-radius: calc(var(--radius-base) / 3); }
.ar-check b { color: var(--text); font-weight: var(--wt-strong); }

/* timed agenda: the minutes sit in a fixed left column */
.ar-agenda { list-style: none; padding: 0; margin: 0; max-width: 68ch; }
.ar-agenda li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s4); margin: 0; padding: var(--s4) 0; border-top: 1px solid var(--border); line-height: 1.5; }
.ar-agenda li:last-child { border-bottom: 1px solid var(--border); }
.ar-agenda span { font-weight: var(--wt-strong); color: var(--text); font-variant-numeric: tabular-nums; }
.ar-agenda p { margin: 0; color: var(--muted); }
.ar-agenda b { color: var(--text); font-weight: var(--wt-strong); }

/* comparison table inside an article: the skill column sheds on phones (st-shed in screen-time.css) */
.ar-table td:nth-child(3) { color: var(--text); }
.ar-table tbody th { width: 9.5rem; }

/* free ebook box: cover left, copy and button right; stacks on phones */
.ar-ebook { display: grid; gap: var(--s8); align-items: center; background: var(--tile); border-radius: var(--radius-card); padding: var(--s8) var(--pad-card); }
.ar-ebook > * { min-width: 0; }
@media (min-width: 46rem) { .ar-ebook { grid-template-columns: 220px 1fr; gap: var(--s12); } }
.ar-ebook-cover { display: block; max-width: 220px; }
.ar-ebook-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-nested); box-shadow: var(--shadow-shot); }
.ar-ebook-tag { margin: 0 0 var(--s2); font-size: var(--t-meta); font-weight: var(--wt-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ar-ebook h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin-bottom: var(--s3); }
.ar-ebook p { color: var(--muted); max-width: 56ch; }
.ar-ebook .st-dots { margin: 0 0 var(--s6); }
.ar-ebook .note { margin-top: var(--s3); }
@media (max-width: 45.99rem) { .ar-ebook { padding: var(--s6) var(--s5); } .ar-ebook-cover { max-width: 160px; } }

/* safety note: warm tile, only on the couples page */
.ar-safe { margin-top: var(--s8); padding: var(--s6); border-radius: var(--radius-card); background: var(--warn-soft); max-width: 72ch; }
.ar-safe h3 { font-size: var(--t-body); margin: 0 0 var(--s2); }
.ar-safe p { margin: 0; color: var(--text); font-size: var(--t-small); }

/* age tiles with dot lists: keep the single phone column inside the page, long lines wrap */
.s-trio { grid-template-columns: minmax(0, 1fr); }
.s-trio .st-dots { overflow-wrap: break-word; }
@media (max-width: 45.99rem) { .s-trio li { grid-template-columns: 72px minmax(0, 1fr); } }
@media (min-width: 46rem) { .s-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the tile rules in seasons.css (.s-trio li) also reach the dot list items: reset them to plain rows */
.s-trio .st-dots li { display: list-item; background: none; border-radius: 0; padding: 0; margin: 0 0 var(--s2); box-shadow: none; transform: none; }
.s-trio .st-dots li:last-child { margin-bottom: 0; }
.s-trio .st-dots li:hover { transform: none; box-shadow: none; }
.s-trio h3 + .st-dots { margin-top: var(--s4); }
@media (max-width: 39.99rem) { .ar-table tbody th { width: 5.5rem; } }
/* tables whose last column is the answer, not a source or label: keep it at reading size */
.ar-last td:last-child { color: var(--text); font-size: var(--t-small); }