/* Support, supporter board and business pages (dukung.html, pendukung.html, kerjasama*.html).
   Reads the tokens from style.css only: no literal colours, no font-family, 4px spacing scale. */

.sup-page { padding-bottom: var(--s-8); }
.sup-lead { font-size: var(--t-md); max-width: 52ch; }
.sup-h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.sup-note { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); }
.sup-card-flat { box-shadow: none; }

/* personal code */
.sup-code { text-align: center; }
.sup-code .code-big { margin-bottom: var(--s-3); }
.sup-copy { display: none; }
.js .sup-copy { display: inline-flex; }
.sup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.sup-actions-center { justify-content: center; }

/* opt-out toggle */
.sup-toggle { display: flex; align-items: flex-start; gap: var(--s-3); font-weight: var(--w-label); }
.sup-toggle input { flex: none; width: var(--s-6); height: var(--s-6); margin: 0; }
.sup-toggle + .sup-actions { margin-top: var(--s-3); }

/* tier list */
.sup-tiers { margin: 0; display: grid; gap: var(--s-2); }
.sup-tiers div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-2); border-bottom: var(--bw-s) dashed var(--ink-a-35); }
.sup-tiers div:last-child { border-bottom: 0; padding-bottom: 0; }
.sup-tiers dt { font-weight: var(--w-display); }
.sup-tiers dd { margin: 0; font-variant-numeric: tabular-nums; }

/* goal bar */
.sup-goal-line { font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-lg); margin: 0 0 var(--s-3); font-variant-numeric: tabular-nums; }
.sup-bar { height: var(--s-5); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); overflow: hidden; }
.sup-bar > i { display: block; height: 100%; background: var(--leaf-d); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.sup-goal-sub { margin: var(--s-2) 0 var(--s-5); font-size: var(--t-sm); }
.sup-for { margin: var(--s-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.sup-for li { margin: 0; }
.sup-for b { font-weight: var(--w-display); }

/* scope tabs */
.sup-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.sup-tab { display: inline-flex; align-items: center; min-height: var(--s-11); padding: var(--s-2) var(--s-4); font-weight: var(--w-display); color: var(--ink); text-decoration: none; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); }
.sup-tab[aria-current="page"] { background: var(--turmeric); box-shadow: var(--sh-s); }
@media (hover: hover) { .sup-tab:hover { color: var(--ink); background: var(--cream-d); } .sup-tab[aria-current="page"]:hover { background: var(--turmeric); } }

/* board */
.sup-board { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.sup-row { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding: var(--s-3) var(--s-4); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-3); box-shadow: var(--sh-s); }
.sup-rank { flex: none; display: grid; place-items: center; min-width: var(--s-10); height: var(--s-10); padding-inline: var(--s-2); font-family: var(--font-d); font-weight: var(--w-display); background: var(--cream-d); border: var(--bw-s) solid var(--ink); border-radius: var(--r-2); font-variant-numeric: tabular-nums; }
.sup-row-1 .sup-rank { background: var(--turmeric); }
.sup-who { min-width: 0; display: grid; gap: var(--s-1); }
.sup-name { font-weight: var(--w-display); overflow-wrap: anywhere; }
.sup-name a { color: var(--ink); }
.sup-name-anon { color: var(--ink-3); font-weight: var(--w-label); }
.sup-chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.sup-tier-warga_pendukung { background: var(--leaf-soft); }
.sup-tier-juragan_kampung { background: var(--turmeric); }
.sup-tier-sesepuh { background: var(--chili-d); color: var(--on-color); }
.sup-empty { text-align: center; }

/* business page */
.sup-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-3); }
.sup-stat { margin: 0; padding: var(--s-4); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r-3); box-shadow: var(--sh-s); }
.sup-stat dt { font-size: var(--t-sm); font-weight: var(--w-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sup-stat dd { margin: var(--s-1) 0 0; font-family: var(--font-d); font-weight: var(--w-display); font-size: var(--t-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .sup-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sup-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.sup-offers li { display: flex; gap: var(--s-3); margin: 0; }
.sup-offers .ic { margin-top: var(--s-1); width: var(--s-6); height: var(--s-6); }
.sup-offers b { display: block; font-weight: var(--w-display); }
.sup-no { margin: 0; padding-left: 1.2em; }
.sup-no li { margin-bottom: var(--s-1); }

/* form */
.sup-form { display: grid; gap: var(--s-4); }
.sup-field { display: grid; gap: var(--s-1); min-width: 0; }
.sup-label { font-weight: var(--w-label); }
.sup-opt { font-weight: var(--w-body); color: var(--ink-3); }
.sup-input { width: 100%; min-height: 48px; padding: var(--s-3); background: var(--paper); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-2); }
textarea.sup-input { min-height: 160px; resize: vertical; line-height: 1.5; }
.sup-input[aria-invalid="true"] { border-color: var(--chili-d); background: var(--chili-tint); }
.sup-error { margin: 0; font-size: var(--t-sm); font-weight: var(--w-label); color: var(--chili-d); }
.sup-hint { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.sup-check { display: flex; align-items: flex-start; gap: var(--s-3); }
.sup-check input { flex: none; width: var(--s-6); height: var(--s-6); margin: 0; }
.sup-two { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .sup-two { grid-template-columns: 1fr 1fr; } }