/*
 * PK-4407 - Ticket-holder feed (/feed/*) restyle to match the Ember app.
 *
 * Loaded ONLY by FeedBasePage, after pk-feed / pk-dashboard / pk2.
 * Every rule is scoped under .pkfeed (wrapper in FeedBasePage.html) so the
 * purchase flow and dashboards that share pk-feed.css are untouched.
 *
 * Tokens mirror apps/packages/tailwind-config/ds-tokens.css and the Ember
 * typography utilities (ds-body-*, ds-headline-*). Keep names in sync.
 */

/* Page chrome outside the wrapper (.pagewide / body live in PrekindlePage.html) */
body:has(.pkfeed) {
	margin: 0;
	background-color: #f3f3f5; /* gray-100 */
}

body:has(.pkfeed) .pagewide {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
}

.pkfeed {
	--pkf-gray-0: #fff;
	--pkf-gray-50: #f9f9f9;
	--pkf-gray-100: #f3f3f5;
	--pkf-gray-200: #dddde1;
	--pkf-gray-300: #b8b8bc;
	--pkf-gray-400: #717072;
	--pkf-gray-500: #4b4b4f;
	--pkf-gray-600: #15151c;
	--pkf-purple-50: #eeeffb;
	--pkf-purple-200: #bdbdee;
	--pkf-purple-500: #595bd4;
	--pkf-purple-600: #4749aa;
	--pkf-purple-700: #363781;
	--pkf-purple-900: #03030c;
	--pkf-red-50: #ffecf0;
	--pkf-red-500: #e51c4a;
	--pkf-red-600: #cf0b37;
	--pkf-red-700: #b2042b;
	--pkf-success-300: #007661;
	--pkf-success-badge: rgb(39 174 96 / 12%);
	--pkf-warning-100: #fff0d8;
	--pkf-warning-300: #ffb53c;

	--pkf-font: aktiv-grotesk, 'Open Sans', Arial, sans-serif;
	--pkf-font-ext: aktiv-grotesk-extended, aktiv-grotesk, 'Roboto', Arial, sans-serif;

	--pkf-radius: 0.25rem;     /* radius-ds-xxxs */
	--pkf-radius-lg: 1.25rem;  /* Ember dialog */
	--pkf-shadow: 0 4px 20px 0 rgb(3 3 12 / 10%);                               /* shadow-ds-base */
	--pkf-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 6%), 0 2px 4px -2px rgb(0 0 0 / 6%); /* tailwind shadow-md, softened */

	--pkf-sp-xxs: 0.5rem;
	--pkf-sp-xs: 0.75rem;
	--pkf-sp-sm: 1rem;
	--pkf-sp-md: 1.5rem;
	--pkf-sp-lg: 2rem;

	--pkf-max: 1000px;
	--pkf-gutter: 1.5rem;
	/* horizontal padding that centers a full-bleed block's content at --pkf-max */
	--pkf-inset: max(var(--pkf-gutter), calc((100% - var(--pkf-max)) / 2));

	font-family: var(--pkf-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--pkf-gray-600);
	-webkit-font-smoothing: antialiased;
}

.pkfeed p {
	line-height: 1.5;
}

.pkfeed strong,
.pkfeed b {
	font-weight: 600;
}

.pkfeed a:not(.button) {
	color: var(--pkf-purple-600);
}

.pkfeed a:not(.button):hover {
	color: var(--pkf-purple-700);
}

.pkfeed a:focus-visible,
.pkfeed .button:focus-visible {
	outline: 2px solid var(--pkf-purple-600);
	outline-offset: 2px;
}


/* ======= */
/* Buttons */
/* ======= */
.pkfeed .button,
.pkfeed a.button,
.pkfeed input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 0.75rem 0.875rem;
	border: 2px solid var(--pkf-red-500);
	border-radius: var(--pkf-radius);
	background-color: var(--pkf-red-500);
	color: var(--pkf-gray-0);
	font-family: var(--pkf-font);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out;
	-webkit-appearance: none;
}

.pkfeed .button:hover,
.pkfeed a.button:hover {
	background-color: var(--pkf-red-600);
	border-color: var(--pkf-red-600);
	color: var(--pkf-gray-0);
}

.pkfeed .button:active {
	background-color: var(--pkf-red-700);
	border-color: var(--pkf-red-700);
}

/* secondary / outlined purple */
.pkfeed .graybutton,
.pkfeed a.graybutton,
.pkfeed .lightgraybutton {
	background-color: transparent;
	border-color: var(--pkf-purple-600);
	color: var(--pkf-purple-600) !important; /* pk-newdashboard.css forces white */
}

.pkfeed .graybutton:hover,
.pkfeed a.graybutton:hover,
.pkfeed .lightgraybutton:hover {
	background-color: transparent;
	border-color: var(--pkf-purple-700);
	color: var(--pkf-purple-700) !important;
}


/* ============= */
/* Inputs/toggle */
/* ============= */
.pkfeed .textfield2,
.pkfeed .dropdown2,
.pkfeed .textarea2 {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--pkf-gray-200);
	border-radius: var(--pkf-radius);
	background-color: var(--pkf-gray-0);
	color: var(--pkf-gray-600);
	font-family: var(--pkf-font);
	font-size: 16px;
}

.pkfeed .textfield2:focus,
.pkfeed .dropdown2:focus,
.pkfeed .textarea2:focus {
	outline: none;
	border-color: var(--pkf-purple-600);
	box-shadow: 0 0 0 1px var(--pkf-purple-600);
}

.pkfeed .switch {
	width: 44px;
	height: 24px;
	flex: none;
}

.pkfeed .slider {
	background-color: var(--pkf-gray-300);
	transition: .2s;
}

.pkfeed .slider:before {
	width: 18px;
	height: 18px;
	left: 3px;
	bottom: 3px;
	transition: .2s;
}

.pkfeed input:checked + .slider {
	background-color: var(--pkf-purple-600);
}

.pkfeed input:checked + .slider:before {
	transform: translateX(20px);
}


/* ================= */
/* Header + feed nav */
/* ================= */
.pkfeed .feedheader {
	position: relative;
	z-index: 20;
	padding: 0 var(--pkf-inset);
	background-color: var(--pkf-purple-900);
	border: 0;
	box-shadow: var(--pkf-shadow);
	color: var(--pkf-gray-0);
}

.pkfeed .feedheadertop {
	display: flex;
	align-items: center;
	gap: var(--pkf-sp-sm);
	box-sizing: border-box;
	min-height: 72px;
	margin: 0;
	padding: var(--pkf-sp-xs) 0;
}

.pkfeed .feedheadertop > a {
	order: -1;
	flex: 0 0 auto;
	line-height: 0;
}

.pkfeed .feedlogo {
	display: block;
	width: auto;
	height: 34px;
}

.pkfeed .feedtitle {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	font-family: var(--pkf-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--pkf-gray-100);
}

.pkfeed .feedtitle > img {
	display: none;
}

.pkfeed .feednav {
	display: flex;
	gap: var(--pkf-sp-md);
	overflow-x: auto;
	padding: 0 var(--pkf-inset);
	background-color: var(--pkf-gray-0);
	border-bottom: 1px solid var(--pkf-gray-200);
}

.pkfeed .feednav a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--pkf-sp-sm) 0;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--pkf-gray-400);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.pkfeed .feednav a:hover {
	color: var(--pkf-gray-600);
	text-decoration: none;
}

.pkfeed .feednav a.active {
	color: var(--pkf-purple-600) !important;
	border-bottom-color: var(--pkf-purple-600);
}

.pkfeed .feednav a img {
	opacity: .6;
}

.pkfeed .feedcontent {
	padding: var(--pkf-sp-lg) var(--pkf-inset) 4rem;
}


/* ===== */
/* Cards */
/* ===== */
.pkfeed .infodetails,
.pkfeed .feedinfoticketsrows,
.pkfeed .feedinfo,
.pkfeed .feed-forms,
.pkfeed .feedlinkfooter,
.pkfeed .feedpostwrapper,
.pkfeed .singlepost,
.pkfeed .feedsettings,
.pkfeed .eachticketrow,
.pkfeed .composechoice,
.pkfeed .noposts,
.pkfeed .postadmincontrol,
.pkfeed .live-stream-reset {
	box-sizing: border-box;
	background-color: var(--pkf-gray-0);
	border: 1px solid var(--pkf-gray-200);
	border-radius: var(--pkf-radius);
	box-shadow: var(--pkf-shadow-card);
}

/* status cards (Ember StatusCard: info / warning / error) */
.pkfeed .infoentry,
.pkfeed .printmsg,
.pkfeed .no-stream-container {
	box-sizing: border-box;
	padding: var(--pkf-sp-sm);
	background-color: var(--pkf-purple-50);
	border: 1px solid var(--pkf-purple-600);
	border-radius: var(--pkf-radius);
	color: var(--pkf-gray-600);
	line-height: 1.5;
}

.pkfeed .viewasadminmsg,
.pkfeed .feedinfomobilemessage,
.pkfeed .feedpostdelay,
.pkfeed .feedpostlocation,
.pkfeed .feedpostpostponed {
	padding: var(--pkf-sp-sm);
	background-color: var(--pkf-warning-100);
	border: 1px solid var(--pkf-warning-300);
	border-radius: var(--pkf-radius);
	color: var(--pkf-gray-600);
}

.pkfeed .feedpostcancelled,
.pkfeed .test-mode-container {
	padding: var(--pkf-sp-sm);
	background-color: var(--pkf-red-50);
	border: 1px solid var(--pkf-red-700);
	border-radius: var(--pkf-radius);
	color: var(--pkf-gray-600);
}

.pkfeed .viewasadminmsg {
	margin-bottom: var(--pkf-sp-md);
}

.pkfeed .infoentrytitle {
	margin-bottom: var(--pkf-sp-xxs);
	font-size: 18px;
	font-weight: 500;
	color: var(--pkf-gray-600);
}

/* Wicket feedback panel */
.pkfeed .newfeedback ul {
	margin: 0 0 var(--pkf-sp-md);
	padding: var(--pkf-sp-xs) var(--pkf-sp-sm);
	background-color: var(--pkf-red-50);
	border: 1px solid var(--pkf-red-700);
	border-radius: var(--pkf-radius);
}

.pkfeed .newfeedback ul:has(.feedbackPanelINFO) {
	background-color: var(--pkf-purple-50);
	border-color: var(--pkf-purple-600);
}

.pkfeed .newfeedback .feedbackPanelERROR {
	color: var(--pkf-red-700);
}

.pkfeed .newfeedback .feedbackPanelINFO {
	color: var(--pkf-purple-600);
}


/* ========================== */
/* Headings (ds-headline-*)   */
/* ========================== */
.pkfeed .feedinfotitle,
.pkfeed .feedposttitle,
.pkfeed .feedorderheadline {
	margin: 0 0 var(--pkf-sp-xs);
	font-family: var(--pkf-font-ext);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.008em;
	color: var(--pkf-gray-600);
}

.pkfeed .infotitle,
.pkfeed .choicesheader,
.pkfeed .feedoverlaytitle {
	font-family: var(--pkf-font-ext);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0;
}

/* ds-headline-extra-small: eyebrow labels */
.pkfeed .infoday,
.pkfeed .feedinfosubtitle,
.pkfeed .feedinfoticketstitle,
.pkfeed .infoticketsheader,
.pkfeed .feedsettingsgrouptitle,
.pkfeed .feedsectiontitle,
.pkfeed .ticketdesctop,
.pkfeed .optionc1 > span:first-child {
	font-family: var(--pkf-font-ext);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pkf-gray-400);
}


/* =========================== */
/* /feed/info  (FeedInfoPage)  */
/* =========================== */
.pkfeed .infocolumns {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	grid-gap: var(--pkf-sp-md);
	gap: var(--pkf-sp-md);
	padding: 0;
	border: 0;
}

.pkfeed .infodetails {
	overflow: hidden;
	align-self: start;
}

.pkfeed .infodetails img {
	display: block;
	max-height: 300px;
}

.pkfeed .infodetailstext {
	grid-template-columns: minmax(0, 1fr);
	grid-gap: var(--pkf-sp-sm);
	gap: var(--pkf-sp-sm);
	padding: var(--pkf-sp-md);
	background-color: var(--pkf-gray-0);
	border: 0;
	font-size: 14px;
	color: var(--pkf-gray-500);
}

.pkfeed .infodatetime {
	/* one-line pill above the title: "FRIDAY November 20, 2026" */
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--pkf-sp-xs);
	justify-self: start;
	align-self: start;
	text-align: left;
	padding: var(--pkf-sp-xxs) var(--pkf-sp-xs);
	background-color: var(--pkf-purple-50);
	border-radius: var(--pkf-radius);
	text-align: center;
	color: var(--pkf-purple-700);
}

.pkfeed .infodatetime .infoday {
	color: var(--pkf-purple-600);
}

.pkfeed .infodate {
	font-weight: 600;
}

/* single-day events have an empty "to" separator */
.pkfeed .infodatetime > div:has(> .infodate:empty) {
	display: none;
}

.pkfeed .infotitle {
	margin-bottom: var(--pkf-sp-xxs);
	color: var(--pkf-gray-600);
}

.pkfeed .infolocationdetails {
	margin-bottom: var(--pkf-sp-xxs);
}

.pkfeed .infolinkstable {
	width: calc(100% + 2 * var(--pkf-sp-xs));
	margin: var(--pkf-sp-sm) calc(-1 * var(--pkf-sp-xs)) 0;
	border-spacing: var(--pkf-sp-xs) 0;
}

.pkfeed .infolinkstable td {
	padding: 0 0 var(--pkf-sp-xxs);
	background: transparent;
	vertical-align: bottom;
	font-size: 14px;
	color: var(--pkf-gray-500);
}

.pkfeed .infolinkstext {
	margin-bottom: var(--pkf-sp-xxs);
}

.pkfeed .infobuttons .button {
	width: 100%;
}

.pkfeed .feedinfotickets {
	margin-top: var(--pkf-sp-md);
}

.pkfeed .feedinfoticketstitle {
	margin-bottom: var(--pkf-sp-xxs);
}

.pkfeed .feedinfoticketsrows {
	overflow: hidden;
}

.pkfeed .infoticketsrow,
.pkfeed .live-stream-tickets-row {
	grid-gap: var(--pkf-sp-xxs);
	gap: var(--pkf-sp-xxs);
	padding: var(--pkf-sp-xs) var(--pkf-sp-sm);
	border-bottom: 1px solid var(--pkf-gray-200);
	font-size: 14px;
}

.pkfeed .infoticketsrow:nth-child(odd) {
	background-color: transparent;
}

.pkfeed .feedinfoticketsrows > :last-child {
	border-bottom: 0;
}

.pkfeed .infoticketsheader {
	background-color: var(--pkf-gray-50) !important;
}

.pkfeed .infoticketsdetail {
	font-size: 12px;
	font-style: normal;
	color: var(--pkf-gray-400);
}

.pkfeed .live-stream-tickets-row .button {
	min-height: 40px;
}

.pkfeed .infolinks {
	margin: var(--pkf-sp-md) 0 0;
	font-size: 14px;
	color: var(--pkf-gray-400);
	line-height: 1.8;
}

.pkfeed .info-refundprotect {
	padding: 2px 10px;
	background-color: var(--pkf-success-badge);
	border-radius: 999px;
	color: var(--pkf-success-300);
	font-size: 14px;
	font-weight: 600;
}

.pkfeed .info-refundprotect.info-spotrefundguarantee {
	color: #333333;
	background-color: #f3fd00;
}

.pkfeed .feedinfo,
.pkfeed .feed-forms {
	margin-top: var(--pkf-sp-md);
	padding: var(--pkf-sp-md);
	line-height: 1.5;
}

.pkfeed .feedinfosubtitle {
	margin-top: var(--pkf-sp-md);
	margin-bottom: var(--pkf-sp-xxs);
	padding-bottom: var(--pkf-sp-xxs);
	border-bottom: 1px solid var(--pkf-gray-200);
}

.pkfeed .feedpostimg {
	padding: 0;
	border: 1px solid var(--pkf-gray-200);
	border-radius: var(--pkf-radius);
	background-color: var(--pkf-gray-50);
	margin: var(--pkf-sp-xs) 0;
}

.pkfeed .feed-forms-qa {
	margin-bottom: var(--pkf-sp-xxs);
	padding: var(--pkf-sp-sm);
	background-color: var(--pkf-gray-50);
	border-radius: var(--pkf-radius);
}

.pkfeed .feed-forms-question {
	font-weight: 600;
}

.pkfeed .feedlinkfooter {
	margin-top: var(--pkf-sp-md);
	padding: var(--pkf-sp-sm) var(--pkf-sp-md);
	text-align: center;
	font-size: 14px;
	color: var(--pkf-gray-500);
}


/* ================================ */
/* /feed/tickets  (FeedTicketsPage) */
/* ================================ */
.pkfeed .feedhelpfullinks {
	margin-top: var(--pkf-sp-sm);
}

.pkfeed .feedadminactions {
	margin-top: var(--pkf-sp-xxs);
}

.pkfeed .feedinlinelabel {
	font-weight: 600;
	margin-right: 4px;
}

.pkfeed .feedadminactions a {
	margin-right: var(--pkf-sp-xs);
}

.pkfeed .ticketdownloadcontent {
	max-width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	color: var(--pkf-gray-600);
}

.pkfeed .printmsg {
	display: block;
	margin-bottom: var(--pkf-sp-md);
	text-align: center;
}

.pkfeed .tixelmsg {
	margin-top: var(--pkf-sp-lg);
}

.pkfeed .ticketdownloadcontent table,
.pkfeed .ticketdownloadcontent tbody {
	display: block;
	width: 100%;
}

.pkfeed .eachticketrow {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	margin-bottom: var(--pkf-sp-sm);
}

.pkfeed .ticketdownloadcontent td {
	display: block;
	box-sizing: border-box;
	padding: var(--pkf-sp-md) !important;
	background: transparent;
	border: 0;
	vertical-align: top;
}

.pkfeed .optionc1 {
	flex: 0 0 170px;
	width: auto;
	font-family: var(--pkf-font-ext);
	font-size: 18px;
	font-weight: 800;
	color: var(--pkf-gray-600);
}

.pkfeed .optionc1 > span:first-child {
	display: block;
	margin-bottom: 4px;
	color: var(--pkf-red-700);
}

.pkfeed .optionc1b {
	flex: 1 1 auto;
	min-width: 0;
}

.pkfeed .optionc2 {
	/* size to the nowrap "Download ticket" button; the details column shrinks instead */
	flex: 0 0 auto;
}

.pkfeed .optionc3 {
	flex: 0 0 220px;
	text-align: center;
	background-color: var(--pkf-gray-50) !important;
	border-left: 2px dashed var(--pkf-gray-200) !important;
}

.pkfeed .ticketname,
.pkfeed .ticketevent {
	font-family: var(--pkf-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--pkf-gray-400);
	overflow-wrap: anywhere;
}

.pkfeed .ticketdescwrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: var(--pkf-sp-sm);
	gap: var(--pkf-sp-sm);
}

.pkfeed .ticketdesc {
	margin: 0;
	padding: 0;
	font-size: 16px;
}

.pkfeed .ticketdesctop {
	padding-bottom: 4px;
	border: 0;
}

.pkfeed .ticketdescbottom {
	padding-top: 0;
	font-weight: 500;
	color: var(--pkf-gray-600);
}

.pkfeed .ticketdownloadlink {
	white-space: nowrap;
}

.pkfeed .ticketbarcode {
	display: block;
	width: 100%;
	max-width: 180px;
	height: auto;
	margin: 0 auto;
}

.pkfeed .applewallet {
	margin-top: var(--pkf-sp-xs);
}

.pkfeed .applewallet img {
	display: inline-block;
	width: auto;
	height: 44px;
}

.pkfeed .feedsectiontitle {
	margin: var(--pkf-sp-lg) 0 var(--pkf-sp-xxs);
}

.pkfeed .voucherstable .eachticketrow {
	background-color: var(--pkf-purple-50);
	border-color: var(--pkf-purple-200);
}

.pkfeed .voucherstable .optionc3 {
	background-color: transparent !important;
	border-left-color: var(--pkf-purple-200) !important;
}

.pkfeed .vouchernotticket {
	margin-top: 4px;
	font-family: var(--pkf-font);
	font-size: 12px;
	font-weight: 600;
	color: var(--pkf-red-700);
}


/* ================================== */
/* /feed/settings  (FeedSettingsPage) */
/* ================================== */
.pkfeed .feedsettings {
	max-width: 800px;
	margin: 0 auto var(--pkf-sp-lg);
	padding: var(--pkf-sp-xxs) var(--pkf-sp-md) var(--pkf-sp-md);
}

.pkfeed .feedsettingsgrouptitle {
	display: block;
	margin: var(--pkf-sp-md) 0 0;
	padding: 0;
	background: none;
}

.pkfeed .feedsettingsrow {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-gap: var(--pkf-sp-sm);
	gap: var(--pkf-sp-sm);
	padding: var(--pkf-sp-sm) 0;
	border-bottom: 1px solid var(--pkf-gray-200);
	font-weight: 500;
}

.pkfeed .feedcontrolsrow {
	padding-bottom: 0;
	border-bottom: 0;
}

.pkfeed .feedsettingsdesc {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	color: var(--pkf-gray-400);
	line-height: 1.4;
}


/* ======================== */
/* News feed posts / popup  */
/* ======================== */
.pkfeed .feedpostwrapper,
.pkfeed .singlepost {
	margin-bottom: var(--pkf-sp-sm);
}

.pkfeed .feedpost {
	padding: var(--pkf-sp-md);
	border: 0 !important;
}

.pkfeed .feedposttitle {
	margin-top: 0;
	margin-bottom: 4px;
}

.pkfeed .feedattribution {
	font-size: 14px;
	color: var(--pkf-gray-400);
}

.pkfeed .feedpostcontent {
	margin: var(--pkf-sp-sm) 0;
	line-height: 1.5;
}

.pkfeed .organizerlinks a {
	margin-right: var(--pkf-sp-sm);
}

.pkfeed .noposts {
	padding: var(--pkf-sp-lg) var(--pkf-sp-md);
	font-style: normal;
	text-align: center;
	color: var(--pkf-gray-400);
}

.pkfeed .feedadmin a:not(.button) {
	margin-right: var(--pkf-sp-xs);
}

.pkfeed .feedoverlay {
	z-index: 100;
	background-color: rgb(3 3 12 / 60%);
}

.pkfeed .feedoverlaycontent {
	max-width: calc(100% - 2rem);
	padding: var(--pkf-sp-lg) var(--pkf-sp-md);
	border-radius: var(--pkf-radius-lg);
	box-shadow: var(--pkf-shadow);
}

.pkfeed .feedoverlaymid {
	padding: var(--pkf-sp-xs) 0;
	border-color: var(--pkf-gray-200);
	color: var(--pkf-gray-500);
}

.pkfeed .feedoverlaysub {
	font-size: 14px;
	color: var(--pkf-gray-400);
}

.pkfeed .feedoverlaytip {
	padding: var(--pkf-sp-xxs) var(--pkf-sp-xs);
	background-color: var(--pkf-gray-100);
	border-radius: var(--pkf-radius);
	color: var(--pkf-gray-500);
}


/* ================================================ */
/* Organizer-facing feed pages (compose/edit/admin) */
/* ================================================ */
.pkfeed .feedcompose {
	font-family: var(--pkf-font);
}

.pkfeed .composetutorial {
	width: 100%;
	margin-left: min(0px, calc(var(--pkf-gutter) - (100vw - var(--pkf-max)) / 2));
}

.pkfeed .composetutorial .hm {
	margin: 0;
}

.pkfeed a.composeplainlink,
.pkfeed a.composeplainlink:hover {
	text-decoration: none;
}

.pkfeed .composechoice,
.pkfeed .composechoice_dark {
	margin-bottom: var(--pkf-sp-xs);
	background-color: var(--pkf-gray-0);
}

.pkfeed a.composechoicelink,
.pkfeed a.composechoicelink:hover,
.pkfeed a.composechoicelink-cover,
.pkfeed a.composechoicelink-cover:hover {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.pkfeed .composechoicelink {
	position: relative;
	padding-right: 48px;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.pkfeed .composechoicelink:hover {
	border-color: var(--pkf-purple-600);
	box-shadow: 0 0 0 1px var(--pkf-purple-600);
}

.pkfeed .composechoicelink::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--pkf-gray-400);
	border-right: 2px solid var(--pkf-gray-400);
	transform: translateY(-50%) rotate(45deg);
	transition: border-color .15s ease-in-out;
}

.pkfeed .composechoicelink:hover::after {
	border-color: var(--pkf-purple-600);
}

.pkfeed .composechoicelink-text {
	grid-column: 2 / 4;
}

.pkfeed .composechoicelink-text .choicedesc {
	margin-top: var(--pkf-sp-xxs);
}

/* a card holding its own links (Know Before You Go) stretches its title link over the whole card */
.pkfeed a.composechoicelink-cover {
	display: block;
}

.pkfeed a.composechoicelink-cover::before {
	content: "";
	position: absolute;
	inset: 0;
}

.pkfeed .composechoicelink-text .choicedesc a {
	position: relative;
	z-index: 1;
}

.pkfeed .composechoicelink:has(.composechoicelink-disabled) {
	opacity: 0.4;
	cursor: not-allowed;
	border-color: var(--pkf-gray-200);
	box-shadow: var(--pkf-shadow-card);
}

.pkfeed .composechoicelink:has(.composechoicelink-disabled)::after {
	border-color: var(--pkf-gray-400);
}

.pkfeed a.composechoicelink-disabled {
	pointer-events: none;
}

/* PKI-279: Cancelled card, with the event visibility choice under its text */
.pkfeed .composecancel {
	--pkc-ink: #111114;
	--pkc-line: #dcdce2;
	--pkc-brand: #3c3cb0;
	--pkc-brand-dark: #2f2f8c;
	--pkc-brand-tint: #efeffd;
	--pkc-alert: #d11a1a;
	align-items: start;
}

.pkfeed .composecancel-text {
	grid-column: 2 / 4;
}

.pkfeed .composecancel-title {
	margin: 0 0 var(--pkf-sp-xxs);
	color: var(--pkc-ink);
	font-size: 16px;
	font-weight: 700;
}

.pkfeed .composecancel-text p {
	margin: 0 0 var(--pkf-sp-xxs);
	line-height: 1.4;
}

.pkfeed .composecancel-note {
	color: var(--pkc-alert);
	font-size: 14px;
}

.pkfeed .composecancel-note a {
	color: inherit;
	text-decoration: underline;
}

.pkfeed .composecancel-choice {
	margin-top: var(--pkf-sp-sm);
}

.pkfeed .composecancel-choice fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pkfeed .composecancel-opt {
	display: flex;
	align-items: center;
	gap: var(--pkf-sp-xxs);
	margin-bottom: var(--pkf-sp-xxs);
	padding: 10px 12px;
	border: 1px solid var(--pkc-line);
	border-radius: var(--pkf-radius);
	background-color: var(--pkf-gray-0);
	transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.pkfeed .composecancel-opt:has(input:checked) {
	border-color: var(--pkc-brand);
	background-color: var(--pkc-brand-tint);
}

.pkfeed .composecancel-opt:has(input:focus-visible) {
	outline: 2px solid var(--pkc-brand);
	outline-offset: 2px;
}

.pkfeed .composecancel-label {
	flex: 1;
	min-width: 0;
	color: var(--pkc-ink);
	line-height: 1.3;
}

.pkfeed .composecancel-label label {
	display: inline;
	margin: 0;
	color: inherit;
	font-weight: 400;
	cursor: pointer;
}

.pkfeed .composecancel-label .pk-info-tip {
	margin-left: 2px;
}

.pkfeed .composecancel-opt input[type="radio"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--pkc-brand);
}

.pkfeed .composecancel-default {
	display: inline-block;
	margin-left: 6px;
	vertical-align: 1px;
	white-space: nowrap;
	padding: 1px 7px;
	border: 1px solid var(--pkc-brand);
	border-radius: 10px;
	background-color: #fff;
	color: var(--pkc-brand);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* a.button doubled up so it outranks the red .pkfeed a.button and its :hover */
.pkfeed a.button.composecancel-continue {
	display: inline-block;
	margin-top: var(--pkf-sp-xxs);
	border-color: var(--pkc-brand);
	background-color: var(--pkc-brand);
	color: #fff;
}

.pkfeed a.button.composecancel-continue:hover,
.pkfeed a.button.composecancel-continue:active {
	border-color: var(--pkc-brand-dark);
	background-color: var(--pkc-brand-dark);
}

.pkfeed a.button.composecancel-continue:focus-visible {
	outline-color: var(--pkc-brand);
}

/* the shared .composechoice mobile grid is two columns */
@media screen and (max-width: 600px) {
	.pkfeed .composecancel-text,
	.pkfeed .composechoicelink-text {
		grid-column: 2 / 3;
	}
}

.pkfeed .choicesubdesc {
	color: var(--pkf-gray-400);
}

.pkfeed .choicenotif {
	color: #111114;
}

.pkfeed .choicenotif + .choicenotif {
	margin-top: var(--pkf-sp-xxs);
}

/* grace period notice under the emergency post header */
.pkfeed .grace {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	box-sizing: border-box;
	margin: var(--pkf-sp-xs) 0;
	padding: 10px 12px;
	background-color: #fdf4dc;
	border: 1px solid #f0dca8;
	border-left: 4px solid #e8a317;
	border-radius: var(--pkf-radius);
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #4a3a10;
}

.pkfeed .grace .clock {
	flex: 0 0 auto;
}

.pkfeed .infoscheduleddesc {
	color: var(--pkf-purple-600);
}

.pkfeed .postlabel {
	font-weight: 600;
}

.pkfeed .feedsystemmessage {
	background-color: var(--pkf-gray-100);
	border-radius: var(--pkf-radius);
	color: var(--pkf-gray-500);
}

.pkfeed .charsleft {
	background-color: var(--pkf-purple-600);
	border-radius: var(--pkf-radius);
}

.pkfeed .composeactions.sticky {
	border-bottom-color: var(--pkf-gray-200);
	box-shadow: var(--pkf-shadow);
}

.pkfeed .singleinfoheader,
.pkfeed .singleinfoheader2 {
	background-color: var(--pkf-purple-900);
	border-radius: var(--pkf-radius) var(--pkf-radius) 0 0;
}

.pkfeed .feededitgcol {
	background-color: var(--pkf-gray-0);
	border-color: var(--pkf-gray-200);
	border-radius: var(--pkf-radius);
}

.pkfeed .feededitgcolselected {
	background-color: var(--pkf-purple-50);
	border-color: var(--pkf-purple-600);
}

.pkfeed .feededitgranularity a {
	color: var(--pkf-gray-600);
}

.pkfeed .postpreviewwrapper {
	background-color: var(--pkf-gray-50);
	border-color: var(--pkf-gray-200);
	border-radius: var(--pkf-radius);
}

.pkfeed .player-wrapper {
	background: var(--pkf-gray-100);
	border-radius: var(--pkf-radius);
}


/* ====== */
/* Mobile */
/* ====== */

/* matches pk-feed.css + resizeHeader() in FeedBasePage.html (600px) */
@media screen and (max-width: 600px) {

	.pkfeed {
		--pkf-gutter: 1rem;
	}

	/* stays fixed like before; resizeHeader() pushes .feednav below it */
	.pkfeed .feedheader {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 50;
		width: 100%;
		box-sizing: border-box;
		padding: 0 var(--pkf-gutter);
	}

	.pkfeed .feedheadertop {
		flex-wrap: wrap;
		gap: 4px var(--pkf-sp-xs);
		min-height: 0;
		padding: var(--pkf-sp-xs) 0;
	}

	.pkfeed .feedlogo {
		height: 25px;
	}

	.pkfeed .feedtitle {
		flex-basis: 100%;
		text-align: left;
		font-size: 14px;
	}

	/* single scrollable tab strip; resizeHeader() sets its margin-top */
	.pkfeed .feednav {
		gap: var(--pkf-sp-sm);
		margin-left: var(--pkf-gutter);
		margin-right: var(--pkf-gutter);
		padding: 0 var(--pkf-sp-sm);
		border: 1px solid var(--pkf-gray-200);
		border-radius: var(--pkf-radius);
		scrollbar-width: none;
	}

	.pkfeed .feednav a {
		padding: var(--pkf-sp-xs) 0;
		font-size: 14px;
	}

	.pkfeed .feedcontent {
		padding: var(--pkf-sp-sm) var(--pkf-gutter) 3rem;
	}

	.pkfeed .infocolumns {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pkf-sp-sm);
	}

	.pkfeed .infodetails {
		grid-template-columns: minmax(0, 1fr);
	}

	.pkfeed .infodetails img {
		max-height: 220px;
	}

	.pkfeed .infodetailstext {
		padding: var(--pkf-sp-sm);
		background-color: var(--pkf-gray-0);
		border: 0;
	}

	.pkfeed .feedinfomobilemessage {
		margin-top: var(--pkf-sp-xs);
		padding: var(--pkf-sp-xxs) var(--pkf-sp-xs);
		font-size: 14px;
	}

	.pkfeed .feedinfoticketsrows {
		border: 1px solid var(--pkf-gray-200);
	}

	.pkfeed .infoticketsrow {
		grid-template-columns: 1fr 1fr;
		/* detail div carries an inline grid-area:detail; the four value divs auto-place */
		grid-template-areas: "a b" "c d" "detail detail";
		margin-bottom: 0;
		background-color: transparent;
	}

	/* header row is hidden on mobile, so label each value instead */
	.pkfeed .infoticketsrow > div:nth-child(-n+4)::before {
		display: block;
		margin-bottom: 2px;
		font-family: var(--pkf-font-ext);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--pkf-gray-400);
	}
	.pkfeed .infoticketsrow > div:nth-child(1)::before { content: "Section"; }
	.pkfeed .infoticketsrow > div:nth-child(2)::before { content: "Type"; }
	.pkfeed .infoticketsrow > div:nth-child(3)::before { content: "Row"; }
	.pkfeed .infoticketsrow > div:nth-child(4)::before { content: "Seat"; }
	.pkfeed .infoticketsrow > div:nth-child(-n+4):has(> span:empty) {
		display: none;
	}

	.pkfeed .info-refundprotect {
		padding: 2px 10px;
		background-color: var(--pkf-success-badge);
		border-radius: 999px;
		font-size: 14px;
	}

	.pkfeed .feedinfo,
	.pkfeed .feed-forms,
	.pkfeed .feedpost,
	.pkfeed .feedsettings {
		padding-left: var(--pkf-sp-sm);
		padding-right: var(--pkf-sp-sm);
	}

	.pkfeed .feedsettings {
		margin-bottom: var(--pkf-sp-lg);
	}
}

/* matches the ticket download breakpoint in pk-feed.css */
@media (max-width: 700px) {

	.pkfeed .ticketdownloadcontent {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	.pkfeed .eachticketrow {
		flex-direction: column;
	}

	.pkfeed .ticketdownloadcontent td {
		flex: 0 0 auto;
		width: 100%;
		padding: var(--pkf-sp-sm) !important;
	}

	.pkfeed .optionc1 {
		font-size: 20px;
		padding-bottom: 0 !important;
	}

	.pkfeed .ticketdescwrapper,
	.pkfeed .ticketdescwrapperseats {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		padding: 0;
	}

	.pkfeed .optionc2 {
		padding-top: 0 !important;
	}

	.pkfeed .optionc3 {
		border-left: 0 !important;
		border-top: 2px dashed var(--pkf-gray-200) !important;
	}

	.pkfeed .voucherstable .optionc3 {
		border-top-color: var(--pkf-purple-200) !important;
	}

	.pkfeed .ticketbarcode {
		max-width: 240px;
	}
}