/* DXCluster SR4DXC — homepage presentation overlay, 2026-10-13.
   Does not change existing filter, search, live or statistics logic. */
:root {--sr4-navy:#061527;--sr4-edge:#224966;--sr4-blue:#329cf4;--sr4-gold:#ffb52d}
body {overflow-x:hidden}
.top,.dashboard310 .top {
  display:flex;gap:clamp(9px,1.25vw,21px);align-items:center;flex-wrap:wrap;
  padding:12px clamp(12px,2.6vw,38px);min-height:74px;
  background:linear-gradient(90deg,#061322,#071b30);border-bottom:1px solid #274563;
  color:#e8f2ff;box-shadow:0 4px 16px #0003;
}
.top a,.dashboard310 .top a{color:#c8d7ea;text-decoration:none}
.top a:hover,.dashboard310 .top a:hover{color:#62c0ff}
.top .brand,.dashboard310 .top .brand{
  display:inline-flex;gap:11px;align-items:center;white-space:nowrap;
  margin-right:auto;font-size:clamp(19px,2.0vw,34px);line-height:1.1;
  color:#fff;font-weight:800;letter-spacing:-.025em;
}
.top .brand strong,.dashboard310 .top .brand strong{color:#299bff}
.sr4-brand-icon{font-size:clamp(25px,2.5vw,37px);line-height:1}
.top .sr4-nav-home,.top .sr4-nav-spots,.dashboard310 .top .sr4-nav-home,.dashboard310 .top .sr4-nav-spots{
  padding:10px 8px;font-weight:800;color:#afc9e8;font-size:13px
}
body:not(.dashboard310) .top .sr4-nav-home,
.dashboard310 .top a.sr4-active{color:#37b5ff;border-bottom:2px solid #299bff}
.top .nav-external,.dashboard310 .top .nav-external{
  border:none;background:transparent;padding:8px 1px;border-radius:0;color:#d0e1f3;
}
.top .grow,.dashboard310 .top .grow{flex:0 0 0;min-width:0}
.top select,.dashboard310 .top select{padding:7px 9px;background:#10283d;color:#dcebf9;border:1px solid #355169;border-radius:7px}
.top #clock,.dashboard310 .top #clock{color:#96bad6;font-size:11px;white-space:nowrap}
/* The identical source and tonal treatment is used across all page headers. */
.hero.sr4-home-hero,.dashboard310 .dash-hero{
  position:relative;isolation:isolate;
  background-image:url('/static/images/sr4dxc-sunset-20261013.webp')!important;
  background-position:center 52%!important;background-size:cover!important;
  border-bottom:0!important;
  box-shadow:inset 0 -8px 12px -8px #0006;
}
.hero.sr4-home-hero{
  min-height:240px;height:clamp(240px,23.75vw,400px);padding:0;
}
.sr4-hero-caption{
  position:absolute;bottom:18px;left:clamp(14px,2vw,30px);
  padding:7px 12px;color:#fff;border-radius:7px;
  background:rgba(3,14,28,.56);backdrop-filter:blur(3px);
  font-size:11px;letter-spacing:.08em;font-weight:700;
}
.sr4-hero-caption a{color:#e7f4ff;font-weight:700}
.dashboard310 .dash-hero{min-height:238px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:24px clamp(18px,3vw,48px);color:white;text-shadow:0 2px 8px #001427;
}
.dashboard310 .dash-hero h1{color:white;margin:6px 0;font-size:clamp(28px,3vw,43px)}
.dashboard310 .dash-hero p{color:#fff;text-shadow:0 1px 7px #001427}
/* Home: preserve the original markup/IDs inside the table, filters and toolbar. */
body.sr4-home{background:#071727;color:#e6f0fb;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif}
body.sr4-home main{padding:13px clamp(12px,1.4vw,25px) 18px}
body.sr4-home .toolbar{margin:0 0 12px;gap:10px;justify-content:flex-start;
 padding:10px 13px;background:#0b2035;border:1px solid #284761;border-radius:10px}
body.sr4-home .toolbar button{padding:7px 11px;border-radius:6px}
body.sr4-home .toolbar #status{color:#aed4f2}
body.sr4-home .toolbar .grow{flex:1 1 auto}
body.sr4-home #filters{color:#e7f2ff;background:#0e253b;border:1px solid #2c506a;border-radius:10px}
body.sr4-home #filters .filter-chip{background:#0b2237;color:#e9f3ff}
body.sr4-home #filters .filter-chip.selected{color:#fff}
body.sr4-home #filters label input:not([type=checkbox]),
body.sr4-home #filters label select:not([multiple]){color:#e8f2ff;background:#10263d;border-color:#43627e}
.sr4-content-grid{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(300px,1fr);gap:16px;align-items:start}
.sr4-spots-pane,.sr4-activity-card,.sr4-quicklink{
 background:#081b2d;border:1px solid #294761;border-radius:11px;
 box-shadow:0 5px 20px rgba(0,0,0,.23);min-width:0;overflow:hidden;
}
.sr4-pane-title,.sr4-activity-title{
 padding:12px 15px;display:flex;align-items:center;gap:10px;
 font-weight:800;font-size:clamp(13px,1.08vw,18px);color:#e9f4ff;
 border-bottom:1px solid #203e57;background:#0b2338;
}
.sr4-pane-title strong{font-weight:800}
.sr4-pane-title .sr4-spot-live{font-weight:700;color:#4ce680;font-size:12px;margin-left:auto;white-space:nowrap}
.sr4-pane-title .sr4-live-dot{display:inline-block;width:9px;height:9px;margin-right:5px;
 border-radius:50%;background:#36e670;box-shadow:0 0 7px #36e670}
.sr4-spots-pane .table-wrap{overflow-x:auto}
.sr4-spots-pane table{border-collapse:collapse;width:100%;min-width:820px;table-layout:auto;
 color:#e9f3fd;font-size:13px}
.sr4-spots-pane th{background:#163954;color:#f0f7ff;font-size:12px;padding:10px 8px;
 white-space:nowrap;text-align:left;width:auto!important}
.sr4-spots-pane td{padding:6px 8px;height:28px;white-space:nowrap;border-bottom:1px solid #193149}
.sr4-spots-pane th:nth-child(5),.sr4-spots-pane td:nth-child(5){min-width:160px;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.sr4-spots-pane tbody tr:nth-child(odd){background:#091e32}
.sr4-spots-pane tbody tr:nth-child(even){background:#071929}
.sr4-spots-pane tbody tr:hover{background:#153a59}
.sr4-spots-pane tbody tr.new{background:#205d76}
.sr4-spots-pane td:first-child a{color:#ffbe28;font-weight:800}
.sr4-spots-pane td:last-child a{color:#bedcf8}
.sr4-spots-pane .qrg{min-width:0;background:none!important;color:#e8f4ff!important;
 border:0!important;border-radius:0;font-weight:650;text-align:left;padding:0;white-space:nowrap}
.sr4-spots-pane .mode-tag{border-radius:4px;padding:3px 6px;font-weight:700;font-size:11px}
.sr4-spots-pane .footerbar{padding:9px 14px;color:#b4cadd}
.sr4-sidebar{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.sr4-activity-title{font-size:clamp(13px,1.08vw,18px)}
.sr4-activity-title span{font-size:11px;font-weight:450;color:#abc2d6}
.sr4-map-wrap{position:relative;background:#0a1d30;padding:7px;min-height:165px}
#sr4-world-map{display:block;width:100%;aspect-ratio:2.0/1;max-height:320px}
#sr4-world-status{padding:0 13px 10px;min-height:21px;color:#8fb2cd;font-size:11px}
.sr4-quicklinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sr4-quicklink{text-align:center;display:flex;flex-direction:column;gap:7px;justify-content:center;
 padding:22px 5px 16px;min-height:140px;color:#dcecff;text-decoration:none;
 background:linear-gradient(145deg,#0b2b46,#092038)}
.sr4-quicklink:hover{background:#143954;color:#fff;border-color:#4284be}
.sr4-quicklink .sr4-quick-icon{font-size:28px;color:#68b8ff}
.sr4-quicklink strong{font-size:clamp(10px,1vw,15px);letter-spacing:-.01em}
.sr4-quicklink small{font-size:11px;color:#b8cce0}
body.sr4-home footer{background:#071727;color:#9eb5cb;border-color:#244059}
body.sr4-home footer a{color:#9bd0fc}
/* Preserve light/dark preference without sacrificing contrast. */
html[data-theme=light] body.sr4-home{background:#eef4fa;color:#172536}
html[data-theme=light] body.sr4-home .toolbar{background:#edf5fb;border-color:#c3d5e5}
html[data-theme=light] body.sr4-home #status{color:#225f88}
html[data-theme=light] body.sr4-home #filters{background:#edf5fb;color:#172536;border-color:#bed4e7}
html[data-theme=light] body.sr4-home #filters .filter-chip:not(.selected){background:#f8fbff;color:#172536}
html[data-theme=light] body.sr4-home footer{background:#eef4fa;color:#435e76}
@media(max-width:1160px){
 .top .brand,.dashboard310 .top .brand{flex:1 1 100%;margin:0}
 .top #clock,.dashboard310 .top #clock{margin-left:auto}
 .sr4-content-grid{grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr)}
 .sr4-quicklink small{display:none}
}
@media(max-width:820px){
 .sr4-content-grid{grid-template-columns:minmax(0,1fr)}
 .sr4-sidebar{grid-row:auto}
 .sr4-quicklink{min-height:102px;padding:12px 5px}
 .dashboard310 .dash-hero{min-height:190px}
}
@media(max-width:560px){
 .hero.sr4-home-hero{height:205px;min-height:205px;background-position:38% center!important}
 .sr4-hero-caption{font-size:9px;bottom:9px;left:10px}
 .top,.dashboard310 .top{gap:8px;padding:9px 10px}
 .top .brand,.dashboard310 .top .brand{font-size:23px}
 .top a:not(.brand),.dashboard310 .top a:not(.brand){font-size:11px}
 .top .sr4-nav-home,.top .sr4-nav-spots{padding:5px}
 body.sr4-home main{padding:8px}
 .sr4-pane-title,.sr4-activity-title{font-size:14px;padding:10px}
}
/* Consistent navigation ordering on all pages (including dashboard templates). */
.top > .brand,.dashboard310 .top > .brand{order:1}
.top > .sr4-nav-home,.dashboard310 .top > .sr4-nav-home{order:2}
.top > .sr4-nav-spots,.dashboard310 .top > .sr4-nav-spots{order:3}
.top > a[href="/propagation.html"],.dashboard310 .top > a[href="/propagation.html"]{order:4}
.top > a[href="/plots.html"],.dashboard310 .top > a[href="/plots.html"]{order:5}
.top > a[href="https://websdr.jestok.com/"],.dashboard310 .top > a[href="https://websdr.jestok.com/"]{order:6}
.top > a[href="https://sp4.jestok.com/"],.dashboard310 .top > a[href="https://sp4.jestok.com/"]{order:7}
.top > a[href="/cookies.html"],.dashboard310 .top > a[href="/cookies.html"]{order:8}
.top > a[href="/privacy.html"],.dashboard310 .top > a[href="/privacy.html"]{order:9}
.top > .grow,.dashboard310 .top > .grow{order:10}
.top > #theme,.dashboard310 .top > #theme{order:11}
.top > #lang,.dashboard310 .top > #lang{order:12}
.top > #clock,.dashboard310 .top > #clock{order:13}
.top a.nav-external,.dashboard310 .top a.nav-external{background:transparent;border:none;border-radius:0;padding:8px 1px;color:#d0e1f3}
.sr4-map-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 12px;
 padding:5px 7px;color:#bed1e1;font-size:10px}
.sr4-map-legend span{white-space:nowrap}
.sr4-map-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}

/* 2026-10-14: narrower sidebar, matching headers, accessible map and donations. */
.hero.sr4-home-hero{height:238px;min-height:238px}
.sr4-content-grid{grid-template-columns:minmax(0,3fr) minmax(300px,1fr);gap:13px}
.sr4-activity-card,.sr4-support-card{background:#081b2d;border:1px solid #294761;border-radius:11px;min-width:0;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.23)}
.sr4-map-wrap{position:relative;min-height:135px;padding:5px;touch-action:pan-y}
#sr4-world-map{width:100%;height:auto;aspect-ratio:1.75 / 1;max-height:none;cursor:crosshair;touch-action:pan-y}
.sr4-map-controls{position:absolute;top:11px;right:10px;display:flex;gap:5px;z-index:2}
.sr4-map-controls button{width:25px;height:26px;line-height:1;padding:0;border-radius:5px;background:#143956;color:#eff6ff;border:1px solid #466b87;cursor:pointer;font-size:18px}
.sr4-map-controls button:hover{background:#21608b}
.sr4-map-popover{position:absolute;z-index:10;left:8px;top:8px;width:min(270px,calc(100% - 16px));max-height:175px;overflow:auto;padding:10px;background:rgba(4,18,32,.97);color:#eaf5ff;border:1px solid #4989b2;border-radius:8px;box-shadow:0 8px 25px #0008;pointer-events:none;font-size:12px}
.sr4-map-popover[hidden]{display:none!important}
.sr4-map-popover b{display:block;margin-bottom:6px;color:#8dd4ff;font-size:11px}
.sr4-map-popover ul{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.sr4-map-popover li{display:flex;gap:10px;justify-content:space-between;align-items:baseline;border-bottom:1px solid #27465c;padding:2px 0}
.sr4-map-popover li strong{font-weight:800;color:#f8c950}
.sr4-map-popover li span{white-space:nowrap;font-variant-numeric:tabular-nums}
.sr4-map-popover .more{color:#a8bdce;font-size:10px;padding-top:6px}
.sr4-map-help{padding:0 12px 8px;font-size:10px;color:#90b4cf}
.sr4-map-legend{gap:5px 8px}
.sr4-quicklinks{gap:6px}
.sr4-quicklink{min-height:112px;padding:15px 3px 12px;gap:5px}
.sr4-quicklink .sr4-quick-icon{font-size:24px}
.sr4-quicklink strong{font-size:clamp(9px,.85vw,13px)}
.sr4-quicklink small{font-size:10px;line-height:1.2}
.sr4-support-card{padding:17px 16px;display:grid;gap:10px;text-align:center;background:linear-gradient(145deg,#0b2a42,#091b2d)}
.sr4-support-card h2{margin:0;color:#e7f4ff;font-size:16px}
.sr4-support-card p{margin:0;color:#bbd0e1;font-size:12px;line-height:1.6}
.sr4-support-card .sr4-paypal-form{margin:4px 0 0}
.sr4-support-card .sr4-paypal-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;background:#ffc439;color:#122039;border:1px solid #f2ad23;border-radius:8px;font-size:13px;font-weight:800;padding:11px 10px;cursor:pointer}
.sr4-support-card .sr4-paypal-btn:hover{background:#ffd46b}
.sr4-support-card .sr4-paypal-symbol{font-style:italic;font-size:18px;font-weight:950;color:#003087}
.sr4-support-card .sr4-bank-label{color:#a7bdd1;font-size:11px;margin:3px 0 0}
.sr4-support-card .sr4-bank-account{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(10px,.85vw,13px);letter-spacing:.025em;color:#fff;overflow-wrap:anywhere}
.sr4-support-card .sr4-bank-account button{border:0;background:transparent;color:#85c9ff;font-size:11px;cursor:pointer;padding:4px}
@media(max-width:1260px){.sr4-content-grid{grid-template-columns:minmax(0,2.35fr) minmax(280px,1fr)}}
@media(max-width:900px){.sr4-content-grid{grid-template-columns:minmax(0,1fr)}.sr4-quicklink{min-height:99px}.sr4-support-card .sr4-bank-account{font-size:14px}}
@media(max-width:560px){.hero.sr4-home-hero{height:190px;min-height:190px}.sr4-map-wrap{min-height:130px}.sr4-map-popover{font-size:11px}.sr4-support-card{padding:16px 10px}}
html[data-theme=light] body.sr4-home .sr4-support-card{background:#e1edf7;border-color:#b4cce0}
html[data-theme=light] body.sr4-home .sr4-support-card h2{color:#152c40}
html[data-theme=light] body.sr4-home .sr4-support-card p,html[data-theme=light] body.sr4-home .sr4-bank-label{color:#3e617c}
html[data-theme=light] body.sr4-home .sr4-bank-account{color:#18344e}


.sr4-hero-wordmark{
  position:absolute;left:clamp(16px,2vw,30px);top:clamp(14px,2vw,22px);
  font-size:clamp(24px,4.1vw,56px);font-weight:900;letter-spacing:.08em;line-height:1;
  color:#f6fbff;text-shadow:0 2px 10px rgba(0,0,0,.38),0 0 18px rgba(6,21,39,.45);
  padding:6px 10px;border-radius:8px;
  background:linear-gradient(180deg,rgba(5,18,32,.18),rgba(5,18,32,.06));
  backdrop-filter:blur(1px);pointer-events:none;user-select:none;
}
@media(max-width:560px){
  .sr4-hero-wordmark{font-size:clamp(20px,7vw,34px);top:10px;left:10px;padding:4px 8px}
}
