/* Help centre (/bantuan/, /en/help/ and their articles). Loads after site.css and seasons.css and
   reuses their hero, stage, head, split and facts. Only adds the breadcrumb, the in-page chips, the
   numbered step list, the article cards on the hub, the tip line, the role table and the ebook box.
   Tokens only; written by scripts/build-help.mjs with the pages. */

/* breadcrumb: one quiet line above the h1 */
.h-crumbs ol { list-style: none; padding: 0; margin: 0 0 var(--s5); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: var(--t-meta); color: var(--muted); max-width: none; }
.h-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); }
.h-crumbs li + li::before { content: "/"; color: var(--border); }
.h-crumbs a { color: var(--muted); }
.h-meta { margin: var(--s5) 0 0; font-size: var(--t-meta); color: var(--muted); }

/* in this article: chips that jump to each question */
.h-toc { list-style: none; padding: 0; margin: var(--s8) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); max-width: none; }
.h-toc li { margin: 0; }
.h-toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border-radius: var(--radius-pill); background: var(--tile); color: var(--text); font-size: var(--t-small); font-weight: var(--wt-medium); text-decoration: none; transition: background .18s var(--ease); }
.h-toc a:hover { background: var(--hairline); text-decoration: none; }

/* stage art that is not a phone: the TV still, the clay lock */
.h-stage-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--s8); }
.h-stage-art img { display: block; width: 100%; height: auto; border-radius: var(--radius-nested); }
.h-stage-clay img { width: 62%; border-radius: 0; }
.s-stage.h-stage-tv { aspect-ratio: 16 / 11; }

/* numbered steps: a counter disc, the step at body size */
.h-steps { list-style: none; padding: 0; margin: 0; counter-reset: h-step; max-width: var(--w-prose); }
.h-steps > li { counter-increment: h-step; position: relative; margin: 0; padding: var(--s5) 0 var(--s5) var(--s12); border-top: 1px solid var(--hairline); }
.h-steps > li:last-child { border-bottom: 1px solid var(--hairline); }
.h-steps > li::before { content: counter(h-step); position: absolute; left: 0; top: var(--s5); width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--tile); display: flex; align-items: center; justify-content: center; font-size: var(--t-small); font-weight: var(--wt-strong); color: var(--text); }
.h-steps p { margin: 0; line-height: 1.55; }
.h-steps ul { margin: var(--s2) 0 0; padding-left: 1.1rem; color: var(--muted); }
.h-steps ul b { color: var(--text); }

/* a short note under a list: muted, one idea */
.h-tip { margin: var(--s6) 0 0; padding: var(--s4) var(--s5); max-width: var(--w-prose); background: var(--tile); border-radius: var(--radius-control); font-size: var(--t-small); line-height: 1.55; color: var(--text); }
.h-sec > p { max-width: var(--w-prose); }
.h-sec h2, .h-group h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.h-sec .s-head { margin-bottom: var(--s8); }

/* plain two column table (roles, sizes, platforms) */
.h-table { width: 100%; max-width: var(--w-prose); border-collapse: collapse; margin: var(--s6) 0 0; font-size: var(--t-small); }
.h-table th, .h-table td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-top: 1px solid var(--hairline); line-height: 1.5; }
.h-table thead th { border-top: 0; color: var(--muted); font-weight: var(--wt-strong); font-size: var(--t-meta); }
.h-table tbody th { font-weight: var(--wt-strong); white-space: nowrap; }
.h-table tr:last-child > * { border-bottom: 1px solid var(--hairline); }
@media (max-width: 39.99rem) { .h-table tbody th { white-space: normal; } }

/* hub: article cards inside each question */
.h-cards { list-style: none; padding: 0; margin: var(--s8) 0 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; max-width: none; }
@media (min-width: 46rem) { .h-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.h-cards li { margin: 0; }
.h-cards a { display: grid; grid-template-columns: 72px 1fr; gap: var(--s2) var(--s5); align-items: center; height: 100%; padding: var(--s6); background: var(--tile); border-radius: var(--radius-card); color: var(--text); text-decoration: none; transition: transform .35s var(--ease), background .2s var(--ease); }
.h-cards a:hover { transform: translateY(-3px); text-decoration: none; }
.h-cards picture { grid-row: 1 / span 2; line-height: 0; }
.h-cards img { width: 72px; height: 72px; object-fit: contain; }
.h-cards b { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; font-weight: var(--wt-strong); }
.h-cards span { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }
@media (max-width: 39.99rem) { .h-cards a { grid-template-columns: 56px 1fr; padding: var(--s5); } .h-cards img { width: 56px; height: 56px; } }
.h-group + .h-group { border-top: 1px solid var(--hairline); }

/* free ebook box: cover beside one line and a link */
.h-ebook { display: grid; grid-template-columns: 96px 1fr; gap: var(--s6); align-items: center; max-width: 44rem; padding: var(--s6); background: var(--tile); border-radius: var(--radius-card); }
.h-ebook img { display: block; width: 96px; height: auto; border-radius: var(--radius-nested); box-shadow: var(--shadow-shot); }
.h-ebook p { margin: 0; font-size: var(--t-small); color: var(--muted); }
.h-ebook b { display: block; color: var(--text); font-size: var(--t-body); margin-bottom: var(--s1); }
.h-ebook a { font-weight: var(--wt-medium); }
@media (max-width: 30rem) { .h-ebook { grid-template-columns: 72px 1fr; gap: var(--s4); padding: var(--s5); } .h-ebook img { width: 72px; } }

/* more help: plain links in two columns */
.h-more { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 var(--s8); grid-template-columns: 1fr; max-width: none; }
@media (min-width: 46rem) { .h-more { grid-template-columns: repeat(2, 1fr); } }
.h-more li { margin: 0; border-top: 1px solid var(--hairline); }
.h-more a { display: block; padding: var(--s4) 0; font-weight: var(--wt-medium); }

@media (prefers-reduced-motion: reduce) { .h-cards a, .h-toc a { transition: none; } .h-cards a:hover { transform: none; } }