:root {
  --dxpe-bg:#070a0f;
  --dxpe-panel:#0c111a;
  --dxpe-panel2:#101722;
  --dxpe-text:#e8f0ff;
  --dxpe-muted:#7d8da8;
  --dxpe-accent:#5eead4;
  --dxpe-accent2:#38bdf8;
  --dxpe-border:rgba(255,255,255,.08);
}

.dxpe-kicker {
  display:block;
  margin-bottom:3px;
  color:var(--dxpe-muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* QSL-tagged posts: dark "letter" treatment with restrained airmail details.
   The class is only added when the post contains actual text. */
.single.dxpe-qsl-letter .wp-block-post-content,
.single.dxpe-qsl-letter .entry-content {
  position:relative;
  box-sizing:border-box;
  padding:clamp(30px,5vw,58px) !important;
  color:var(--dxpe-text);
  background:
    linear-gradient(180deg,rgba(16,23,34,.98),rgba(10,15,23,.98));
  border:1px solid rgba(94,234,212,.16);
  border-radius:14px;
  box-shadow:
    0 22px 70px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}

/* Airmail stripe: visible, but still in the DXing.world palette. */
.single.dxpe-qsl-letter .wp-block-post-content::before,
.single.dxpe-qsl-letter .entry-content::before {
  content:"QSL CONFIRMATION";
  display:block;
  position:relative;
  margin:-8px 0 30px;
  padding:18px 0 0;
  color:var(--dxpe-muted);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-top:5px solid transparent;
  border-image:repeating-linear-gradient(
    135deg,
    var(--dxpe-accent2) 0 13px,
    transparent 13px 20px,
    var(--dxpe-accent) 20px 33px,
    transparent 33px 40px
  ) 5;
}

/* A second subtle airmail edge at the bottom ties the panel together. */
.single.dxpe-qsl-letter .wp-block-post-content::after,
.single.dxpe-qsl-letter .entry-content::after {
  content:"";
  display:block;
  height:5px;
  margin:34px 0 -8px;
  background:repeating-linear-gradient(
    135deg,
    var(--dxpe-accent2) 0 13px,
    transparent 13px 20px,
    var(--dxpe-accent) 20px 33px,
    transparent 33px 40px
  );
  opacity:.82;
}

.single.dxpe-qsl-letter .wp-block-post-content :where(p,li,blockquote),
.single.dxpe-qsl-letter .entry-content :where(p,li,blockquote) {
  color:var(--dxpe-text);
}
.single.dxpe-qsl-letter .wp-block-post-content :where(h1,h2,h3,h4),
.single.dxpe-qsl-letter .entry-content :where(h1,h2,h3,h4) {
  color:var(--dxpe-text);
}
.single.dxpe-qsl-letter .wp-block-post-content a,
.single.dxpe-qsl-letter .entry-content a {
  color:var(--dxpe-accent);
}
.single.dxpe-qsl-letter .wp-block-post-content blockquote,
.single.dxpe-qsl-letter .entry-content blockquote {
  border-left-color:rgba(94,234,212,.38);
  background:rgba(255,255,255,.025);
}

.dxpe-station,
.dxpe-distance,
.dxpe-audio {
  box-sizing:border-box;
  width:100%;
  margin:30px 0;
  color:var(--dxpe-text);
  background:linear-gradient(180deg,rgba(16,23,34,.98),rgba(12,17,26,.98));
  border:1px solid var(--dxpe-border);
  border-radius:14px;
  overflow:hidden;
}

.dxpe-station-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 18px;
}
.dxpe-station-call { font-size:clamp(1.45rem,3vw,2.1rem); font-weight:750; line-height:1; letter-spacing:-.035em; }
.dxpe-station-sub { margin-top:8px; color:var(--dxpe-muted); font-size:.92rem; }
.dxpe-status { flex:0 0 auto; padding:7px 9px; color:var(--dxpe-accent); border:1px solid rgba(94,234,212,.25); border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.08em; }
.dxpe-station-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; border-top:1px solid var(--dxpe-border); }
.dxpe-station-grid > div { padding:15px 24px 17px; border-right:1px solid var(--dxpe-border); }
.dxpe-station-grid > div:last-child { border-right:0; }
.dxpe-station-grid dt { color:var(--dxpe-muted); font-size:.69rem; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.dxpe-station-grid dd { margin:4px 0 0; color:var(--dxpe-text); font-size:.92rem; }

.dxpe-distance-map { padding:12px 12px 0; }
.dxpe-distance-map svg { display:block; width:100%; height:auto; }
.dxpe-ocean { fill:#070a0f; }
.dxpe-land path { fill:#18212c; stroke:rgba(255,255,255,.10); stroke-width:.8; vector-effect:non-scaling-stroke; }
.dxpe-route path { fill:none; stroke:var(--dxpe-accent); stroke-width:3; stroke-linecap:round; stroke-dasharray:8 7; vector-effect:non-scaling-stroke; }
.dxpe-point { stroke:#070a0f; stroke-width:3; vector-effect:non-scaling-stroke; }
.dxpe-point-home { fill:var(--dxpe-accent2); }
.dxpe-point-station { fill:var(--dxpe-accent); }
.dxpe-distance-meta { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px 18px; border-top:1px solid var(--dxpe-border); }
.dxpe-distance-meta strong { display:block; color:var(--dxpe-text); font-size:.92rem; }
.dxpe-distance-numbers { display:flex; align-items:baseline; gap:12px; white-space:nowrap; }
.dxpe-distance-numbers strong { color:var(--dxpe-accent); font-size:1.12rem; }
.dxpe-distance-numbers span { color:var(--dxpe-muted); font-size:.8rem; }

.dxpe-audio-head { display:flex; align-items:center; gap:14px; padding:17px 20px; }
.dxpe-audio-head strong { display:block; color:var(--dxpe-text); font-size:.95rem; }
.dxpe-audio-head small { display:block; margin-top:3px; color:var(--dxpe-muted); font-size:.8rem; }
.dxpe-audio-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; color:#071015; background:var(--dxpe-accent); border-radius:50%; font-size:.85rem; }
.dxpe-html5-audio { display:block; width:calc(100% - 40px); margin:0 20px 20px; }
.dxpe-box-embed { border-top:1px solid var(--dxpe-border); background:#fff; }
.dxpe-box-embed iframe { display:block; width:100%; height:300px; border:0; }
.dxpe-notice { margin:18px 0; padding:12px 14px; color:var(--dxpe-muted); background:var(--dxpe-panel); border:1px solid var(--dxpe-border); border-radius:10px; font-size:.88rem; }

@media (max-width:700px) {
  .single.dxpe-qsl-post .wp-block-post-content,
  .single.dxpe-qsl-post .entry-content { padding:28px 22px !important; }
  .dxpe-station-head,.dxpe-distance-meta { align-items:flex-start; flex-direction:column; }
  .dxpe-station-grid { grid-template-columns:1fr; }
  .dxpe-station-grid > div { border-right:0; border-bottom:1px solid var(--dxpe-border); }
  .dxpe-station-grid > div:last-child { border-bottom:0; }
  .dxpe-distance-numbers { width:100%; justify-content:space-between; }
  .dxpe-box-embed iframe { height:250px; }
}

/* v0.3 – shared visual language for DX content cards */
.dxpe-station,
.dxpe-distance,
.dxpe-audio {
  position:relative;
  box-shadow:0 16px 44px rgba(0,0,0,.18);
}

.dxpe-card-accent,
.dxpe-station::before,
.dxpe-distance::before,
.dxpe-audio::before {
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--dxpe-accent),var(--dxpe-accent2));
  opacity:.9;
}

.dxpe-card-accent { display:none; }

.dxpe-station-titlewrap { min-width:0; }
.dxpe-station-badges {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.dxpe-frequency {
  flex:0 0 auto;
  padding:7px 10px;
  color:var(--dxpe-text);
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.22);
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.045em;
  white-space:nowrap;
}
.dxpe-station-grid {
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
}
.dxpe-station-link,
.dxpe-audio-foot {
  padding:11px 20px 13px;
  border-top:1px solid var(--dxpe-border);
  text-align:right;
}
.dxpe-station-link a,
.dxpe-audio-foot a {
  color:var(--dxpe-muted);
  font-size:.76rem;
  font-weight:700;
  text-decoration:none;
}
.dxpe-station-link a:hover,
.dxpe-audio-foot a:hover { color:var(--dxpe-accent); }

.dxpe-distance-map {
  background:radial-gradient(circle at 50% 50%,rgba(56,189,248,.045),transparent 55%);
}
.dxpe-distance-numbers strong {
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.dxpe-distance-numbers span::before {
  content:"BEARING ";
  color:var(--dxpe-muted);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
}

.dxpe-audio-icon {
  box-shadow:0 0 0 5px rgba(94,234,212,.07);
}
.dxpe-box-embed {
  background:var(--dxpe-bg);
}
.dxpe-box-embed iframe {
  height:240px;
  background:#fff;
}

@media (max-width:700px) {
  .dxpe-station-badges { justify-content:flex-start; }
  .dxpe-station-grid { grid-template-columns:1fr 1fr; }
  .dxpe-station-grid > div { border-right:0; }
}

@media (max-width:480px) {
  .dxpe-station-grid { grid-template-columns:1fr; }
}


/* v0.3.4 – diagnostics + graceful Box fallback */
.dxpe-debug {
  margin:10px 0 0; padding:10px 12px; overflow:auto;
  color:var(--dxpe-text); background:#070a0f; border:1px solid var(--dxpe-border);
  border-radius:8px; font-size:.76rem; line-height:1.45;
}
.dxpe-box-fallback {
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:20px; border-top:1px solid var(--dxpe-border);
}
.dxpe-box-button {
  display:inline-flex; align-items:center; min-height:44px; padding:10px 14px;
  color:#071015 !important; background:var(--dxpe-accent); border-radius:999px;
  font-size:.82rem; font-weight:800; text-decoration:none !important;
}
.dxpe-box-fallback small { color:var(--dxpe-muted); font-size:.75rem; }

/* v0.4 – R2/native audio player */
.dxpe-audio-toggle {
  appearance:none;
  border:0;
  padding:0;
  cursor:pointer;
  font:inherit;
}
.dxpe-audio-toggle:focus-visible {
  outline:2px solid var(--dxpe-accent2);
  outline-offset:4px;
}
.dxpe-audio-player.is-playing .dxpe-audio-icon {
  box-shadow:0 0 0 6px rgba(94,234,212,.10);
}
.dxpe-play-symbol {
  display:block;
  transform:translateX(1px);
  line-height:1;
  font-size:.78rem;
}
.dxpe-audio-player.is-playing .dxpe-play-symbol {
  transform:none;
  font-size:.66rem;
  letter-spacing:-.08em;
}
.dxpe-player-ui {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:18px 20px 16px;
  border-top:1px solid var(--dxpe-border);
  background:rgba(7,10,15,.32);
}
.dxpe-audio-element {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.dxpe-audio-progress {
  --dxpe-progress:0%;
  width:100%;
  height:6px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--dxpe-accent) 0 var(--dxpe-progress),rgba(255,255,255,.12) var(--dxpe-progress) 100%);
  cursor:pointer;
}
.dxpe-audio-progress::-webkit-slider-runnable-track {
  height:6px;
  border-radius:999px;
  background:transparent;
}
.dxpe-audio-progress::-webkit-slider-thumb {
  width:15px;
  height:15px;
  margin-top:-4.5px;
  -webkit-appearance:none;
  border:3px solid #0c111a;
  border-radius:50%;
  background:var(--dxpe-accent);
  box-shadow:0 0 0 1px rgba(94,234,212,.28);
}
.dxpe-audio-progress::-moz-range-track {
  height:6px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}
.dxpe-audio-progress::-moz-range-progress {
  height:6px;
  border-radius:999px;
  background:var(--dxpe-accent);
}
.dxpe-audio-progress::-moz-range-thumb {
  width:15px;
  height:15px;
  border:3px solid #0c111a;
  border-radius:50%;
  background:var(--dxpe-accent);
}
.dxpe-audio-progress:focus-visible {
  outline:2px solid var(--dxpe-accent2);
  outline-offset:5px;
}
.dxpe-audio-time {
  display:flex;
  align-items:center;
  gap:5px;
  min-width:82px;
  justify-content:flex-end;
  color:var(--dxpe-muted);
  font-size:.74rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dxpe-time-current { color:var(--dxpe-text); }
.dxpe-time-sep { opacity:.45; }
.dxpe-audio-player.has-audio-error .dxpe-player-ui {
  opacity:.7;
}

@media (max-width:520px) {
  .dxpe-player-ui {
    grid-template-columns:1fr;
    gap:11px;
  }
  .dxpe-audio-time {
    width:100%;
    justify-content:space-between;
  }
}

/* v0.4.1 – smart-zoom distance map, aligned with DX Maps palette */
.dxpe-distance-map {
  background:#070a0f;
}
.dxpe-distance-map svg {
  background:#070a0f;
  border-radius:10px;
}
.dxpe-ocean {
  fill:#070a0f;
}
.dxpe-land path {
  fill:#101722;
  stroke:rgba(255,255,255,.10);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
}
.dxpe-route path {
  stroke:#5eead4;
}
.dxpe-point-home {
  fill:#38bdf8;
}
.dxpe-point-station {
  fill:#5eead4;
}


/* v0.4.2 – theme-proof dark map + finer route markers */
.dxpe-distance-map,
.dxpe-distance-map svg {
  background:#070a0f !important;
}
.dxpe-distance-map .dxpe-ocean {
  fill:#070a0f !important;
}
.dxpe-distance-map .dxpe-land path {
  fill:#101722 !important;
  stroke:rgba(255,255,255,.10) !important;
}
.dxpe-distance-map .dxpe-route path {
  fill:none !important;
  stroke:#5eead4 !important;
  stroke-width:2.2 !important;
  stroke-dasharray:7 6 !important;
}
.dxpe-distance-map .dxpe-point {
  stroke:#070a0f !important;
  stroke-width:2 !important;
}
.dxpe-distance-map .dxpe-point-home { fill:#38bdf8 !important; }
.dxpe-distance-map .dxpe-point-station { fill:#5eead4 !important; }


/* v0.4.3 – live station stream action */
.dxpe-station-actions {
  border-top:1px solid var(--dxpe-border);
}
.dxpe-station-actions .dxpe-station-link {
  border-top:0;
}
.dxpe-station-actions .dxpe-station-link + .dxpe-station-stream {
  border-top:1px solid var(--dxpe-border);
}
.dxpe-station-stream {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:10px 20px 12px;
}
.dxpe-stream-label {
  color:var(--dxpe-muted);
  font-size:.76rem;
  font-weight:700;
}
.dxpe-stream-toggle {
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 11px;
  color:#071015;
  background:var(--dxpe-accent);
  border:0;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  font-size:.74rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 0 4px rgba(94,234,212,.06);
}
.dxpe-stream-toggle:hover {
  filter:brightness(1.05);
}
.dxpe-stream-toggle:focus-visible {
  outline:2px solid var(--dxpe-accent2);
  outline-offset:3px;
}
.dxpe-stream-symbol {
  font-size:.68rem;
  line-height:1;
}
.dxpe-station-stream.is-playing .dxpe-stream-toggle {
  background:var(--dxpe-accent2);
}
.dxpe-station-stream.has-stream-error .dxpe-stream-toggle {
  opacity:.55;
}
.dxpe-stream-audio {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
}
@media (max-width:700px) {
  .dxpe-station-stream {
    justify-content:space-between;
  }
}