/*
 * Bryansk Sreda / sports.php — consolidated modern journal layout, 2026-10-21.
 * Presentation only. Deliberately preserves all original element ids, form wiring,
 * CAT/Cabrillo/ADIF/JSON, F5–F8, and Band Map JS.
 * Loaded after sports-journal.css and sports-bandmap.css.
 */
#sjApp {
  --sj-bg: #10243c;
  --sj-bg2: #17324f;
  --sj-line: #33506d;
  --sj-text: #eaf5ff;
  --sj-muted: #b2c5d8;
  --sj-accent: #66b9ff;
  --sj-input: #0b2037;
  --sj-good: #3ad4a2;
  --sj-bad: #ff9ca6;
  --sj-radius: 14px;
  color: var(--sj-text);
  min-width: 0;
}
html[data-theme="light"] #sjApp,
html[data-sreda-skin="light"] #sjApp {
  --sj-bg:#fff;--sj-bg2:#eef5fc;--sj-line:#c8d9e9;
  --sj-text:#1b344d;--sj-muted:#59728a;--sj-accent:#156fb5;
  --sj-input:#f8fbff;--sj-good:#148268;--sj-bad:#bc4352;
}
html[data-theme="dark"] #sjApp {
  --sj-bg:#10243c;--sj-bg2:#17324f;--sj-line:#33506d;
  --sj-text:#eaf5ff;--sj-muted:#b2c5d8;--sj-accent:#66b9ff;
  --sj-input:#0b2037;--sj-good:#3ad4a2;--sj-bad:#ff9ca6;
}
html[data-sreda-skin="tactical"] #sjApp,
html[data-sreda-skin="field-day"] #sjApp {
  --sj-bg:#172e26;--sj-bg2:#213e31;--sj-line:#456850;
  --sj-text:#f1f9ed;--sj-muted:#bdd2bd;--sj-accent:#a4e17f;--sj-input:#10251c;
}
html[data-sreda-skin="tactical-red"] #sjApp {
  --sj-bg:#2a1d22;--sj-bg2:#382830;--sj-line:#684650;
  --sj-text:#fff0f2;--sj-muted:#dcc0c8;--sj-accent:#ff9aa4;--sj-input:#23171d;
}
html[data-sreda-skin="retro"] #sjApp,
html[data-sreda-skin="honduras"] #sjApp {
  --sj-bg:#302e25;--sj-bg2:#3c392c;--sj-line:#666149;
  --sj-text:#f9f1d2;--sj-muted:#d2c6a2;--sj-accent:#f0d58b;--sj-input:#27251c;
}
html[data-sreda-skin="cyber"] #sjApp,
html[data-sreda-skin="signal"] #sjApp {
  --sj-bg:#0e2832;--sj-bg2:#143640;--sj-line:#32606c;
  --sj-text:#e7fdff;--sj-muted:#b8d9df;--sj-accent:#68e1df;--sj-input:#09212a;
}
html[data-sreda-skin="cosmos"] #sjApp {
  --sj-bg:#1a2240;--sj-bg2:#293252;--sj-line:#4b5580;
  --sj-text:#f5f2ff;--sj-muted:#cbc8e5;--sj-accent:#b9bcff;--sj-input:#151a35;
}
html[data-sreda-skin="glass"] #sjApp {
  --sj-bg:#1b3b50;--sj-bg2:#275066;--sj-line:#668da0;
  --sj-text:#f4fcff;--sj-muted:#cde3ed;--sj-accent:#93dfff;--sj-input:#132f43;
}
html[data-sreda-skin="arctic"] #sjApp {
  --sj-bg:#fff;--sj-bg2:#eaf6fb;--sj-line:#bfd9e8;
  --sj-text:#173c54;--sj-muted:#57788b;--sj-accent:#0873ae;--sj-input:#f5fcff;
  --sj-good:#168263;--sj-bad:#b33648;
}
html[data-sreda-skin="classic-xp"] #sjApp,
html[data-sreda-skin="win95"] #sjApp {
  --sj-bg:#fff;--sj-bg2:#eaf0f8;--sj-line:#b8c6d7;
  --sj-text:#1b314c;--sj-muted:#596b7f;--sj-accent:#125cb3;--sj-input:#fff;
  --sj-good:#168263;--sj-bad:#b33648;
}

/* Site modes: keep exactly the shared site's width in Ordinary mode,
   allow a wider working desktop in Adaptive mode. */
#sjApp.sj.sj.sj {
  width: min(100% - 32px, 1740px) !important;
  max-width: 1740px !important;
  margin-inline:auto !important;
  padding: 24px 0 48px !important;
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}
html[data-sreda-layout="classic"] body #sjApp.sj.sj.sj {
  width:min(1250px, calc(100% - 40px)) !important;
  max-width:1250px !important;
}
#sjApp *,#sjApp *::before,#sjApp *::after {box-sizing:border-box}
#sjApp .sj-heading {
  align-items:center;gap:16px;margin:0 0 20px;
}
#sjApp .sj-heading h1 {font-size:clamp(25px,2.25vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
#sjApp .sj-heading-actions {align-items:center;gap:10px}
#sjApp .sj-status {font-size:11px;line-height:1.3;padding:9px 11px;background:var(--sj-bg);border-color:var(--sj-line);border-radius:10px}
#sjApp .sj-cat-shortcut {min-height:38px;border-radius:10px;padding:9px 12px;box-shadow:none;font-size:12px}

/* One grid, no independent page-wide overflow. Sidebars stay in view. */
#sjApp .sj-body-layout {
  display:grid !important;
  grid-template-columns:minmax(164px,190px) minmax(0,1fr) minmax(228px,255px) !important;
  gap:14px !important;
  align-items:start;
  min-width:0;
}
#sjApp .sj-macro-sidebar {grid-column:1;grid-row:1;position:sticky;top:82px;min-width:0;max-height:calc(100dvh - 96px);z-index:8}
#sjApp .sj-body-main {grid-column:2;grid-row:1;min-width:0}
#sjApp .sj-bandmap-sidebar {grid-column:3;grid-row:1;position:sticky;top:82px;min-width:0;max-height:calc(100dvh - 96px);z-index:8}
#sjApp .sj-body-main > * {min-width:0}
#sjApp .sj-card {
  min-width:0;margin-bottom:14px;padding:18px;
  color:var(--sj-text);background:var(--sj-bg);
  border:1px solid var(--sj-line);border-radius:var(--sj-radius);
  box-shadow:0 6px 22px rgba(0,0,0,.075);
}
#sjApp .sj-card h2 {font-size:17px;line-height:1.35;font-weight:800;color:var(--sj-text);letter-spacing:-.015em}
#sjApp .sj-card-head {gap:12px;margin-bottom:14px}
#sjApp .sj-card-head p {color:var(--sj-muted)}
#sjApp label {color:var(--sj-muted)}
#sjApp input:not([type="file"]):not([type="checkbox"]),
#sjApp select {
  min-width:0;width:100%;background:var(--sj-input);color:var(--sj-text);
  border:1px solid var(--sj-line);border-radius:9px;
}
#sjApp input::placeholder{color:var(--sj-muted);opacity:.85}
#sjApp input:focus-visible,#sjApp select:focus-visible,#sjApp button:focus-visible,#sjApp a:focus-visible{
  outline:2px solid var(--sj-accent);outline-offset:2px;
}
#sjApp button:not(.sj-primary),#sjApp .sj-file {color:var(--sj-text);background:var(--sj-bg2);border-color:var(--sj-line)}
#sjApp button:hover {filter:brightness(1.08)}
#sjApp .sj-primary {background:#1886db;color:#fff;border-color:#1886db}
#sjApp .sj-danger {color:var(--sj-bad)!important}

/* Left-side audio macro rack. All original generated inputs remain intact. */
#sjApp .sj-macro-panel {
  display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 96px);
  overflow-y:auto;scrollbar-width:thin;padding:13px;margin:0;
}
#sjApp .sj-macro-panel .sj-card-head {display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-bottom:11px}
#sjApp .sj-macro-panel h2 {font-size:15px}
#sjApp #sjStopAudio {white-space:normal;line-height:1.3;text-align:center;padding:8px 6px;font-size:11px}
#sjApp .sj-macro-panel #sjMacros {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px}
#sjApp .sj-macro-panel .sj-macro {min-width:0;margin:0;padding:10px;border:1px solid var(--sj-line);border-radius:10px;background:var(--sj-bg2)}
#sjApp .sj-macro strong {font-size:12px;margin:0 0 7px}
#sjApp .sj-macro-picker {gap:5px;flex-wrap:wrap;min-width:0}
#sjApp .sj-macro-upload {width:100%;min-height:33px;padding:6px 7px;font-size:11px;white-space:normal;line-height:1.25}
#sjApp .sj-macro-file {flex-basis:100%;font-size:10px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sj-muted)}
#sjApp .sj-macro-panel .sj-macro button {width:100%;white-space:normal;font-size:11px;padding:7px 6px}

/* The QSO work area gets the available width. */
#sjApp .sj-workspace {display:grid;grid-template-columns:minmax(0,1fr)!important;gap:0!important;min-width:0}
#sjApp .sj-workspace-main {grid-column:auto;min-width:0}
#sjApp .sj-correspondents {grid-column:auto;position:static;min-width:0}
#sjApp .sj-contest-label {width:min(330px,100%);min-width:180px}
#sjApp .sj-contest-label select {min-width:0;width:100%}
#sjApp .sj-metrics {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
#sjApp .sj-metrics>div {min-width:0;padding:12px 10px;gap:6px;border-radius:10px;background:var(--sj-bg2);border-color:var(--sj-line)}
#sjApp .sj-metrics span {line-height:1.3;font-size:10px;color:var(--sj-muted)}
#sjApp .sj-metrics strong {font-size:clamp(16px,1.38vw,21px);line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#sjApp .sj-tours {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}
#sjApp .sj-tour {min-width:0;padding:11px;border-radius:10px}
#sjApp .sj-tour strong {font-size:12px}
#sjApp .sj-tour b {font-size:17px}
#sjApp .sj-tour small,#sjApp .sj-tour p {font-size:10px;line-height:1.45}

/* Two sensible, balanced QSO entry rows. No giant Modulation control. */
#sjApp .sj-entry {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px 9px;align-items:end}
#sjApp .sj-entry > * {grid-column:span 2;min-width:0;margin:0}
#sjApp .sj-entry > .sj-date-field {grid-column:span 2;min-width:0}
#sjApp .sj-entry > .sj-mode-field {grid-column:span 2;width:auto;max-width:100%}
#sjApp .sj-entry > .sj-call-field {grid-column:span 4;min-width:0}
#sjApp .sj-entry > label:nth-of-type(5) {grid-column:span 3}
#sjApp .sj-entry > label:nth-of-type(6) {grid-column:span 2}
#sjApp .sj-entry > label:nth-of-type(7) {grid-column:span 4}
#sjApp .sj-entry > #sjAdd {grid-column:span 3;min-height:43px;align-self:end;white-space:normal}
#sjApp .sj-entry input:not([type="checkbox"]),#sjApp .sj-entry select {min-height:43px;font-size:14px;line-height:1.25;padding:9px 9px}
#sjApp .sj-entry #sjCall {font-size:21px!important;letter-spacing:.01em}
#sjApp .sj-entry label {gap:6px;font-size:11px;line-height:1.2}
#sjApp .sj-entry-date {display:block;min-height:43px;padding:11px 8px;background:var(--sj-input);border:1px solid var(--sj-line);border-radius:9px;color:var(--sj-text);font-size:13px!important}
#sjApp .sj-date-field {align-self:end;display:flex;flex-direction:column;gap:6px}
#sjApp .sj-date-label {font-size:11px;font-weight:700;color:var(--sj-muted)}
#sjApp .sj-call-hint {min-height:0;font-size:10px}
#sjApp .sj-notice {font-size:11px;line-height:1.55}

/* QSO table and operator tools: breathe without overflowing the page. */
#sjApp .sj-scroll {width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--sj-line);border-radius:10px}
#sjApp .sj-custom-columns {width:100%;min-width:700px;table-layout:fixed;border-collapse:separate;border-spacing:0}
#sjApp .sj-custom-columns th {font-size:11px;line-height:1.4;padding:10px 14px 10px 9px;color:var(--sj-muted);background:var(--sj-bg2)}
#sjApp .sj-custom-columns td {font-size:12px;line-height:1.5;padding:10px 9px;color:var(--sj-text)}
#sjApp .sj-custom-columns .sj-callsign {color:var(--sj-accent)}
#sjApp .sj-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#sjApp .sj-actions button,#sjApp .sj-actions .sj-file {white-space:normal;min-height:36px;font-size:11px;line-height:1.25;padding:9px 10px}
#sjApp .sj-correspondents-head {margin-bottom:12px;gap:8px}
#sjApp .sj-correspondents-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#sjApp .sj-correspondent-tour {min-width:0;min-height:130px;overflow:hidden;background:var(--sj-bg2);border-color:var(--sj-line)}
#sjApp .sj-correspondent-tour-head {padding:9px 6px;font-size:11px}
#sjApp .sj-correspondent-call {padding:7px 3px;font-size:12px;color:var(--sj-text)}
#sjApp .sj-cat {scroll-margin-top:96px;margin-top:0}
#sjApp .sj-cat-grid {gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
#sjApp .sj-cat-reading > div {background:var(--sj-bg2);border-color:var(--sj-line)}

/* Right-side narrow vertical Band Map. Frequency lines and callsigns from original JS. */
#sjApp .sj-bandmap-vertical {
  display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 96px);
  margin:0;padding:12px;overflow:hidden;
}
#sjApp .sj-bandmap-vertical .sj-bandmap-head {display:block;margin-bottom:8px}
#sjApp .sj-bandmap-vertical h2 {font-size:15px;line-height:1.35}
#sjApp .sj-bandmap-vertical .sj-bandmap-description {display:none}
#sjApp .sj-bandmap-vertical .sj-bandmap-controls {display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;margin-top:9px;padding:7px;background:var(--sj-bg2);border-color:var(--sj-line)}
#sjApp .sj-bandmap-vertical .sj-bandmap-controls strong {font-size:12px;white-space:nowrap}
#sjApp .sj-bandmap-vertical .sj-bandmap-controls span {font-size:10px}
#sjApp .sj-bandmap-vertical .sj-dx-live-bar {display:flex;align-items:center;gap:6px;margin:0 0 8px;padding:8px;background:var(--sj-bg2);border-color:var(--sj-line);font-size:10px}
#sjApp .sj-bandmap-vertical #sjDxStatus {flex-basis:100%;font-size:10px}
#sjApp .sj-bandmap-vertical #sjDxCount {font-size:10px}
#sjApp .sj-bandmap-vertical #sjDxReload {font-size:10px;padding:6px 7px;line-height:1.2;white-space:normal}
#sjApp .sj-bandmap-vertical .sj-bandmap-toolbar {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px;margin-bottom:8px;font-size:10px;color:var(--sj-muted)}
#sjApp .sj-bandmap-vertical .sj-bandmap-buttons {display:flex;gap:3px}
#sjApp .sj-bandmap-vertical .sj-bandmap-buttons button {font-size:10px;min-width:27px;padding:5px}
#sjApp .sj-bandmap-vertical .sj-bandmap-scroll {flex:1;min-height:190px;width:100%;overflow-y:auto;overflow-x:hidden;padding:0;scrollbar-width:thin}
#sjApp .sj-bandmap-vertical .sj-bandmap-scale {width:100%;min-width:0!important;min-height:740px!important;height:740px!important;margin:2px 0!important;background:var(--sj-bg2);border-color:var(--sj-line);border-radius:9px}
#sjApp .sj-bandmap-vertical .sj-band-track {left:44px}
#sjApp .sj-bandmap-vertical .sj-band-tick {left:40px}
#sjApp .sj-bandmap-vertical .sj-band-tick-label {font:10px/1.2 Consolas,'Courier New',monospace;color:var(--sj-muted)}
#sjApp .sj-bandmap-vertical .sj-band-spot-5m {font:600 11px/14px Consolas,'Courier New',monospace!important;background:transparent!important;color:var(--sj-accent)!important;border:0!important;padding:0 2px!important;box-shadow:none!important}
#sjApp .sj-bandmap-vertical .sj-band-connector {stroke:var(--sj-muted);stroke-width:1.05;opacity:.78}
#sjApp .sj-bandmap-vertical .sj-band-connector-dot {fill:var(--sj-accent)}
#sjApp .sj-bandmap-vertical .sj-band-current-line {border-top-color:#ef8b73}

/* Compact screens: preserve input accessibility rather than squeezing 3 columns. */
@media(max-width:1400px) {
  #sjApp .sj-body-layout {grid-template-columns:154px minmax(0,1fr) 224px!important;gap:10px!important}
  #sjApp .sj-card {padding:14px}
}
@media(max-width:1120px) {
  #sjApp .sj-body-layout {grid-template-columns:minmax(0,1fr) 230px!important;gap:12px!important}
  #sjApp .sj-body-main {grid-column:1;grid-row:1}
  #sjApp .sj-bandmap-sidebar {grid-column:2;grid-row:1}
  #sjApp .sj-macro-sidebar {grid-column:1 / -1;grid-row:2;position:static;max-height:none}
  #sjApp .sj-macro-panel {max-height:none;overflow:visible}
  #sjApp .sj-macro-panel .sj-card-head {flex-direction:row;align-items:center}
  #sjApp .sj-macro-panel #sjMacros {grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #sjApp .sj-entry > .sj-call-field {grid-column:span 4}
}
@media(max-width:820px) {
  #sjApp.sj.sj.sj {width:calc(100% - 24px)!important;padding:16px 0 30px!important}
  #sjApp .sj-body-layout {display:flex!important;flex-direction:column!important;gap:10px!important}
  #sjApp .sj-body-main {order:1;width:100%}
  #sjApp .sj-macro-sidebar {order:2;width:100%}
  #sjApp .sj-bandmap-sidebar {order:3;width:100%;position:static;max-height:none}
  #sjApp .sj-bandmap-vertical {max-height:520px}
  #sjApp .sj-metrics {grid-template-columns:repeat(3,minmax(0,1fr))}
  #sjApp .sj-entry > * {grid-column:span 3}
  #sjApp .sj-entry > .sj-call-field {grid-column:span 6}
  #sjApp .sj-entry > label:nth-of-type(5),
  #sjApp .sj-entry > label:nth-of-type(6),
  #sjApp .sj-entry > label:nth-of-type(7),
  #sjApp .sj-entry > #sjAdd {grid-column:span 3}
}
@media(max-width:560px) {
  #sjApp .sj-heading-actions {width:100%;justify-content:stretch}
  #sjApp .sj-status {flex:1}
  #sjApp .sj-card {padding:12px;border-radius:12px}
  #sjApp .sj-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
  #sjApp .sj-tours {grid-template-columns:repeat(2,minmax(0,1fr))}
  #sjApp .sj-entry > * {grid-column:span 6!important}
  #sjApp .sj-entry > .sj-call-field,
  #sjApp .sj-entry > label:nth-of-type(7),
  #sjApp .sj-entry > #sjAdd {grid-column:span 12!important}
  #sjApp .sj-contest-label {width:100%;min-width:0}
  #sjApp .sj-card-head {align-items:stretch}
  #sjApp .sj-correspondents-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #sjApp .sj-cat-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #sjApp .sj-macro-panel #sjMacros {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (prefers-reduced-motion:reduce){#sjApp *{scroll-behavior:auto!important;transition:none!important}}