.ss-series-manager .ss-series-form textarea {
	width: 100%;
	max-width: 480px;
	min-height: 80px;
}

.ss-series-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 24px;
}

.ss-series-table th,
.ss-series-table td {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid #ddd;
}

.ss-chapter-item {
	border: 1px solid #ccc;
	padding: 6px 12px;
	margin-bottom: 5px;
	background: #fff;
	cursor: move;
}

.ui-state-highlight {
	height: 40px;
	line-height: 1.2em;
	background: #f0f0f0;
}

/* Centers content on the plugin's own raw template_include pages (the single-series "book
   detail" page and the series_group archive) -- pages built via [starsrite_series_lists] don't
   need this since they already sit inside the theme's own page-content wrapper, but a
   template_include page only gets get_header()/get_footer(), nothing in between, so without
   this it stretches full browser width and hugs the left edge instead of matching the grid. */
.ss-series-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* "Library shelf" grid: book-cover-shaped tiles, several to a row, like books standing on a
   shelf, instead of one full-width row per series. */
.ss-series-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 20px;
}

@media (min-width: 560px) {
	.ss-series-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 900px) {
	.ss-series-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ss-series-card {
	display: flex;
	flex-direction: column;
}

.ss-series-cover {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3; /* paperback-book proportions */
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22), inset -3px 0 6px rgba(0, 0, 0, 0.15);
	background: #cbb896;
}

.ss-series-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-series-cover-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	text-align: center;
	font-weight: 600;
	color: #4a3a22;
	background: linear-gradient(160deg, #e7d3ab, #c9a86a);
}

.ss-series-title {
	margin: 10px 0 2px;
	font-size: 1em;
	line-height: 1.3;
}

.ss-series-meta {
	font-size: 0.85em;
	opacity: 0.75;
}

.ss-series-desc {
	font-size: 0.85em;
	margin-top: 4px;
	opacity: 0.85;
}

/* "My Series" management grid -- same book-cover cards as the public list, plus a category
   badge row and an Edit / Re-Order / Delete action row underneath each card. Replaces the old
   plain table (name/description/categories/action columns), which didn't show the cover at all
   and, on a page of any width, mostly just listed one book after another as text. */
.ss-series-grid-manage {
	margin-top: 32px;
}

.ss-series-card-manage .ss-series-cover {
	cursor: pointer;
}

.ss-series-card-categories {
	margin: 6px 0 2px;
}

.ss-series-card-actions {
	margin-top: 10px;
	font-size: 0.85em;
}

.ss-series-card-actions a {
	text-decoration: none;
}

.ss-series-card-actions a:hover {
	text-decoration: underline;
}

.ss-series-card-actions span {
	opacity: 0.4;
	margin: 0 4px;
}

.ss-series-card-actions .ss-series-delete {
	color: #b3372c;
}

/* Single-series "book detail" page. */
.ss-series-single-header {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 32px;
}

.ss-series-single-cover {
	position: relative;
	flex: 0 0 220px;
	width: 220px;
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset -4px 0 8px rgba(0, 0, 0, 0.15);
	background: #cbb896;
}

.ss-series-single-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-series-single-info {
	flex: 1 1 320px;
	min-width: 0;
}

.ss-series-single-info h1 {
	margin-top: 0;
	margin-bottom: 6px;
}

.ss-series-single-meta {
	font-size: 0.9em;
	opacity: 0.75;
	margin-bottom: 10px;
}

.ss-series-single-categories {
	margin-bottom: 10px;
}

.ss-series-category-badge {
	display: inline-block;
	font-size: 0.78em;
	padding: 3px 10px;
	margin: 0 6px 6px 0;
	border-radius: 999px;
	background: #f0e4cc;
	color: #4a3a22;
}

.ss-series-single-description {
	max-width: 65ch;
}

.ss-series-single-chapters h2 {
	margin-bottom: 12px;
}

.ss-chapter-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-chapter-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ss-chapter-row-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	overflow: hidden;
	background: #f0e4cc;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-chapter-row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ss-chapter-row-thumb-placeholder {
	font-size: 0.85em;
	font-weight: 600;
	color: #8a6d3b;
}

.ss-chapter-row-body {
	min-width: 0;
	flex: 1 1 auto;
}

.ss-chapter-row-title {
	display: block;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-chapter-row-meta {
	font-size: 0.8em;
	opacity: 0.7;
}