/* Shortwave MP3's - basic listing, dark receiver-panel theme.
   Shares the palette of mystyle.css; see that file for notes. */

:root {
	color-scheme: dark;
	--bg:         #0e1319;
	--panel:      #161d25;
	--line:       #2a3644;
	--text:       #d5dde5;
	--dim:        #8593a1;
	--soft:       #aebcc9;              /* readout lines: brighter than --dim */
	--accent:     #8cc6f0;
	--accent-dim: #628aa8;
	/* Custom waveform colors. The PNG stays white/transparent; the shared
	   player applies these colors at display time. */
	--waveform-played:   var(--accent);
	--waveform-unplayed: #68737d;
	--waveform-playhead: #eaf6ff;
	--mono: Menlo, "Courier New", Courier, monospace;   /* plain (unslashed) zero on Mac/Win/Linux -- Consolas/Cascadia/ui-monospace slash their zeros */
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: Calibri, Arial, Helvetica, sans-serif;
	margin: 0 auto;
	padding: 15px 15px 40px 15px;
	max-width: 1000px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

h1 {
	font: bold 1.25em Arial, sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dim);
	border-bottom: 2px solid var(--accent-dim);
	padding-bottom: 10px;
}

hr {
	border: none;
	border-top: 1px solid var(--line);
	margin: 18px 0 6px 0;
}

.stationname {
	font-size: 130%;
	font-weight: bold;
	color: var(--accent);
}

.sitecountry { color: var(--text); }

.datetimefreq { color: var(--soft); }

.langpower { color: var(--soft); }

.remarks { color: var(--text); line-height: 1.4; }

/* .audiodiv is populated by the shared waveform player. The native
   audio rule remains only for the <noscript> fallback. */
.audiodiv {
	width: 100%;
	margin: 6px 0;
}

.audiodiv audio {
	width: 100%;
	display: block;
}

.mp3info {
	color: var(--dim);
	font-size: 88%;
	line-height: 1.5;
}

.top {
	float: right;
	color: var(--dim);
	margin-right: 7px;
}

/* ============================================================
   swlog-style additions for the basic MP3 listing:
   card positioning, copy button, UTC playback clock,
   logbook link. Mirrors mystyle.css.
   ============================================================ */

/* Card must be a positioning context for the corner copy button */
.searchresult { position: relative; }

/* Copy-to-clipboard button, top-right of the card.
   Gray -> blue on hover -> green (.ok) for ~1.2s on copy. */
.copy-btn {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--dim);
	cursor: pointer;
	text-decoration: none;
	z-index: 2;
}

.copy-btn:hover {
	color: var(--accent);
	border-color: var(--accent-dim);
}

.copy-btn.ok {
	color: #62d98f;                     /* copied - QSL green */
	border-color: #2c5940;
}

/* UTC clock riding along with the audio */
.rec-clock {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	background: #07090b;
	border: 1px solid #000;
	border-radius: 6px;
	box-shadow: inset 0 2px 9px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.04);
	padding: 5px 12px 6px;
	margin: 0 0 9px;
}

.rec-clock .rc-lamp {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #1d2733;
	border: 1px solid #000;
	flex: none;
	align-self: center;
	transition: background .15s, box-shadow .15s;
}

.rec-clock.running .rc-lamp {
	background: var(--accent);
	box-shadow: 0 0 7px rgba(140,198,240,.85);
}

.rec-clock .rc-time {
	font-family: var(--mono);
	font-size: 23px;
	line-height: 1;
	color: var(--accent);
	letter-spacing: .07em;
	text-shadow: 0 0 9px rgba(140,198,240,.5);
	font-variant-numeric: tabular-nums;
}

.rec-clock .rc-suffix {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--accent-dim);
	letter-spacing: .16em;
}

.rec-clock .rc-day {
	font-family: var(--mono);
	font-size: 11px;
	color: #62d98f;
	letter-spacing: .08em;
}

/* Logbook link */
.logbooklink { margin-top: 12px; }

.logbooklink a {
	display: inline-block;
	color: var(--accent);
	text-decoration: none;
	font-weight: bold;
	font-size: 95%;
	padding: 5px 12px;
	border: 1px solid var(--accent-dim);
	border-radius: 5px;
}

.logbooklink a:hover {
	background-color: var(--accent);
	color: var(--bg);
	text-decoration: none;
}