# Remove the existing shared-script links,
    # then reinsert them in the required order:
    # capture first, presentation second.


:root {
  --pawx-presentation-bg:
    rgba(11, 17, 25, 0.92);

  --pawx-presentation-border:
    rgba(148, 163, 184, 0.42);

  --pawx-presentation-text:
    #f8fafc;

  --pawx-presentation-muted:
    #cbd5e1;
}


/* ------------------------------------------------------------ */
/* Desktop auto-hide                                            */
/* ------------------------------------------------------------ */

.panel,
.leaflet-control-zoom {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}

@media (min-width: 601px) {
  body.pawx-controls-hidden .panel {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-12px);
  }

  body.pawx-controls-hidden
  .leaflet-control-zoom {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-10px);
  }
}


/* ------------------------------------------------------------ */
/* Integrated presentation buttons                              */
/* ------------------------------------------------------------ */

.pawx-presentation-host {
  overflow: hidden;
  pointer-events: auto !important;
}

.pawx-presentation-host * {
  pointer-events: auto !important;
}

#pawxPresentationDock {
  position: relative;
  z-index: 10000;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 7px;

  box-sizing: border-box;
  width: 100%;

  margin-top: 9px;
  padding-top: 8px;

  border-top:
    1px solid rgba(100, 116, 139, 0.8);
}

#pawxPresentationDock button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  box-sizing: border-box;

  min-width: 0;
  width: 100%;
  height: 39px;

  padding: 6px 8px;

  border: 1px solid #475569;
  border-radius: 7px;

  background: #1e293b;
  color: #f8fafc;

  font: inherit;
  line-height: 1;

  cursor: pointer;

  pointer-events: auto !important;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

#pawxPresentationDock button:hover {
  border-color: #94a3b8;
  background: #334155;
}

#pawxPresentationDock button:active {
  transform: translateY(1px);
}

#pawxPresentationDock button:disabled {
  cursor: wait;
  opacity: 0.55;
}

#pawxPresentationDock
.pawx-button-icon {
  flex: 0 0 auto;
  font-size: 15px;
}

#pawxPresentationDock
.pawx-button-label {
  overflow: hidden;

  font-size: 11px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/*
 * Fallback location when the lower-right
 * information card cannot be detected.
 */
body.pawx-dock-fallback
#pawxPresentationDock {
  position: fixed;
  z-index: 5000;
  right: 14px;
  bottom: 14px;

  width: 260px;

  margin: 0;
  padding: 7px;

  border: 1px solid #475569;
  border-radius: 11px;

  background:
    rgba(12, 17, 24, 0.95);

  box-shadow:
    0 5px 22px rgba(0, 0, 0, 0.48);
}


/* ------------------------------------------------------------ */
/* Fullscreen presentation mode                                 */
/* ------------------------------------------------------------ */

body.pawx-presentation-mode .panel,
body.pawx-presentation-mode
.leaflet-control-zoom {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.pawx-presentation-mode
#pawxMenuButton {
  display: none;
}


/* ------------------------------------------------------------ */
/* Capture header                                               */
/* ------------------------------------------------------------ */

#pawxCaptureHeader {
  position: fixed;
  z-index: 8000;

  top: 0;
  left: 0;
  right: 0;

  display: none;

  box-sizing: border-box;
  height: 66px;

  padding: 10px 22px 8px;

  border-bottom:
    1px solid var(--pawx-presentation-border);

  background:
    rgba(11, 17, 25, 0.89);

  color:
    var(--pawx-presentation-text);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.26);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  pointer-events: none;
}

#pawxCaptureTitle {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.12;
}

#pawxCaptureSubtitle {
  margin-top: 2px;

  color: #e2e8f0;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
}

#pawxCaptureMetadata {
  margin-top: 2px;

  color:
    var(--pawx-presentation-muted);

  font-size: 11px;
  line-height: 1.15;
}


/* ------------------------------------------------------------ */
/* Capture footer                                               */
/* ------------------------------------------------------------ */

#pawxCaptureFooter {
  position: fixed;
  z-index: 8000;

  left: 0;
  right: 0;
  bottom: 0;

  display: none;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  height: 54px;

  padding: 6px 22px;

  border-top:
    1px solid var(--pawx-presentation-border);

  background:
    rgba(11, 17, 25, 0.9);

  color:
    var(--pawx-presentation-text);

  box-shadow:
    0 -3px 12px rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  pointer-events: none;
}

#pawxCaptureLegend {
  width: 570px;
}

#pawxCaptureLegendTitle {
  margin-bottom: 3px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

#pawxCaptureLegendBar {
  display: grid;
  grid-template-columns:
    repeat(10, minmax(0, 1fr));

  height: 11px;

  overflow: hidden;

  border:
    1px solid rgba(148, 163, 184, 0.75);

  border-radius: 3px;
}

#pawxCaptureLegendBar
span:nth-child(1) {
  background: #d9f0ff;
}

#pawxCaptureLegendBar
span:nth-child(2) {
  background: #a6d8ff;
}

#pawxCaptureLegendBar
span:nth-child(3) {
  background: #70b7ff;
}

#pawxCaptureLegendBar
span:nth-child(4) {
  background: #3b91ff;
}

#pawxCaptureLegendBar
span:nth-child(5) {
  background: #1767d1;
}

#pawxCaptureLegendBar
span:nth-child(6) {
  background: #7fd87f;
}

#pawxCaptureLegendBar
span:nth-child(7) {
  background: #37b837;
}

#pawxCaptureLegendBar
span:nth-child(8) {
  background: #ffe066;
}

#pawxCaptureLegendBar
span:nth-child(9) {
  background: #ff9f43;
}

#pawxCaptureLegendBar
span:nth-child(10) {
  background: #e63946;
}

#pawxCaptureLegendValues {
  display: flex;
  justify-content: space-between;

  margin-top: 2px;

  color:
    var(--pawx-presentation-muted);

  font-size: 9px;
  line-height: 1;
}

#pawxCaptureBranding {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  padding-left: 24px;

  white-space: nowrap;
}

#pawxCaptureBrand {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.05;
}

#pawxCaptureGenerated {
  margin-top: 3px;

  color:
    var(--pawx-presentation-muted);

  font-size: 9px;
  font-weight: 400;
  line-height: 1;
}


/* ------------------------------------------------------------ */
/* Capture progress notice                                      */
/* ------------------------------------------------------------ */

#pawxCaptureNotice {
  position: fixed;
  z-index: 9000;

  left: 50%;
  bottom: 72px;

  visibility: hidden;
  opacity: 0;

  padding: 9px 14px;

  border: 1px solid #475569;
  border-radius: 8px;

  background:
    rgba(12, 17, 24, 0.96);

  color: #f8fafc;

  font-size: 13px;

  pointer-events: none;

  transform:
    translateX(-50%) translateY(8px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

#pawxCaptureNotice.pawx-visible {
  visibility: visible;
  opacity: 1;

  transform:
    translateX(-50%) translateY(0);
}


/* ------------------------------------------------------------ */
/* Native 1920x1080 capture layout                              */
/* ------------------------------------------------------------ */

body.pawx-capture-active {
  width: 1920px !important;
  height: 1080px !important;

  min-width: 1920px !important;
  min-height: 1080px !important;

  overflow: hidden !important;

  background: #0c1118 !important;
}

body.pawx-capture-active #map {
  position: fixed !important;

  top: 66px !important;
  right: 0 !important;
  bottom: 54px !important;
  left: 0 !important;

  width: 1920px !important;
  height: 960px !important;
}

body.pawx-capture-active
#pawxCaptureHeader {
  display: block;
}

body.pawx-capture-active
#pawxCaptureFooter {
  display: flex;
}

body.pawx-capture-active
#pawxPresentationDock,
body.pawx-capture-active
.pawx-presentation-host,
body.pawx-capture-active .panel,
body.pawx-capture-active
.leaflet-control-container,
body.pawx-capture-active
#pawxCaptureNotice {
  display: none !important;
}


/* ------------------------------------------------------------ */
/* Mobile                                                       */
/* ------------------------------------------------------------ */

@media (max-width: 600px) {
  #pawxPresentationDock {
    gap: 5px;
    margin-top: 7px;
    padding-top: 7px;
  }

  #pawxPresentationDock button {
    height: 37px;
    padding: 5px 6px;
  }

  #pawxPresentationDock
  .pawx-button-label {
    font-size: 10px;
  }

  body.pawx-dock-fallback
  #pawxPresentationDock {
    right: 8px;
    bottom: 8px;
    width: 230px;
  }
}