/* Shared actions, pagination and section headings for the public site and management.
   Both stylesheets define the tokens used here (--red-fill, --button-hover, --line, --wash, --field, --radius, --mustard). */
button,.button,.primary-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 16px;border:1px solid var(--red-fill);border-radius:var(--radius);background:var(--red-fill);color:#fff;font:18px/1.1 'Bebas Neue',Impact,sans-serif;letter-spacing:.04em;text-decoration:none;cursor:pointer;vertical-align:middle}
button:hover:not(:disabled),.button:hover,.primary-action:hover{background:var(--button-hover);border-color:var(--button-hover);color:#fff;text-decoration:none}
button.secondary,.button.secondary{background:transparent;border-color:var(--line);color:var(--paper)}
button.secondary:hover:not(:disabled),.button.secondary:hover{background:var(--wash);border-color:var(--wash-line);color:var(--paper)}
button:disabled{opacity:.45;cursor:default}
/* Button-styled links inside prose. `.prose a` and `.prose p a` (underline, mustard) are more specific than the
   button roles above, so restate the button colour, hover and no-underline state at prose specificity. */
.prose a:is(.button,.primary-action),.prose a:is(.button,.primary-action):hover,.prose a:is(.button,.primary-action):focus-visible{text-decoration:none}
.prose a:is(.button,.primary-action):not(.secondary),.prose a:is(.button,.primary-action):not(.secondary):hover{color:#fff}
.prose a:is(.button,.primary-action):not(.secondary):hover{background:var(--button-hover);border-color:var(--button-hover)}
.prose a.button.secondary,.prose a.button.secondary:hover{color:var(--paper)}
/* Small size: track rows, secondary actions in cards, and every management button. */
button.small,.button.small{min-height:32px;padding:4px 12px;font-size:16px}

/* One focus ring everywhere. */
:focus-visible{outline:2px solid var(--mustard);outline-offset:3px}

/* Pagination: one control for the public lists and management. */
.list-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:24px 0 12px}
.list-pagination[hidden]{display:none}
.list-pagination button{min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--paper);font:15px/1.4 'Josefin Sans',sans-serif;letter-spacing:normal}
.list-pagination button:hover:not(:disabled){background:var(--wash);border-color:var(--wash-line);color:var(--paper)}
.list-pagination button[aria-current=page],.list-pagination button[aria-current=page]:hover:not(:disabled){background:var(--wash);border-color:var(--mustard);color:var(--paper)}
.list-pagination button:disabled{opacity:.4}
.list-pagination .pagination-summary{margin-left:8px;color:var(--stone);font-size:13px}
.list-pagination .pagination-jump[popover]:not(:popover-open){display:none}
.list-pagination .pagination-jump[popover]{position:fixed;inset:auto;display:flex;align-items:end;gap:12px;width:240px;max-width:calc(100vw - 16px);margin:0;padding:16px;border:1px solid var(--line);border-top:3px solid var(--mustard);border-radius:var(--radius);background:var(--panel);color:var(--paper);box-shadow:var(--shadow-pop);z-index:20}
.list-pagination .pagination-jump label{flex:1;margin:0;font:13px/1.4 'Josefin Sans',sans-serif;letter-spacing:normal;color:var(--stone)}
.list-pagination .pagination-jump input{display:block;width:100%;min-width:0;margin-top:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--field);color:var(--paper);font:15px/1.4 'Josefin Sans',sans-serif}

/* Headings. Page titles carry a wash band that bleeds past the content column; column headings
   keep a contained wash; headings inside boxes are plain. Colours come from --band-fill and
   --band-line in theme.css, so each tier is declared once. */
main h1,main h2,.home-page h2.section-title{position:relative;background:none;color:var(--paper);border:0;border-bottom:1px solid var(--band-line);border-radius:0;padding:12px 16px;max-width:100%;overflow-wrap:anywhere;
  /* Border-image outsets paint beyond the column without creating horizontal scrolling. */
  border-image:linear-gradient(90deg,var(--band-fill) 100vw,transparent 175vw) fill 0 / 0 / 0 100vw}
main h1::before,main h2::before,.home-page h2.section-title::before,.person-profile-header::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--band-line);box-shadow:0 0 0 100vw var(--band-line);pointer-events:none;clip-path:inset(0 -100vw)}
@media(max-width:600px){main h1,main h2,.home-page h2.section-title{padding:10px 12px}}

/* Column headings must not paint over neighbouring content. */
main :is(.release-layout,.gig-layout,.song-layout,.post-reading-layout,.home-feeds) h2{border-image:none;background:linear-gradient(110deg,var(--band-fill),transparent 75%)}

/* Plain headings: the homepage hero and profile header already carry their own band, and
   forms, cards and boxed notices must never have a band painted across them. */
.home-page .welcome h1,.person-profile-header h1,main :is(form,fieldset,dialog,[class*="card"],.privacy-analytics) :is(h1,h2){border-image:none;background:none;border:0;padding:0}
main :is(form,fieldset,dialog,[class*="card"],.privacy-analytics) :is(h1,h2){margin-top:0}
main :is(.release-layout,.gig-layout,.song-layout,.post-reading-layout,.home-feeds) h2::before,.home-page .welcome h1::before,.person-profile-header h1::before,main :is(form,fieldset,dialog,[class*="card"],.privacy-analytics) :is(h1,h2)::before{content:none}
.post-title-line h1{min-width:0}

/* Profile bands wrap the whole identity block, never cut through its portrait. */
.person-profile-header{border-image:linear-gradient(90deg,var(--band-fill) 100vw,transparent 175vw) fill 0 / 0 / 0 100vw;border-bottom:1px solid var(--band-line)}
.person-profile-header h1{max-width:100%}