/* Potato Points (points.html, js/points.js), 2026-10-06 rework on the design system (docs/design-system.md): tokens,
.card, .pill, .stat, .seg, .disclosure, .check, .skeleton and the page mark come from styles.css; this file only
composes them. Order on the page: header with the programme's state → one leading panel (Connect X, or your
dashboard) → tasks → campaign on X → your invites → rewards → leaderboard → how it works.
Motion is feedback only (press, expand, progress, one success moment via PotatchiUI.celebrate, rank changes that
glide); no loops, no shimmer. Reduced motion: nothing moves, nothing is lost. Loaded after styles.css, before
points-season.css (the Season 1 blocks). */
.points {
display: flex;
flex-direction: column;
gap: clamp(36px, 6vw, 56px);
max-width: 1080px;
margin: 0 auto;
padding: clamp(16px, 3.5vw, 40px) max(var(--gutter), env(safe-area-inset-right)) clamp(56px, 9vw, 96px) max(var(--gutter), env(safe-area-inset-left));
}
.points > * { min-width: 0; }
.points h2 { font-size: var(--step-2); line-height: 1.15; }
.points h3 { font-size: var(--text-lg); line-height: 1.25; }
.points h1, .points h2, .points h3, .points p { text-wrap: pretty; }
.points a:not(.btn) { color: var(--ink); text-underline-offset: 3px; text-decoration-color: rgba(51, 37, 22, .35); }
.points a:not(.btn):hover { text-decoration-color: currentColor; }
.pts-muted { color: var(--ink-2); }
.pts-small { font-size: var(--text-sm); line-height: 1.5; }
.pts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.points .btn { min-height: 44px; } /* every touch target ≥ 44 px, small sizes included */
.points .btn--tiny { min-height: 44px; padding: 8px 16px; font-size: var(--text-sm); }
.points .icon { flex: none; }
.pts-label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.pts-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.pts-section-head__note { font-size: var(--text-sm); color: var(--ink-3); }
.pts-section-head + * { margin-top: var(--space-4); }
/* ------------------------------------------------------------------ header -- */
/* one column: page mark + title, the line under it, the programme's state (styles.css → page header) */
.points .page-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "meta"; row-gap: 12px; }
.pts-head__title { display: flex; align-items: center; gap: clamp(12px, 2vw, 18px); }
.pts-head__title .page-mark { width: clamp(46px, 5vw, 56px); height: clamp(46px, 5vw, 56px); border-radius: clamp(14px, 1.6vw, 18px); }
/* the line under the title changes with what is switched on: one line of room on wide screens, two on phones */
.points .page-head__lede { max-width: 44em; }
@media (min-width: 900px) { .points .page-head__lede { min-height: 1.32em; } }
/* the state: a pill and one sentence, flowing as text (two lines of room on phones, one on wide screens) */
.pts-program { display: block; min-height: 1.9em; font-size: var(--text-sm); line-height: 1.9; color: var(--ink-2); }
/* the pill sits inside the first line's box (never taller than it), so the row is exactly one or two lines high */
.pts-program .pill { display: inline-flex; min-height: 0; height: 1.75em; margin-right: 8px; padding-block: 0; vertical-align: top; margin-top: .075em; line-height: 1; }
.pts-program .pill .icon { width: 14px; height: 14px; }
@media (max-width: 899px) { .pts-program { min-height: calc(2 * 1.9em); } }
/* the header sits a little closer to the panel it introduces */
.points > .page-head { margin-bottom: calc(-1 * clamp(8px, 2vw, 20px)); }
/* development preview (a dev Worker only; never in the production HTML: points.js adds it) */
.pts-devnote { padding: 10px 14px; border-radius: var(--radius-md); border: 1.5px dashed var(--gold); background: repeating-linear-gradient(45deg, rgba(217, 160, 82, .09) 0 10px, transparent 10px 20px); font-size: var(--text-sm); }
/* messages about what just happened (back from X, an invite link, a failed action) */
.pts-banner { padding: 12px 16px; border-radius: var(--radius-md); background: var(--info-bg); border: 1px solid var(--info-line); color: var(--ink); font-size: 1rem; line-height: 1.5; }
.pts-banner--ok { background: var(--ok-bg); border-color: var(--ok-line); }
.pts-banner--error { background: var(--bad-bg); border-color: var(--bad-line); }
.pts-banner--choose { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pts-confirm__av { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--gold); }
.pts-confirm__text { flex: 1 1 14em; min-width: 0; }
/* ------------------------------------------------------------ anti-shift -- */
/* Until Points first answers, nothing under the panel shows: the blocks below appear together with the answer, so
nothing the visitor already sees moves (a dashboard is taller than the loading panel, and the campaign, rewards
and invites exist only in the answer). The margin keeps the footer below the fold meanwhile. With a message due
at the top (back from X, an invite link: html.pts-hold, set in the page's head), the panel waits for it too.
No answer within 8 seconds (.is-slow): everything shows in its "Checking" state. */
.js .points:not([data-profile]):not(.is-slow) #pts-panel ~ * { display: none; }
.js .points:not([data-profile]):not(.is-slow) #pts-panel { margin-bottom: 100vh; }
.js.pts-hold .points:not([data-profile]):not(.is-slow) #pts-banner,
.js.pts-hold .points:not([data-profile]):not(.is-slow) #pts-panel { visibility: hidden; }
/* without scripts there is nothing to check or list: say so (the