/* Printable chore charts (/carta-tugasan/, /en/chore-chart/). Loads after site.css, seasons.css and
   answers.css and reuses their tiles (s-hero, s-weeks, s-feature, s-split, s-shot). Adds the fanned
   stack of chart previews, the four download cards and the parts list. Tokens only. */

/* hero: four real chart previews fanned on a grey stage ------------------------------------------ */
.p-fan { position: relative; margin: 0 auto; width: min(100%, 480px); aspect-ratio: 1 / 1; background: var(--tile); border-radius: var(--radius-card); overflow: hidden; }
/* the 4 to 6 chart (the picture one) sits in front; the older ages fan out behind it */
.p-fan picture { position: absolute; top: 12%; width: 44%; transition: transform .5s var(--ease); }
.p-fan img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgba(29, 29, 31, .08), 0 24px 40px -20px rgba(29, 29, 31, .35); }
.p-fan .f1 { left: 28%; top: 16%; z-index: 4; transform: rotate(-3deg); }
.p-fan .f2 { left: 46%; top: 10%; z-index: 3; transform: rotate(8deg); }
.p-fan .f3 { left: 8%; top: 12%; z-index: 2; transform: rotate(-14deg); }
.p-fan .f4 { left: 56%; top: 20%; z-index: 1; transform: rotate(18deg); }
.p-fan:hover .f1 { transform: rotate(0deg) translateY(-8px); }
.p-fan:hover .f3 { transform: rotate(-17deg) translateX(-6px); }
.p-fan:hover .f4 { transform: rotate(21deg) translateX(6px); }
.p-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); margin-top: var(--s8); }
.p-hero-cta .note { margin: 0; color: var(--muted); font-size: var(--t-small); }

/* four download cards: preview, age, what is inside, one download button; rows always full -------- */
.p-cards { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .p-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 72rem) { .p-cards { grid-template-columns: repeat(4, 1fr); } }
.p-cards > li { margin: 0; background: var(--tile); border-radius: var(--radius-card); padding: var(--s6); display: flex; flex-direction: column; min-width: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.p-cards > li:hover { transform: translateY(-4px); box-shadow: var(--s-lift); }
.p-thumb { display: block; margin: 0 0 var(--s6); padding: var(--s5) var(--s5) 0; background: var(--bg); border-radius: var(--radius-nested); overflow: hidden; aspect-ratio: 4 / 3.4; }
.p-thumb img { display: block; width: 100%; height: auto; border-radius: 4px 4px 0 0; box-shadow: 0 1px 3px rgba(29, 29, 31, .1), 0 18px 30px -18px rgba(29, 29, 31, .3); transition: transform .5s var(--ease); }
.p-cards > li:hover .p-thumb img { transform: translateY(-6px); }
.p-age { display: block; font-size: var(--t-meta); font-weight: var(--wt-strong); color: var(--muted); margin-bottom: var(--s2); }
.p-cards h3 { font-size: var(--t-h3); line-height: 1.22; margin: 0 0 var(--s4); }
.p-dots { list-style: none; padding: 0; margin: 0 0 var(--s6); max-width: none; }
.p-dots li { position: relative; margin: 0 0 var(--s2); padding-left: var(--s5); font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.p-dots li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.p-get { margin-top: auto; }
.p-get .btn { width: 100%; justify-content: center; }
.p-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin: var(--s3) 0 0; font-size: var(--t-meta); color: var(--muted); }
.p-meta a { font-weight: var(--wt-medium); }

/* what is on every chart: numbered parts beside a large preview ---------------------------------- */
.p-sheet { margin: 0; justify-self: center; width: min(100%, 380px); }
.p-sheet img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 1px 3px rgba(29, 29, 31, .08), 0 30px 50px -26px rgba(29, 29, 31, .4); transform: rotate(-2deg); transition: transform .5s var(--ease); }
.s-feature:hover .p-sheet img { transform: rotate(0deg) translateY(-6px); }
.p-parts { list-style: none; padding: 0; margin: var(--s6) 0 0; max-width: none; counter-reset: part; }
.p-parts li { counter-increment: part; display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); align-items: baseline; margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--border); }
.p-parts li::before { content: counter(part); font-weight: var(--wt-strong); color: var(--text); }
.p-parts b { display: block; font-weight: var(--wt-strong); color: var(--text); }
.p-parts span { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--t-small); }

/* paper or app: two short lists side by side inside the split copy ------------------------------- */
.p-when { display: grid; gap: var(--s6) var(--s8); grid-template-columns: 1fr; margin: var(--s8) 0 0; }
@media (min-width: 46rem) { .p-when { grid-template-columns: repeat(2, 1fr); } }
.p-when > div { padding-top: var(--s4); border-top: 1px solid var(--border); min-width: 0; }
.p-when h3 { font-size: var(--t-body); line-height: 1.35; margin: 0 0 var(--s3); }
.p-when .p-dots { margin: 0; }
.p-when .p-dots li { font-size: var(--t-body); line-height: 1.5; }

@media (max-width: 39.99rem) {
  .p-cards > li { padding: var(--s5); }
  .p-thumb { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .p-fan picture, .p-cards > li, .p-thumb img, .p-sheet img { transition: none; }
}