/* Shortwave MP3's - basic listing, dark receiver-panel theme.
   Shares the charcoal palette of mystyle.css; accent is indigo. */

:root {
	color-scheme: dark;
	--bg:         #0e1319;
	--panel:      #161d25;
	--line:       #2a3644;
	--text:       #d5dde5;
	--dim:        #8593a1;
	--soft:       #aebcc9;              /* readout lines: brighter than --dim */
	--accent:     #8cadf0;
	--accent-dim: #6279a8;
	/* 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: #e9edff;
	--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 {
	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;
}

/* ============================================================
   Interval Signals -- copy button + wide player additions.
   NO clock, NO logbook link on IS pages. --accent here is
   indigo, so the copy button hovers indigo to match.
   ============================================================ */

.searchresult { position: relative; }

.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: #8ff0b4;                     /* copied - brighter green */
	border-color: #2c5940;
}