/* =========================
   RTP PANEL
   ========================= */

.rtpX-panel{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:16px;
  margin:18px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.08);

  overflow:hidden;          /* keeps line/ticks inside rounded panel */
  --rtpX-safePad: 14px;     /* clamp padding for diagonal endpoints */
}

.rtpX-header{ margin-bottom:12px; }

.rtpX-title{
  font-size:20px;
  font-weight:800;
  color:#444;
  line-height:1.2;
}


.rtpX-connector{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2; /* below dot (3), above bar (1) */
}

.rtpX-connectorSvg{
  width:100%;
  height:100%;
  display:block;
}

.rtpX-connectorLine{
  stroke:#9c9c9c;
  stroke-width:2;
  stroke-linecap:round;
}


.rtpX-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}


.rtpX-barWrap{
  position:relative;
  width:100%;
  --bar-h: 36px;
}

.rtpX-bar{
  position:relative;
  height: var(--bar-h);
  width:100%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  display:flex;
  z-index:1;
}

.rtpX-seg{ height:100%; }
.rtpX-seg--low{ width:12.5%; background:#d64545; }
.rtpX-seg--below{ width:17.5%; background:#f08a2f; }
.rtpX-seg--avg{ width:40%; background:#f2c14e; }
.rtpX-seg--above{ width:17.5%; background:#43b7b1; }
.rtpX-seg--high{ width:12.5%; background:#57c84d; }


.rtpX-marker{
  position:absolute;
  top: calc(var(--bar-h) / 2);
  left: clamp(10px, var(--rtp-pos, 0%), calc(100% - 10px));
  transform: translate(-50%, -50%);
  pointer-events:none;
  z-index:3;
}

.rtpX-dot{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:4px solid #000;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}


.rtpX-zoneLabels{
  display:flex;
  width:100%;
  margin-top:2px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.1;
  z-index:4;
}

.rtpX-z{
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  opacity:.95;
}


.rtpX-z--low{   width:12.5%; color:#d64545; }
.rtpX-z--below{ width:17.5%; color:#f08a2f; }
.rtpX-z--avg{   width:40%;   color:#c59b00; }
.rtpX-z--above{ width:17.5%; color:#43b7b1; }
.rtpX-z--high{  width:12.5%; color:#57c84d; }


.rtpX-axis{
  position:relative;
  height:34px;
  width:100%;
  z-index:4;
}

.rtpX-axisLine{
  position:absolute;
  left:0;
  right:0;
  top:8px;
  height:2px;
  background:#cfcfcf;
  border-radius:2px;
}

.rtpX-tick{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  text-align:center;
  min-width:34px;
}

.rtpX-tickMark{
  display:block;
  width:2px;
  height:10px;
  background:#9c9c9c;
  margin:4px auto 4px;
}

.rtpX-tickLabel{
  display:block;
  font-size:12px;
  font-weight:700;
  color:#8a8a8a;
  line-height:1;
}


.rtpX-warning{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  color:#8a8a8a;
  text-align:center;
  z-index:4;
}

.rtpX-warning strong{
  color:#666;
  font-weight:800;
}


@media (max-width:768px){
  .rtpX-title{ font-size:18px; }
  .rtpX-zoneLabels{ font-size:11px; }

  .rtpX-panel{ --rtpX-safePad: 10px; }

  .rtpX-barWrap{ --bar-h: 30px; }

  .rtpX-dot{
    width:16px;
    height:16px;
    border-width:3px;
  }

  .rtpX-marker{
    left: clamp(9px, var(--rtp-pos, 0%), calc(100% - 9px));
  }

  .rtpX-tickLabel{ font-size:11px; }

  .rtpX-warning{
    font-size:12px;        /* ↑ mobile bump */
    margin-top:6px;
    padding:0 8px;
    box-sizing:border-box;
  }
}