/* TrackBounty public website - M5a bounties family sheet (spec v4 section 4.4; map v4.1 amendment A1). */
/* Bounties: /bounties and /bounties/<tenant> (spec v4 §4.4) */
.tbp-bounties-head { padding: 56px 0 0; }
@media (min-width: 1024px) { .tbp-bounties-head { padding-top: 80px; } }
.tbp-bounties-copy { display: grid; justify-items: start; gap: 18px; }
.tbp-bounties-copy h1 { max-width: 16ch; overflow-wrap: anywhere; }
/* The tenant head: copy left, the badge or the join action right (>= 768), stacked below. */
.tbp-bounties-tenant { display: grid; gap: 24px; }
@media (min-width: 768px) { .tbp-bounties-tenant { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; } }
.tbp-bounties-side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tbp-bounties-side .tbp-pill { padding: 8px 12px; font-size: 12px; }
.tbp-bounties-stats { padding: 40px 0 0; }
.tbp-bounties-list { padding: 56px 0 96px; }
@media (max-width: 767px) { .tbp-bounties-list { padding: 44px 0 72px; } }
/* Signed in: the search field and the filter chips (44 px chips that wrap);
   hidden with scripting off, where neither could act on the list. */
.tbp-bounties-controls { display: grid; gap: 16px; margin-bottom: 32px; }
.tbp-bounties-controls .tbp-field { max-width: 560px; }
.tbp-bounties-filters { margin-top: 0; }
.tbp-bounties-filters button { min-height: 44px; padding: 0 16px; }
html:not(.js) .tbp-bounties-controls { display: none; }
.tbp-bounties-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .tbp-bounties-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Honest states: the anonymous count sentence; the status boxes. */
.tbp-bounties-empty { display: grid; justify-items: start; gap: 18px; max-width: 64ch; }
.tbp-bounties-empty .tbp-ctas { margin-top: 6px; }
.tbp-bounties-list .tbp-status { max-width: 64ch; }
.tbp-bounties-noresults { margin-top: 20px; }
.tbp-bounties-noresults[hidden] { display: none; }

/* --- The card ------------------------------------------------------------- */
.tbp-bounty-card { position: relative; display: block; overflow: hidden; border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-paper); transition: border-color 150ms var(--tb-ease); }
.tbp-bounty-card:hover { border-color: var(--tb-ink); }
/* The client's brand colour appears here and nowhere else: a 3 px rule, no wash. */
.tbp-bounty-rule { display: block; height: 3px; background: var(--tb-ink); }
.tbp-bounty-body { display: grid; gap: 14px; padding: 18px 20px 16px; }
.tbp-bounty-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tbp-bounty-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.tbp-bounty-id { min-width: 0; }
.tbp-bounty-title { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* 24 px target on the anchor's own box (WCAG 2.5.8): the padding makes the target, the equal negative margin keeps the line box. */
.tbp a.tbp-bounty-link { display: inline-block; min-width: 24px; margin: -3px 0; padding: 3px 0; text-decoration: none; }
.tbp-bounty-card:hover a.tbp-bounty-link { text-decoration: underline; text-underline-offset: 3px; }
/* One anchor, named by the title, stretched over the card; the ring draws on the card where :has() exists. */
.tbp-bounty-link::after { content: ''; position: absolute; inset: 0; }
.tbp-bounty-card:has(.tbp-bounty-link:focus-visible) { outline: 3px solid var(--tb-ink); outline-offset: 3px; }
.tbp-bounty-card:has(.tbp-bounty-link:focus-visible) .tbp-bounty-link { outline: 0; }
.tbp-bounty-artist { margin-top: 4px; color: var(--tb-ink-2); font-size: 15px; overflow-wrap: anywhere; }
.tbp-bounty-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--tb-ink-3); font-size: 14px; }
.tbp-bounty-note { margin-top: 2px; color: var(--tb-ink-3); font-size: 13px; }
.tbp-bounty-rate { display: grid; gap: 3px; min-width: 84px; padding-top: 8px; border-top: 2px solid var(--tb-bolt); }
.tbp-bounty-rate b { color: var(--tb-ink); font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbp-bounty-rate span { color: var(--tb-ink-3); font-size: 10px; }
.tbp-bounty-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tbp-bounty-tags span { padding: 5px 10px; border: 1px solid var(--tb-line-2); border-radius: 999px; color: var(--tb-ink-2); font-size: 13px; line-height: 1; }
.tbp-bounty-foot { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-top: 12px; border-top: 1px solid var(--tb-line); color: var(--tb-ink-3); font-size: 13px; }
/* The entrance (the old cardFadeIn), only when motion is welcome. */
@keyframes tbp-bounty-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.js.motion-ok .tbp-bounty-card { animation: tbp-bounty-in 400ms var(--tb-ease) both; }
html.js.motion-ok .tbp-bounty-card:nth-child(2) { animation-delay: 50ms; }
html.js.motion-ok .tbp-bounty-card:nth-child(3) { animation-delay: 100ms; }
html.js.motion-ok .tbp-bounty-card:nth-child(4) { animation-delay: 150ms; }
html.js.motion-ok .tbp-bounty-card:nth-child(5) { animation-delay: 200ms; }
html.js.motion-ok .tbp-bounty-card:nth-child(6) { animation-delay: 250ms; }
html.js.motion-ok .tbp-bounty-card:nth-child(n+7) { animation-delay: 300ms; }

/* --- Hall of Fame: three tiles in rank order ------------------------------ */
.tbp-bounties-hof-sec { padding: 0 0 112px; }
@media (max-width: 767px) { .tbp-bounties-hof-sec { padding-bottom: 72px; } }
.tbp-bounties-hof-head { display: grid; gap: 10px; margin-bottom: 32px; }
.tbp-bounties-hof { display: grid; gap: 24px; padding: 0; list-style: none; }
@media (min-width: 768px) { .tbp-bounties-hof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.tbp-bounties-hof-card { position: relative; display: grid; align-content: start; gap: 4px; padding-top: 16px; border-top: 2px solid var(--tb-ink); }
.tbp-bounties-hof-card:first-child { border-top-color: var(--tb-bolt); }
.tbp-bounties-hof-rank { color: var(--tb-ink); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tbp-bounties-hof-views { margin-top: 8px; color: var(--tb-ink); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tbp-bounties-hof-lbl { color: var(--tb-ink-3); font-size: 13px; }
.tbp-bounties-hof-name { margin-top: 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tbp a.tbp-bounties-hof-link { display: inline-block; min-width: 24px; margin: -3px 0; padding: 3px 0; text-decoration: none; }
.tbp-bounties-hof-card:hover a.tbp-bounties-hof-link { text-decoration: underline; text-underline-offset: 3px; }
.tbp-bounties-hof-link::after { content: ''; position: absolute; inset: 0; }
.tbp-bounties-hof-card:has(.tbp-bounties-hof-link:focus-visible) { outline: 3px solid var(--tb-ink); outline-offset: 3px; }
.tbp-bounties-hof-card:has(.tbp-bounties-hof-link:focus-visible) .tbp-bounties-hof-link { outline: 0; }
.tbp-bounties-hof-meta { color: var(--tb-ink-2); font-size: 15px; overflow-wrap: anywhere; }
.tbp-bounties-hof-creators { color: var(--tb-ink-3); font-size: 14px; }
.tbp-bounties-hof-card .tbp-pill { justify-self: start; margin-top: 8px; }

/* --- The creator entry point (public-bounties-page-upgrade-v1): hero, preview, strip, guide, FAQ, band.
   Prefix tbpb-; every rule is this page's own, the shared tbp-* components are reused, never redefined. --- */
.tbpb-hero { padding-bottom: 32px; }
@media (min-width: 1024px) { .tbpb-hero { padding-bottom: 56px; } .tbpb-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; gap: 56px; } }
.tbpb-hero h1 { max-width: 11ch; }
.tbpb-hero .tbp-avail b { color: var(--tb-ink); }
.tbpb-alt { display: flex; flex-wrap: wrap; gap: 8px 10px; color: var(--tb-ink-3); font-size: 15px; }
.tbp a.tbpb-alt-link, .tbpb-alt a { display: inline-block; margin: -3px 0; padding: 3px 0; color: var(--tb-ink); }
.tbpb-pv-col { min-width: 0; }
.tbpb-pv-col .tbp-cap { margin-top: 14px; }
/* The frame's content: a small, dense screen like the homepage demo. */
.tbpb-demo { display: grid; align-content: start; gap: 12px; padding: 14px; color: var(--tb-ink-2); font: 500 13px/1.4 var(--font-sans); }
.tbpb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbpb-top img { width: auto; height: 18px; }
.tbpb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tbpb-tabs button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 6px 4px; border: 1.5px solid var(--tb-line-2); border-radius: 10px; background: #fff; color: var(--tb-ink-2); font: 700 12px/1.15 var(--font-sans); text-align: center; cursor: pointer; transition: border-color 150ms var(--tb-ease), color 150ms var(--tb-ease); }
@media (min-width: 480px) { .tbpb-tabs button { flex-direction: row; gap: 6px; font-size: 12.5px; } }
.tbpb-tabs button b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tb-ink); color: #fff; font-size: 11px; }
.tbpb-tabs button:hover, .tbpb-tabs button[aria-selected="true"] { border-color: var(--tb-ink); color: var(--tb-ink); }
.tbpb-tabs button[aria-selected="true"] b { background: var(--tb-bolt); color: var(--tb-ink); }
/* Without the script: no tab row, no Next buttons, every step shown in order. With it: one pane at a time. */
html:not(.js) .tbpb-tabs { display: none; }
html:not(.js) .tbpb-demo [data-tbpb-next] { display: none; }
html.js .tbpb-pane:not(.is-on) { display: none; }
.tbpb-pane { display: grid; gap: 12px; }
.tbpb-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--tb-ink); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.tbpb-step b { color: var(--tb-ink-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tbpb-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--tb-line); border-radius: 10px; }
.tbpb-card-top { display: flex; flex-wrap: wrap; gap: 6px; }
.tbpb-card-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.tbpb-card-title { display: block; color: var(--tb-ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.tbpb-card-sub { display: block; margin-top: 3px; color: var(--tb-ink-3); font-size: 12px; }
.tbpb-rate { display: grid; gap: 2px; min-width: 72px; padding-top: 6px; border-top: 2px solid var(--tb-bolt); }
.tbpb-rate b { color: var(--tb-ink); font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbpb-rate span { color: var(--tb-ink-3); font-size: 10px; }
.tbpb-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 8px; border-top: 1px solid var(--tb-line); }
.tbpb-terms div { display: grid; gap: 1px; }
.tbpb-terms dt { color: var(--tb-ink-3); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.tbpb-terms dd { margin: 0; color: var(--tb-ink); font-size: 12.5px; font-weight: 600; }
.tbpb-note { color: var(--tb-ink-2); font-size: 12.5px; }
.tbpb-form { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--tb-line); border-radius: 10px; }
.tbpb-lbl { color: var(--tb-ink); font-size: 12px; font-weight: 700; }
.tbpb-input { display: block; padding: 9px 10px; border: 1.5px solid var(--tb-line-2); border-radius: 8px; color: var(--tb-ink-3); font-size: 12.5px; }
.tbpb-form .tbp-pv { justify-self: start; }
.tbpb-states { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tbpb-states li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; }
.tbpb-states .tbp-pill { margin-top: 1px; }
.tbpb-demo .tbp-tile b { font-size: 17px; }
.tbpb-demo .tbp-dact { display: flex; flex-wrap: wrap; gap: 8px; }
/* The sections: a compact strip under the hero, the guide and the FAQ on the shared split grid. */
.tbpb-stats-sec { padding: 8px 0 0; }
.tbpb-stats .tbp-stat-num { font-size: 44px; }
.tbpb-stats .tbp-stats { gap: 28px; }
.tbpb-sec-head { display: grid; gap: 8px; margin-bottom: 28px; }
/* The sections below the first screen are laid out when they approach it, not in the first frame (slow-4G LCP). */
.tbpb-how, .tbpb-faq, .tbp-band.tbpb-s { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.tbpb-how .tbp-steps { margin-top: 0; }
.tbpb-faq .tbp-a a, .tbpb-faq-lede a { color: var(--tb-ink); }
.tbpb-faq-lede a { display: inline-block; margin: -3px 0; padding: 3px 0; }
/* Motion: the section reveal (sections below the first screen, once) and the card lift, only when motion is
   welcome; the reveal lives in a keyframe so nothing is transparent without it. */
@keyframes tbpb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.js.motion-ok .tbpb-reveal { animation: tbpb-in 480ms var(--tb-ease) both paused; }
html.js.motion-ok .tbpb-reveal.is-in { animation-play-state: running; }
/* The lift uses the individual translate property: the entrance animation above keeps its final transform (fill both), so a
   transform on hover could never apply; translate is a separate property and composes with it. */
html.js.motion-ok .tbp-bounty-card { transition: border-color 150ms var(--tb-ease), translate 200ms var(--tb-ease); }
html.js.motion-ok .tbp-bounty-card:hover { translate: 0 -2px; }