/**
 * 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: 1240px;
	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);
}

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

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

.gcn-mine__action {
	padding: 0.3em 0.7em;
	font-size: var(--gcn-text-sm);
	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;
	}
}