/* Age pages (/panduan/umur-4-6/ ... /en/guide/ages-13-17/). Loads after site.css and guide.css and
   only adds what those lack: a breadcrumb trail, the full chore table (stacks into cards on phones),
   the load chip, sourced development notes, and the chart + ebook pair. Tokens only. */

/* breadcrumb: a quiet trail above the h1 */
.a-crumbs ol { list-style: none; padding: 0; margin: 0 0 var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--muted); max-width: none; }
.a-crumbs li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.a-crumbs li + li::before { content: "/"; color: var(--border); }
.a-crumbs a { color: var(--muted); font-weight: var(--wt-medium); display: inline-block; padding-block: 11px; }
.a-crumbs a:hover { color: var(--text); }
.a-crumbs [aria-current] { color: var(--text); font-weight: var(--wt-medium); }
.a-hero h1 { max-width: 16ch; }

/* the load chip: how much at this age, set once above the table */
.a-load { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin: 0 0 var(--s6); padding: var(--s3) var(--s5); border-radius: var(--radius-control); background: var(--tile); font-weight: var(--wt-medium); max-width: none; }
.a-load span { font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); }

/* full chore table */
.a-table { max-width: none; margin-bottom: 0; }
.a-table table { font-size: var(--t-small); }
.a-table th, .a-table td { padding: var(--s4) var(--s5) var(--s4) 0; line-height: 1.45; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.a-table thead th { border-bottom-color: var(--border); color: var(--muted); font-weight: var(--wt-strong); font-size: var(--t-meta); }
.a-table tbody th { font-weight: var(--wt-strong); width: 15rem; }
.a-table td:last-child { padding-right: 0; color: var(--muted); }
.a-table tbody tr:last-child > * { border-bottom: 0; }
.a-table td:nth-child(2) { white-space: nowrap; }
.a-since { display: block; margin-top: var(--s1); font-size: var(--t-meta); font-weight: var(--wt-medium); color: var(--muted); }
.a-pts { display: inline-block; padding: var(--s1) var(--s3); border-radius: var(--radius-pill); background: var(--tile); font-size: var(--t-meta); font-weight: var(--wt-medium); white-space: nowrap; }
.a-pts.a-medium { background: var(--hairline); }
.a-pts.a-big { background: var(--text); color: var(--on-primary); }

/* phones: each row becomes a flat block, labels from data-l */
@media (max-width: 39.99rem) {
  .a-table { overflow: visible; }
  .a-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .a-table table, .a-table tbody, .a-table tr, .a-table th, .a-table td { display: block; width: auto; }
  .a-table tr { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
  .a-table tbody tr:last-child { border-bottom: 0; }
  .a-table th, .a-table td { border: 0; padding: 0; }
  .a-table tbody th { width: auto; font-size: var(--t-body); margin-bottom: var(--s2); }
  .a-table td:nth-child(2), .a-table td:nth-child(3) { display: inline-block; margin: 0 var(--s3) var(--s2) 0; color: var(--text); }
  .a-table td:last-child { color: var(--muted); }
}

/* development notes: round dots, a bold lead-in, sources linked inline */
.a-dev { margin: 0 0 var(--s6); max-width: var(--w-prose); }
.a-dev li { line-height: 1.5; }
.a-dev li + li { margin-top: var(--s4); }
.a-dev b { font-weight: var(--wt-strong); }
.a-note { max-width: var(--w-prose); padding: var(--s4) var(--s5); border-radius: var(--radius-control); background: var(--tile); color: var(--muted); font-size: var(--t-small); line-height: 1.5; }

/* printable chart and ebook, side by side */
.a-pair { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin-top: var(--s8); }
@media (min-width: 52rem) { .a-pair { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.a-card { background: var(--tile); border-radius: var(--radius-card); padding: var(--s6); display: grid; grid-template-columns: 112px 1fr; gap: var(--s5); align-items: start; }
@media (min-width: 40rem) { .a-card { grid-template-columns: 160px 1fr; padding: var(--s8); gap: var(--s6); } }
.a-thumb { display: block; line-height: 0; border-radius: var(--radius-nested); overflow: hidden; box-shadow: 0 18px 30px -18px rgba(29, 29, 31, .35); transition: transform .35s var(--ease); }
.a-thumb img { display: block; width: 100%; height: auto; }
.a-card:hover .a-thumb { transform: translateY(-4px) rotate(-1.5deg); }
.a-card-copy { min-width: 0; }
.a-card h3 { margin: var(--s2) 0 var(--s2); }
.a-card p { color: var(--muted); font-size: var(--t-small); line-height: 1.5; margin: 0 0 var(--s5); }
.a-tag { font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); }
.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); margin: var(--s3) 0 0 !important; font-size: var(--t-meta) !important; }
.a-meta a { display: inline-block; padding-block: 11px; font-weight: var(--wt-medium); }
@media (max-width: 39.99rem) { .a-card { grid-template-columns: 1fr; gap: var(--s4); } .a-thumb { width: 120px; } }

/* related links under the FAQ, and the source list */
.a-more-h { font-size: var(--t-body); margin: var(--s12) 0 0; }
.faq .center-link.more-links { margin-top: var(--s4); }
.a-src { max-width: var(--w-prose); padding-left: 1.25rem; color: var(--muted); font-size: var(--t-small); }
.a-src li + li { margin-top: var(--s2); }
.a-src a { font-weight: var(--wt-medium); }

@media (prefers-reduced-motion: reduce) { .a-thumb { transition: none; } }