/* ============================================================
   Shortwave MP3 Search - dark theme
   "Receiver front panel at night": cool charcoal like wrinkle-
   finish paint, blue dial-lamp accent, monospace frequency
   readouts. Interval Signals uses the same layout with a
   magic-eye green accent (mystyle_is.css).
   ============================================================ */

:root {
	color-scheme: dark;                 /* native dark audio controls */
	--bg:         #0e1319;
	--panel:      #161d25;
	--panel-hi:   #1e2733;
	--line:       #2a3644;
	--text:       #d5dde5;
	--dim:        #8593a1;
	--soft:       #aebcc9;              /* readout lines: brighter than --dim */
	--accent:     #8cc6f0;              /* dial lamp blue */
	--accent-dim: #628aa8;
	--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: 0 12px 40px 12px;
	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;
}

/* ---- Search panel ---- */

#searcharea {
	margin: 18px auto 0 auto;
	text-align: center;
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-bottom: 2px solid var(--accent-dim);   /* tuning-scale line */
	padding: 16px 14px 12px 14px;
	width: 92%;
	border-radius: 8px 8px 0 0;
	box-sizing: border-box;
}

#searcharea label {
	font: bold 1.05em Arial, sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dim);                  /* engraved panel plate */
}

/* The dial window */
#searcharea input {
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 10px;
	font: 24px var(--mono);
	text-align: center;
	color: var(--accent);
	background-color: #080c11;
	border: 1px solid var(--line);
	border-radius: 6px;
	box-shadow: inset 0 2px 8px rgba(0,0,0,0.6);
	caret-color: var(--accent);
}

#searcharea input::placeholder {
	color: #4a5866;
	font-size: 17px;
}

#count {
	font: 13px var(--mono);
	color: var(--soft);
	padding: 8px 0 6px 0;
}

.noresults {
	text-align: center;
	color: var(--dim);
	padding: 30px 0;
}

/* ---- Results ---- */

#update {
	width: 92%;
	margin: 0 auto;
}

#update ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#update ul li {
	background-color: var(--panel);
	border: 1px solid var(--line);
	border-radius: 6px;
	margin-top: 14px;
	overflow: hidden;
	animation: fadein 0.4s;
}

#update li:hover {
	background-color: var(--panel-hi);
	border-color: var(--accent-dim);
}

.searchresult {
	position: relative;                 /* anchor for the corner copy button */
	padding: 12px 14px;
	cursor: pointer;
	border-left: 3px solid transparent;
}

.searchresult.open {
	background-color: var(--panel-hi);
	border-left-color: var(--accent);   /* lit when tuned in */
}

.details { display: none; margin-top: 8px; }

.stationname {
	font-size: 115%;
	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; }

/* ---- Audio player ---- */
/* Full card width (no max-width cap), natural browser height so the
   time readout, mute and volume controls all render. */

.audiodiv {
	width: 100%;
	margin: 6px 0;
}

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

/* ---- File details ---- */

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

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

@keyframes fadein {
	from { opacity: 0.35; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#update ul li { animation: none; }
}

/* ============================================================
   swlog-style additions: copy button + UTC playback clock
   (ported from swlog, mapped onto swmp3's blue dark theme).
   Two greens are literal (#62d98f) since the palette has none.
   ============================================================ */

/* Copy-to-clipboard button, pinned to the card's top-right corner.
   Gray at rest -> blue on hover -> green for ~1.2s on a successful
   copy (.ok added by JS). */
.copy-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	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: a lit dial readout.
   The lamp lights blue while playback runs. */
.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;  /* digits don't wiggle while ticking */
}

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

/* +Nd day-rollover badge, green, once playback crosses midnight UTC */
.rec-clock .rc-day {
	font-family: var(--mono);
	font-size: 11px;
	color: #62d98f;
	letter-spacing: .08em;
}

/* ---- swlog logbook link (bottom of an expanded record) ---- */
.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;
}