/**
 * KWWD ListenBrainz Now Playing - frontend styles.
 *
 * Layout is chosen in the settings and applied as a modifier class on the
 * wrapper, so the cover size that suits each layout is defined here rather
 * than left to the person installing the plugin.
 *
 * Colours and text sizes are not set here. They arrive as custom properties on
 * the wrapper, written by the plugin from the appearance settings, so an unset
 * value falls through to the active theme and the widget keeps inheriting
 * whatever the theme is already doing.
 *
 * This file is a deliberate port of the sibling plugins' stylesheets, with the
 * prefix changed. kwwd-hardcover-currently-reading and
 * kwwd-audiobookshelf-now-listening are identical to each other for exactly
 * the same reason this is identical to them: a site running more than one of
 * these should be able to stack two cards in a sidebar and see one design.
 *
 * The two departures are the progress bar and the album line. The bar has no
 * meaning here: ListenBrainz reports what is playing, not how far through it
 * you are, so there is no percentage to fill and the bar is left out rather
 * than drawn empty. The album has no counterpart in either sibling, because
 * neither of them has an album, and it is drawn from the same palette as the
 * byline and the detail line. Everything around both -- the row, the cover, the
 * type scale, the spacing, the colours -- matches.
 */

.kwwd-lb {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.45;

	/*
	 * The card is kept inside the column it is placed in. box-sizing means the
	 * padding and the border are part of that width rather than added to it,
	 * and max-width is a backstop for a theme that sizes widgets generously.
	 */
	box-sizing: border-box;
	max-width: 100%;

	/*
	 * A query container of its own, so the cover can react to the width of the
	 * card rather than the width of the window. A narrow sidebar on a wide
	 * screen is exactly the case a viewport media query cannot see.
	 */
	container-type: inline-size;
}

.kwwd-lb:last-child {
	margin-bottom: 0;
}

.kwwd-lb-heading {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.3;
}

.kwwd-lb-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 10px;
	padding: 10px 12px;
	box-sizing: border-box;
	max-width: 100%;
	background: var(--kwwd-lb-card-bg, rgba(127, 127, 127, 0.07));
	border-left: var(--kwwd-lb-border-width, 3px) solid var(--kwwd-lb-border-color, #4ecdc4);
	border-radius: 6px;
}

.kwwd-lb-item:last-child {
	margin-bottom: 0;
}

.kwwd-lb-cover {
	flex: 0 0 auto;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

/* Compact: a small square cover beside the text. The default. */
.kwwd-lb--compact .kwwd-lb-cover {
	width: 60px;
	height: 60px;
}

/* Side: a larger cover beside the text, still one row. */
.kwwd-lb--side .kwwd-lb-cover {
	width: 120px;
	height: 120px;
}

/* Stacked: a full width cover above the text, so the card reads as a poster. */
.kwwd-lb--stacked .kwwd-lb-item {
	display: block;
}

.kwwd-lb--stacked .kwwd-lb-cover {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
}

/* A browser without aspect-ratio still gets a usable full width cover
   rather than a collapsed box. */
@supports not (aspect-ratio: 1 / 1) {
	.kwwd-lb--stacked .kwwd-lb-cover {
		height: 320px;
	}
}

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

.kwwd-lb-info {
	flex: 1 1 auto;
	min-width: 0;
}

.kwwd-lb-title {
	font-weight: 700;
	font-size: var(--kwwd-lb-title-size, 13px);
	line-height: 1.35;
	margin: 0 0 3px;

	/*
	 * A track or album name with no spaces in it is wider than most sidebars.
	 * Without this it pushes the card past the edge of its column rather than
	 * wrapping, and the neighbouring card goes with it.
	 */
	overflow-wrap: break-word;
}

/*
 * The title colour has to survive being a link. Themes style links, and a
 * sidebar is exactly where they do it most: a theme's own "a:link",
 * ".widget a" or ".entry-content a" rule is just as specific as a single class
 * plus the element, and the theme stylesheet is printed after this one, so on a
 * tie the theme wins. Matching the real nesting of the markup puts this far
 * enough ahead of those rules that the chosen colour actually shows, and the
 * link states are listed because a theme colours :hover and :focus too.
 *
 * A linked title uses the title colour. Underlining on hover is the only cue
 * that it is a link, which is why it is kept.
 */
.kwwd-lb .kwwd-lb-info .kwwd-lb-title {
	color: var(--kwwd-lb-title-color, inherit);
}

.kwwd-lb .kwwd-lb-info .kwwd-lb-title a,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:link,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:visited,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:hover,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:focus,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:active {
	color: var(--kwwd-lb-title-color, inherit);
}

.kwwd-lb .kwwd-lb-info .kwwd-lb-title a,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:link,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:visited {
	text-decoration: none;
}

.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:hover,
.kwwd-lb .kwwd-lb-info .kwwd-lb-title a:focus {
	text-decoration: underline;
}

.kwwd-lb-author {
	font-size: var(--kwwd-lb-author-size, 11px);
	color: var(--kwwd-lb-author-color, inherit);
	opacity: var(--kwwd-lb-author-dim, 0.7);
	margin: 0 0 7px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The album gets a line of its own rather than being folded into the detail
   line, so it can be sized and coloured separately from the state. */
.kwwd-lb-album {
	font-size: var(--kwwd-lb-album-size, 11px);
	color: var(--kwwd-lb-album-color, inherit);
	opacity: var(--kwwd-lb-album-dim, 0.7);
	margin: 0 0 7px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kwwd-lb-meta {
	font-size: var(--kwwd-lb-meta-size, 11px);
	color: var(--kwwd-lb-meta-color, inherit);
	opacity: var(--kwwd-lb-meta-dim, 0.65);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kwwd-lb-empty {
	margin: 0;
	font-size: 12px;
	opacity: 0.7;
	font-style: italic;
}

.kwwd-lb-error {
	margin: 0;
	font-size: 12px;
	color: #d63638;
}

/* Cover failed to load: drop the placeholder box so the row does not
   reserve dead space. */
.kwwd-lb-cover--empty:empty {
	display: none;
}

/*
 * A sidebar narrower than this leaves too little room beside a 120px cover, and
 * a viewport media query cannot detect it: a narrow sidebar on a wide screen
 * looks like a wide one as far as the window is concerned. The values match the
 * viewport query below so the two agree, and a browser without container query
 * support simply ignores this and uses that.
 */
@container (max-width: 200px) {
	.kwwd-lb-item {
		gap: 10px;
		padding: 9px 10px;
	}

	.kwwd-lb--side .kwwd-lb-cover {
		width: 84px;
		height: 84px;
	}
}

@media screen and (max-width: 480px) {
	.kwwd-lb-item {
		gap: 10px;
		padding: 9px 10px;
	}

	/* A 120px cover leaves too little room for the text on a narrow screen. */
	.kwwd-lb--side .kwwd-lb-cover {
		width: 84px;
		height: 84px;
	}
}