@charset "utf-8";
/**
 * Awókey Broadcast — Responsive / Mobile Layout
 * Added 2026-08-07.
 *
 * The original 2013-era stylesheets (nowplaying.css, playlist.css, songinfo.css,
 * artistpage.css, newalbums.css, topsongs.css, topusers.css, browsepools.css,
 * browsecomments.css, awokeybroadcast.css, upcomingqueuemodule.css,
 * nowplayingmodule.css) contain zero @media queries and rely on fixed pixel
 * widths + floats for layout, so every view overflows/squeezes on phone-width
 * screens. Rather than rewrite those files or the ~40 templates that reference
 * their classes, this file overrides the same selectors under one mobile
 * breakpoint. It's registered last in the sheet list (see
 * components/com_awokeybroadcast/src/Controller/DisplayController.php), so it
 * loads after all the others and wins on equal selector specificity without
 * needing !important, except where the original rule itself used !important.
 */

/* Hidden by default (desktop keeps the original letter table); switched on
   inside the mobile breakpoint below. Declared here, before the media query,
   so the mobile override actually wins the cascade at narrow widths. */
.letter-select-mobile {
	display: none;
}

/* ============================================================
   Card redesign, 2026-08-10 - applied at ALL widths, not just mobile
   (a visual request, not a mobile-only bug fix like everything else in
   this file). Restyles the legacy float-based "song row" card patterns
   to match the Top Songs chart's clean flexbox card look
   (topsongs.css .chart-row and friends), WITHOUT renaming any classes
   or touching the PHP templates - Now Playing's "Recently Played" list
   in particular is live-updated by JS (nowplaying/default.php's
   updateRecentlyPlayed(), which clones/queries these elements by class
   name), so keeping the existing class names avoids any risk of
   breaking that.
   ============================================================ */

/* .recent-background: used by Now Playing's "Recently Played Songs" and
   Search Results. The two views DON'T share identical markup though -
   Now Playing wraps everything after the cover in one .trackInfo column,
   while Search Results puts .searchResultsTitles, .small-album and
   .small-overallrating as three separate flex children alongside the
   cover. flex-wrap here + the explicit sizing below on those three lets
   Search Results wrap onto their own lines instead of overflowing the
   card sideways on narrow screens. */
body.com_awokeybroadcast .recent-background {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 10px 15px;
	margin: 0 0 8px;
	border: 1px solid #DDDDDD;
	border-radius: 6px;
	background: #FFFFFF;
	min-height: 0;
	float: none;
}

body.com_awokeybroadcast .recent-background .newsong {
	float: none;
	order: -1;
	flex-shrink: 0;
}

body.com_awokeybroadcast .recent-background .smallcover {
	float: none;
	width: 60px;
	height: 60px;
	margin: 0;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 4px;
}

body.com_awokeybroadcast .recent-background .smallcover img {
	width: 60px;
	height: 60px;
	object-fit: cover;
}

body.com_awokeybroadcast .recent-background .trackInfo {
	flex: 1;
	min-width: 0;
	padding-top: 0;
}

/* Search Results' three top-level columns (see the flex-wrap comment
   above). searchResultsTitles takes the primary line next to the cover;
   small-album/small-overallrating each get flex-basis:100% so they drop
   to their own full-width line instead of squeezing in beside it. */
body.com_awokeybroadcast .recent-background .searchResultsTitles {
	flex: 1 1 200px;
	min-width: 0;
	padding-top: 0;
}

body.com_awokeybroadcast .recent-background .small-artist,
body.com_awokeybroadcast .recent-background .small-title,
body.com_awokeybroadcast .recent-background .small-album {
	float: none;
	display: block;
	font-size: 14px;
	font-style: normal;
	padding-top: 0;
	margin: 0;
}

/* Only true on Search Results, where small-album is a direct flex child
   of .recent-background (see the flex-wrap comment near the top of this
   section) - on Now Playing it's nested inside .trackInfo, where this
   flex-basis is simply ignored since it isn't a flex item there. */
body.com_awokeybroadcast .recent-background > .small-album {
	flex: 1 1 100%;
	margin-left: 75px;
}

body.com_awokeybroadcast .recent-background .small-artist {
	font-weight: bold;
}

body.com_awokeybroadcast .recent-background .small-duration {
	float: none;
	display: inline;
	font-size: 12px;
	color: #888888;
	padding-top: 0;
}

body.com_awokeybroadcast .recent-background .small-requested-by {
	float: none;
	text-align: left;
	font-size: 12px;
	padding: 4px 0 0;
}

body.com_awokeybroadcast .recent-background .small-dedication {
	margin: 4px 0 0;
	font-size: 12px;
}

body.com_awokeybroadcast .recent-background .small-overallrating {
	margin: 4px 0 0;
}

/* Only true on Search Results - see the .small-album comment above. */
body.com_awokeybroadcast .recent-background > .small-overallrating {
	flex: 1 1 100%;
	margin-left: 75px;
}

/* .recentAlbums: New Albums view (same card language, larger 160x160 cover). */
body.com_awokeybroadcast .recentAlbums {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 10px 15px;
	margin: 0 0 8px;
	border: 1px solid #DDDDDD;
	border-radius: 6px;
	background: #FFFFFF;
	float: none;
}

body.com_awokeybroadcast .recentAlbums .albumpic {
	float: none;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 4px;
}

body.com_awokeybroadcast .recentAlbums .albumpic img {
	float: none;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

body.com_awokeybroadcast .recentAlbums .albuminfo {
	flex: 1;
	min-width: 0;
}

body.com_awokeybroadcast .recentAlbums .artist-label,
body.com_awokeybroadcast .recentAlbums .album-title-label,
body.com_awokeybroadcast .recentAlbums .released-label,
body.com_awokeybroadcast .recentAlbums .dateAdded-label {
	display: inline;
	font-size: 11px;
	color: #888888;
}

body.com_awokeybroadcast .recentAlbums .artist,
body.com_awokeybroadcast .recentAlbums .album-title {
	display: inline;
	font-size: 14px;
	font-weight: bold;
}

body.com_awokeybroadcast .recentAlbums .released,
body.com_awokeybroadcast .recentAlbums .dateReleased,
body.com_awokeybroadcast .recentAlbums .dateAdded {
	display: inline;
	font-size: 12px;
}

/* Shared "list row" pattern: Top Requesters, New Additions, Browse Pool,
   Browse Comments all render each row as an inline-styled zebra div
   (background set per-row via style="") wrapping a single *InfoName /
   requestorName label (plus, for Browse Comments' album rows, a small
   30x30 cover image). Restyle these into the same bordered white-card
   list language as the song cards above, overriding the inline zebra
   background since there's no class hook on the row itself to target
   more narrowly. */
body.com_awokeybroadcast .requestors > div[style*="background"],
body.com_awokeybroadcast .poolsInfo > div[style*="background"],
body.com_awokeybroadcast .commentsInfo > div[style*="background"] {
	background: #FFFFFF !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 0 !important;
	padding: 10px 15px !important;
	margin: 0 0 8px;
	border: 1px solid #DDDDDD;
	border-radius: 6px;
}

body.com_awokeybroadcast .requestorName,
body.com_awokeybroadcast .poolsInfoName,
body.com_awokeybroadcast .commentsInfoName {
	float: none;
	margin: 0;
	font-size: 14px;
	letter-spacing: normal;
	display: flex;
	align-items: center;
	gap: 10px;
}

body.com_awokeybroadcast .commentsInfoName img {
	float: none !important;
	margin: 0 !important;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

body.com_awokeybroadcast .requestorTotal {
	float: none;
	margin: 0;
	font-size: 14px;
	font-weight: bold;
	flex-shrink: 0;
}

/* ============================================================
   Request/Dedicate buttons, 2026-08-10 - real styled pill buttons,
   replacing the old tiny request-$color.gif/dedicate-$color.gif icons.
   The PHP now emits a .awb-btn span/link with a color-state class
   instead of an <img>; each template still decides on its own whether
   to wrap it in a link (unchanged) - this only restyles what's inside.
   ============================================================ */
body.com_awokeybroadcast .awb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 18px;
	margin: 2px 6px 2px 0;
	border-radius: 22px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	color: #FFFFFF;
	border: none;
}

a.awb-btn:hover {
	filter: brightness(0.9);
}

body.com_awokeybroadcast .awb-btn-blue {
	background: #2563EB;
}

body.com_awokeybroadcast .awb-btn-green {
	background: #16A34A;
}

body.com_awokeybroadcast .awb-btn-yellow {
	background: #CA8A04;
}

body.com_awokeybroadcast .awb-btn-gray {
	background: #9CA3AF;
	cursor: default;
}

body.com_awokeybroadcast .awb-btn-red {
	background: #9CA3AF;
}

body.com_awokeybroadcast .awb-btn-dedicate {
	background: #FFFFFF;
	color: #2563EB;
	border: 2px solid #2563EB;
	padding: 13px 16px;
}

@media screen and (max-width: 768px) {

	/* ---------- Global safety net ---------- */
	body.com_awokeybroadcast img {
		max-width: 100%;
		height: auto;
	}

	/* display:block turns the table into a scrollable block box, but without
	   white-space:nowrap the browser still wraps cell text to fit the
	   viewport instead of scrolling — for text-heavy tables (legends, song
	   history) that produces a cramped, hard-to-read mess rather than a
	   normal scrollable table, so force natural row width here instead. */
	body.com_awokeybroadcast table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Cassiopeia's core Bootstrap pagination (search results, browse pool,
	   etc.) lays out first/prev/1..10/next/last as one non-wrapping row,
	   which overflows a phone's width. Let it wrap instead of scroll. */
	body.com_awokeybroadcast .pagination__wrapper .pagination {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	/* ---------- Tap targets ---------- */
	/* The 5-star rating widget (star.css) is a sprite-based, absolutely
	   positioned strip of five 20x20px links — roughly half the ~44px
	   minimum recommended touch target size, and everything in that file
	   is !important, hand-positioned via left:0/20/40/60/80px offsets tied
	   to the sprite. Rather than recompute all of that, scale the WHOLE
	   widget up uniformly with a CSS transform: since transforms scale
	   hit-testing along with the paint, the sprite alignment and per-star
	   click boundaries stay exactly correct, just bigger. margin-bottom
	   compensates for the extra visual height the transform adds without
	   affecting layout flow (transforms don't resize the box other
	   elements flow around). */
	body.com_awokeybroadcast .small-overallrating ul.star-rating,
	body.com_awokeybroadcast .overallrating ul.star-rating,
	body.com_awokeybroadcast .yourrating ul.star-rating,
	body.com_awokeybroadcast .overallratingSongInfo ul.star-rating,
	body.com_awokeybroadcast .yourratingSongInfo ul.star-rating {
		transform: scale(1.8);
		transform-origin: left top;
		margin-bottom: 18px !important;
	}

	/* Request/Dedicate icon links: request-*.gif is 55x20px, dedicate-*.gif
	   is a bare 20x20px icon with no padding - the <a> only ever gets as
	   big as the <img> it wraps. Since these appear in several templates
	   (playlist/searchresults/songinfo) as plain <a><img></a> with no
	   shared class, target the images directly by filename pattern rather
	   than editing every template; padding on the image enlarges the
	   wrapping inline <a>'s own tap area along with it. */
	body.com_awokeybroadcast a > img[src*="/request-"],
	body.com_awokeybroadcast a > img[src*="/dedicate-"] {
		padding: 14px 10px;
	}

	/* New Additions' "buy cover" link is a 30x30px thumbnail - the same
	   width='30' attribute is also used elsewhere for plain, non-clickable
	   decorative covers (browsecomments/browsepool), so scope to only
	   images that are actually inside a link. */
	body.com_awokeybroadcast a > img[width="30"] {
		padding: 7px;
	}

	body.com_awokeybroadcast table td,
	body.com_awokeybroadcast table th {
		white-space: nowrap;
	}

	#s2jsearchbox {
		float: none;
		width: 100%;
		margin: 0 0 10px;
	}

	/* The complete.ly autocomplete widget (js/complete.js) builds a ghost-
	   hint effect from two stacked <input>s meant to sit exactly on top of
	   each other: a hint (position:absolute, top:0/left:0) behind the
	   real, visible one (position:relative, no explicit top/left set - it
	   relies on landing in the same spot via normal flow). At this
	   container width the real input's normal-flow position ends up ~29px
	   below the hint instead of matching it, leaving the hint's white
	   background box exposed above the real input, over whatever text
	   precedes the search box. top:0 alone doesn't fix this: for
	   position:relative, top is an offset from the element's own static
	   position, not an anchor to the container's edge like it is for
	   position:absolute - the static position itself is what's wrong here.
	   Switching to position:absolute (its already-relative wrapper is the
	   correct containing block) makes top/left true anchors instead, and
	   min-height keeps the wrapper from collapsing now that neither of its
	   two visible children are in normal flow any more. */
	#s2jsearchbox input[name="search"] {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
	}

	#s2jsearchbox > div {
		min-height: 24px;
	}

	/* ---------- Now Playing (page + module) ---------- */
	.nowPlaying-AlbumCover {
		float: none;
		margin: 0 auto 15px;
		text-align: center;
	}

	.albumcover-np {
		margin: 0 auto;
	}

	.nowPlaying-songinfo {
		float: none;
		width: 100% !important;
		padding: 0;
	}

	.songinfo .song-title-label,
	.songinfo .artist-label,
	.songinfo .album-title-label,
	.songinfo .overallrating-label,
	.songinfo .yourrating-label,
	.songinfo .release-year-label,
	.songinfo .duration-label,
	.songinfo .plays-label,
	.songinfo .requests-label,
	.songinfo .listens-label,
	.songinfo .playsdiv {
		float: none;
		width: auto;
		display: block;
	}

	.songinfo .overallrating,
	.songinfo .yourrating {
		float: none;
		margin-left: 0;
	}

	/* .listeners-block ("Tuned In:" count) has a fixed height:25px in
	   nowplaying.css, sized for its DESKTOP float layout. On mobile its
	   label is unfloated to a block above (see .listens-label in the
	   float:none group above), so label+value stack to more than 25px
	   and the fixed height clips the box - .duration-label right after
	   it in the DOM then renders starting at that too-short height,
	   landing on top of the listener count. */
	.songinfo .listeners-block {
		height: auto;
		min-height: 25px;
	}

	.now-playing-show,
	.now-playing-dj {
		float: none;
		display: block;
		text-align: left;
	}

	/* overflow:hidden matters here: a broken cover image (missing picture
	   file) falls back to rendering its alt/title text, and combined with
	   the global img{height:auto} rule above (needed elsewhere so real
	   images aren't stretched), a broken image with long alt text can
	   grow far taller than its intended 75x75 box and bleed into
	   whatever comes after it. Clipping to the box keeps that contained
	   regardless of what's inside it. */
	.smallcover {
		float: none;
		margin: 8px auto;
		overflow: hidden;
	}

	.small-title,
	.small-artist,
	.small-duration,
	.small-requested-by,
	.newsong {
		float: none;
		display: block;
		text-align: left;
		padding-top: 4px;
	}

	.small-overallrating,
	.small-dedication {
		margin-left: 0;
	}

	/* ---------- Song Info page ---------- */
	.albumcoverSongInfo {
		float: none;
		margin: 0 auto 15px;
	}

	.songinfoBlock {
		float: none;
		width: 100% !important;
		margin-left: 0;
	}

	.overallrating-labelSongInfo,
	.yourrating-labelSongInfo {
		float: none;
		width: auto;
		display: block;
	}

	.overallratingSongInfo,
	.yourratingSongInfo {
		margin-left: 0;
	}

	.requestSongInfo {
		float: none;
		display: block;
		margin: 10px 0;
	}

	.lyricsBlock,
	.commentsBlock {
		float: none;
		width: 100%;
	}

	.addComment,
	.commentor {
		float: none;
		text-align: left;
	}

	/* ---------- Artist page ---------- */
	.leftSide {
		float: none;
		width: 100%;
		margin: 0 0 15px;
	}

	.artistPic,
	.artistPic img {
		width: 100%;
		max-width: 200px;
		margin-left: auto;
		margin-right: auto;
	}

	.otherInfo {
		width: 100%;
		margin-left: 0;
	}

	.albumBlock {
		margin-left: 0;
	}

	.smallcoverArtistPage {
		float: none;
		margin: 10px auto;
	}

	.small-albumTitlepage {
		float: none;
		display: block;
	}

	.playlistAlbumsSongsArtistPage {
		float: none;
		width: 100%;
	}

	/* ---------- Playlist page ---------- */
	.playlistAlbumsSongs {
		float: none;
		width: 100%;
		padding: 0;
		margin-bottom: 10px;
	}

	.songListTable {
		float: none !important;
		width: 100% !important;
	}

	.albumCoverSelected {
		float: none;
		margin: 0 auto 15px;
	}

	.poolButtons {
		float: none;
		text-align: center;
	}

	/* ---------- New Albums ---------- */
	/* The template sets align="left" directly on the <img> (a presentational
	   HTML attribute, equivalent to float:left) rather than via CSS, so it
	   must be cleared explicitly here — display:block alone doesn't do it. */
	.recentAlbums .albumpic img {
		float: none;
		margin: 10px auto;
		display: block;
	}

	.recentAlbums .artist-label,
	.recentAlbums .album-title-label,
	.recentAlbums .released-label,
	.recentAlbums .dateAdded-label {
		float: none;
		width: auto;
		display: block;
	}

	/* ---------- Top Requestors / Browse Pools / Browse Comments ---------- */
	.topRequestors,
	.browsePools,
	.browseComments {
		width: 100%;
		float: none;
		margin: 12px 0;
	}

	.requestorTotal,
	.poolsInfoTotal,
	.commentsInfoTotal,
	.commentsInfoRequestSection,
	.commentsInfoPoolSection,
	.poolsInfoPoolSection {
		float: none;
		text-align: left;
		margin: 4px 10px;
	}

	/* ---------- Top Songs ---------- */
	.topsongs-ranking,
	.topsongs-requests {
		float: none;
		display: block;
		margin: 4px 10px;
	}

	/* .topsongs-background has min-height:95px plus a NEGATIVE bottom
	   margin (-10px), sized for the old horizontal float layout. Once
	   the cover image and text stack vertically above, that fixed height
	   is nowhere near enough and the negative margin pulls the next
	   row's box up into the current row's overflowing content - rows
	   visibly overlap each other. Let height be fully automatic instead. */
	.topsongs-background {
		min-height: 0;
		margin: 15px 0;
	}

	/* ---------- Letter search (A-Z) ---------- */
	/* A row of ~28 letter cells is too small to tap reliably on a phone even
	   with extra padding, so on mobile it's replaced with a real <select>
	   dropdown built by awokeybroadcast-main.js from the same links; the
	   original table is just hidden here, not removed, so JS-disabled
	   browsers still get a (scrollable) working letter picker. */
	.searchByLetter,
	.modSearchByLetter {
		display: none !important;
	}

	.letter-select-mobile {
		display: block;
		width: 100%;
		padding: 10px;
		font-size: 16px;
		margin: 10px 0;
	}
}