/**
 * My Content — the front-end cockpit.
 *
 * Rows rather than cards: this page answers "what have I added, and what is
 * happening to it?", which is a list you scan, not a gallery you browse.
 */

.gcn-mine {
	max-width: 1280px;
	margin: 0 auto var(--gcn-space-16);
}

/*
 * Wider than the theme's 1100px content column, which left rows of this shape
 * marooned in the middle of the page. Scoped to this page by a body class the
 * theme adds (inc/my-content.php), so no other page changes.
 */
body.gcn-mine-page #brx-content.wordpress {
	width: 1280px;
	/* See gcn-profile.css: the theme's max-width is a pixel value, not 100%. */
	max-width: 100%;
}

.gcn-mine__section {
	margin-bottom: var(--gcn-space-10);
}

.gcn-mine__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-3);
	align-items: baseline;
	margin-bottom: var(--gcn-space-4);
	padding-bottom: var(--gcn-space-3);
	border-bottom: 1px solid var(--gcn-rule);
}

.gcn-mine__title {
	margin: 0;
	font-size: var(--gcn-text-xl);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

.gcn-mine__count {
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

/* The button sits at the end of the header row, over the Edit/View column. */
.gcn-mine__headadd {
	margin-left: auto;
}

.gcn-mine__add {
	padding: 0.35em 0.85em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-strong);
	text-decoration: none;
	white-space: nowrap;
	background: var(--gcn-brand-soft);
	border: 1px solid var(--gcn-brand-border);
	border-radius: var(--gcn-radius-pill);
	transition: background var(--gcn-duration) var(--gcn-ease);
}

.gcn-mine__add:hover,
.gcn-mine__add:focus-visible {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-color: var(--gcn-brand);
}

/* ==========================================================================
   The tabs
   ==========================================================================
   The panels are all in the page; `is-tabbed` is added by the script, so
   without JavaScript they stay stacked and the page reads as one long list
   rather than as a tab strip with nothing behind it.
   ========================================================================== */

.gcn-mine__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-1);
	margin-bottom: var(--gcn-space-6);
	border-bottom: 1px solid var(--gcn-rule);
}

.gcn-mine__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	padding: 0.7em 1.05em;
	font-family: inherit;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-muted);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease);
}

.gcn-mine__tab:hover {
	color: var(--gcn-brand-strong);
}

.gcn-mine__tab:focus-visible {
	outline: none;
	box-shadow: var(--gcn-ring);
	border-radius: var(--gcn-radius-sm);
}

.gcn-mine__tab.is-active {
	color: var(--gcn-text);
	font-weight: var(--gcn-weight-semibold);
	border-bottom-color: var(--gcn-brand);
}

.gcn-mine__tabcount {
	padding: 0.1em 0.5em;
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text-muted);
	background: var(--gcn-surface-sunken);
	border-radius: var(--gcn-radius-pill);
}

.gcn-mine__tab.is-active .gcn-mine__tabcount {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
}

.gcn-mine__panel {
	margin-bottom: var(--gcn-space-10);
}

/* With the script running, one panel at a time. */
.gcn-mine.is-tabbed .gcn-mine__panel {
	display: none;
}

.gcn-mine.is-tabbed .gcn-mine__panel.is-active {
	display: block;
	animation: gcn-mine-in var(--gcn-duration) var(--gcn-ease);
}

@keyframes gcn-mine-in {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

	.gcn-mine.is-tabbed .gcn-mine__panel.is-active {
		animation: none;
	}
}

/* The panel's own heading repeats the tab, so it is for no-JavaScript readers
   and for screen readers rather than for the eye. */
.gcn-mine.is-tabbed .gcn-mine__panel > .gcn-mine__head > .gcn-mine__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gcn-mine.is-tabbed .gcn-mine__panel > .gcn-mine__head {
	border-bottom: 0;
	padding-bottom: 0;
}

@media (max-width: 640px) {

	.gcn-mine__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.gcn-mine__tabs::-webkit-scrollbar {
		display: none;
	}

	.gcn-mine__tab {
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   The rows
   -------------------------------------------------------------------------- */

/* The thumbnail, or initials when the entry has no picture. */
.gcn-mine__thumb {
	display: block;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border-radius: var(--gcn-radius-sm);
}

.gcn-mine__thumb .gcn-related__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border-radius: var(--gcn-radius-sm);
}

.gcn-mine__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--gcn-radius-sm);
}

.gcn-mine__list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
}

.gcn-mine__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-3);
	align-items: center;
	padding: var(--gcn-space-4) var(--gcn-space-5);
}

.gcn-mine__item + .gcn-mine__item {
	border-top: 1px solid var(--gcn-rule);
}

/*
 * The title takes what is left rather than claiming a basis of its own: at a
 * 16rem basis it grew wide enough to push the status and the buttons onto a
 * second line on a perfectly wide row.
 */
.gcn-mine__text {
	flex: 1 1 40%;
	/* Leave room for the status and the buttons, or the title grows into their
	   space and pushes them onto a line of their own. */
	max-width: calc( 100% - 15rem );
	min-width: 0;
	margin-right: auto;
}

.gcn-mine__name {
	display: block;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-medium);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text);
}

.gcn-mine__meta {
	display: block;
	margin-top: 0.15em;
	font-size: var(--gcn-text-xs);
	color: var(--gcn-text-muted);
}

/* The status. Colour carries the meaning, but so does the wording — a pill
   nobody can tell apart from another is not a status. */
.gcn-mine__pill {
	flex: 0 0 auto;
	padding: 0.28em 0.7em;
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	white-space: nowrap;
	border-radius: var(--gcn-radius-pill);
}

.gcn-mine__pill[data-tone="live"] {
	color: var(--gcn-positive);
	background: var(--gcn-positive-soft);
}

.gcn-mine__pill[data-tone="wait"] {
	color: var(--gcn-notice);
	background: var(--gcn-notice-soft);
}

.gcn-mine__pill[data-tone="draft"] {
	color: var(--gcn-text-muted);
	background: var(--gcn-surface-sunken);
}

/* Status selectbox dropdown for listing author/editor */
.gcn-mine__status-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	flex: 0 0 auto;
}

.gcn-mine__status-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-block;
	vertical-align: middle;
	height: 28px;
	box-sizing: border-box;
	padding: 0 22px 0 10px;
	font-family: inherit;
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	line-height: 26px;
	border-radius: var(--gcn-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 9px;
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background-color var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease);
}

.gcn-mine__status-select:hover {
	filter: brightness(0.97);
}

.gcn-mine__status-select:focus,
.gcn-mine__status-select:focus-visible {
	outline: none;
	box-shadow: var(--gcn-ring);
}

.gcn-mine__status-select[data-status="publish"],
.gcn-mine__status-select[data-status="live"] {
	color: var(--gcn-positive, #057a55);
	background-color: var(--gcn-positive-soft, #def7ec);
	border-color: rgba(5, 122, 85, 0.25);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23057a55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.gcn-mine__status-select[data-status="draft"] {
	color: var(--gcn-text-muted, #6a7481);
	background-color: var(--gcn-surface-sunken, #f4f6f8);
	border-color: var(--gcn-rule-strong, #d1d5db);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7481' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.gcn-mine__status-select[data-status="pending"],
.gcn-mine__status-select[data-status="wait"] {
	color: var(--gcn-notice, #d97706);
	background-color: var(--gcn-notice-soft, #fef3c7);
	border-color: rgba(217, 119, 6, 0.25);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.gcn-mine__status-select[data-status="private"],
.gcn-mine__status-select[data-status="future"],
.gcn-mine__status-select[data-status="gd-expired"],
.gcn-mine__status-select[data-status="gd-closed"] {
	color: var(--gcn-text-soft, #49535f);
	background-color: var(--gcn-surface-sunken, #f4f6f8);
	border-color: var(--gcn-rule-strong, #d1d5db);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2349535f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.gcn-mine__status-wrap.is-updating .gcn-mine__status-select {
	opacity: 0.6;
	pointer-events: none;
}

.gcn-mine__status-spinner {
	display: none;
	position: absolute;
	right: 0.55em;
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: gcn-mine-spin 0.6s linear infinite;
}

.gcn-mine__status-wrap.is-updating .gcn-mine__status-spinner {
	display: inline-block;
}

@keyframes gcn-mine-spin {
	to { transform: rotate(360deg); }
}

/* The right-hand column: status, then what you can do about it. */
.gcn-mine__side {
	display: inline-flex;
	flex: 0 0 auto;
	gap: var(--gcn-space-3);
	align-items: center;
	margin: 0;
	padding: 0;
}

.gcn-mine__side > p {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.gcn-mine__actions {
	display: inline-flex;
	flex: 0 0 auto;
	gap: var(--gcn-space-2);
	align-items: center;
}

.gcn-mine__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	box-sizing: border-box;
	padding: 0 0.7em;
	font-size: var(--gcn-text-sm);
	line-height: 26px;
	color: var(--gcn-text-soft);
	text-decoration: none;
	border: 1px solid var(--gcn-rule-strong);
	border-radius: var(--gcn-radius-sm);
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background var(--gcn-duration) var(--gcn-ease);
}

.gcn-mine__action:hover,
.gcn-mine__action:focus-visible {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border-color: var(--gcn-brand-border);
}

.gcn-mine__more {
	margin: var(--gcn-space-3) 0 0;
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

/* --------------------------------------------------------------------------
   The rest, and the empty state
   -------------------------------------------------------------------------- */

.gcn-mine__section--rest .gcn-mine__title {
	font-size: var(--gcn-text-lg);
}

.gcn-mine__rest {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-mine__rest-item {
	display: flex;
	gap: var(--gcn-space-2);
	align-items: center;
	padding: var(--gcn-space-2) var(--gcn-space-3);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
	background: var(--gcn-surface-sunken);
	border-radius: var(--gcn-radius-pill);
}

.gcn-mine__empty {
	padding: var(--gcn-space-8);
	text-align: center;
	color: var(--gcn-text-muted);
	background: var(--gcn-surface-sunken);
	border-radius: var(--gcn-radius-lg);
}

.gcn-mine__cta {
	display: inline-block;
	margin-top: var(--gcn-space-2);
	padding: 0.7em 1.4em;
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-contrast);
	text-decoration: none;
	background: var(--gcn-brand);
	border-radius: var(--gcn-radius-md);
}

.gcn-mine__cta:hover {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand-strong);
}

@media (max-width: 640px) {

	.gcn-mine__item {
		padding: var(--gcn-space-4);
	}

	/*
	 * Too narrow for three columns, but the title still belongs beside its
	 * thumbnail — only the status and the buttons drop to a second line.
	 */
	.gcn-mine__text {
		flex: 1 1 auto;
		max-width: calc( 100% - 4rem );
	}

	.gcn-mine__side {
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.gcn-mine__headadd {
		margin-left: 0;
	}
}