/* ============================================================
   52-WEEK MIDPOINT BREADTH
   ============================================================ */

.wb-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin:4px 0 18px;
}

.wb-head h1{
  margin:4px 0 5px;
  color:#2d4259;
  font-size:26px;
  letter-spacing:-.02em;
}

.wb-head p{
  max-width:800px;
  margin:0;
  color:#8190a3;
  font-size:10px;
  line-height:1.55;
}

.wb-analysis-only{
  padding:7px 10px;
  border:1px solid #cfe4df;
  border-radius:7px;
  background:#eff8f6;
  color:#287c6d;
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
}


/* Controls */

.wb-controls{
  display:grid;
  grid-template-columns:
    minmax(250px,1fr)
    auto
    auto
    auto;
  gap:13px;
  align-items:end;
  padding:14px;
  border:1px solid #dce4ec;
  border-radius:10px;
  background:#fff;
}

.wb-controls .field{
  min-width:0;
}

.wb-controls label{
  display:block;
  margin-bottom:6px;
  color:#7b899b;
  font-size:7px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.wb-controls select,
.wb-controls input{
  width:100%;
  height:38px;
  box-sizing:border-box;
  padding:0 10px;
  border:1px solid #d7e0e8;
  border-radius:7px;
  background:#fff;
  color:#40556c;
  font-size:9px;
}

.wb-segment{
  display:flex;
  overflow:hidden;
  border:1px solid #d8e1e9;
  border-radius:7px;
  background:#f8fafc;
}

.wb-segment button{
  min-width:62px;
  height:38px;
  padding:0 12px;
  border:0;
  border-right:1px solid #e1e7ed;
  background:transparent;
  color:#728296;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.wb-segment button:last-child{
  border-right:0;
}

.wb-segment button.active{
  background:#eaf5f2;
  color:#287c6d;
}

.wb-custom-range{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:
    minmax(180px,240px)
    minmax(180px,240px);
  gap:12px;
  padding-top:12px;
  border-top:1px solid #edf1f4;
}


/* Summary */

.wb-summary{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  overflow:hidden;
  margin-top:13px;
  border:1px solid #dfe6ec;
  border-radius:9px;
  background:#dfe6ec;
}

.wb-summary>div{
  position:relative;
  padding:11px 13px;
  background:#fff;
}

.wb-summary>div::before{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:#aebcca;
  content:"";
}

.wb-summary>div.positive::before{
  background:#65b29f;
}

.wb-summary>div.negative::before{
  background:#d9858f;
}

.wb-summary span{
  display:block;
  color:#8492a4;
  font-size:7px;
  font-weight:800;
  letter-spacing:.05em;
}

.wb-summary b{
  display:block;
  margin-top:4px;
  color:#324960;
  font-size:18px;
}

.wb-summary b.positive{
  color:#267766;
}

.wb-summary b.negative{
  color:#a84a55;
}


/* Status */

.wb-status{
  margin:11px 0;
  padding:8px 11px;
  border:1px solid #e2e8ed;
  border-radius:7px;
  background:#f8fafc;
  color:#7c8a9a;
  font-size:9px;
}

.wb-status.loading{
  padding:0;
  border:0;
  background:transparent;
}

.wb-status.loading .section-loader{
  min-height:70px;
  border:1px solid #e1e7ed;
  border-radius:9px;
  background:#fff;
}


/* Chart */

.wb-chart-card{
  overflow:hidden;
  border:1px solid #dce4eb;
  border-radius:10px;
  background:#fff;
}

.wb-chart-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:14px 16px 10px;
  border-bottom:1px solid #e6ebef;
}

.wb-chart-head h2{
  margin:3px 0;
  color:#354b62;
  font-size:15px;
}

.wb-chart-head p{
  margin:0;
  color:#8694a5;
  font-size:8px;
}

.wb-chart-legend{
  display:flex;
  gap:12px;
  align-items:center;
  color:#7c8b9d;
  font-size:7px;
}

.wb-chart-legend span{
  display:flex;
  gap:5px;
  align-items:center;
}

.wb-chart-legend i{
  width:14px;
  height:2px;
  display:inline-block;
}

.wb-chart-legend i.breadth{
  background:#365b75;
}

.wb-chart-legend i.zero{
  border-top:1px dashed #a3afbc;
}

.wb-chart-wrap{
  position:relative;
  min-height:430px;
  padding:5px 10px 0;
}

#wbChart{
  display:block;
  width:100%;
  height:430px;
}

.wb-grid-line{
  stroke:#e8edf2;
  stroke-width:1;
}

.wb-zero-line{
  stroke:#9eabb8;
  stroke-width:1.2;
  stroke-dasharray:5 4;
}

.wb-zero-label{
  fill:#8794a4;
  font-size:7px;
  font-weight:800;
}

.wb-axis-text{
  fill:#8795a5;
  font-size:8px;
}

.wb-breadth-line{
  fill:none;
  stroke:#365b75;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wb-last-point{
  fill:#fff;
  stroke:#365b75;
  stroke-width:2.5;
}

.wb-hover-line{
  stroke:#71869b;
  stroke-width:1;
  stroke-dasharray:3 3;
}

.wb-svg-empty{
  fill:#8290a0;
  font-size:10px;
}


/* Hover */

.wb-hover{
  position:absolute;
  top:20px;
  left:50%;
  z-index:5;
  width:min(430px,80%);
  transform:translateX(-50%);
  padding:10px 11px;
  border:1px solid #d8e1e8;
  border-radius:8px;
  background:rgba(255,255,255,.97);
  box-shadow:0 5px 18px rgba(45,64,83,.08);
  color:#53687d;
  pointer-events:none;
}

.wb-hover>b{
  display:block;
  margin-bottom:7px;
  color:#344b62;
  font-size:9px;
}

.wb-hover-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.wb-hover-summary span{
  color:#8693a3;
  font-size:7px;
}

.wb-hover-summary strong{
  display:block;
  margin-top:2px;
  color:#344a60;
  font-size:10px;
}

.wb-hover-members{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #edf1f4;
}

.wb-hover-members span{
  display:block;
  margin-bottom:3px;
  color:#8492a2;
  font-size:7px;
  font-weight:800;
}

.wb-hover-members b{
  display:block;
  color:#53677b;
  font-size:7px;
  line-height:1.55;
}


/* Table */

.wb-table-card{
  margin-top:14px;
  overflow:hidden;
  border:1px solid #dce4eb;
  border-radius:10px;
  background:#fff;
}

.wb-table-head{
  padding:13px 15px 9px;
  border-bottom:1px solid #e7ebef;
}

.wb-table-head h2{
  margin:3px 0 0;
  color:#354b62;
  font-size:14px;
}

.wb-table{
  width:100%;
  border-collapse:collapse;
}

.wb-table th{
  padding:9px 10px;
  border-bottom:1px solid #dfe6ec;
  background:#f7f9fb;
  color:#8090a1;
  text-align:left;
  font-size:7px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.wb-table td{
  padding:10px;
  border-bottom:1px solid #edf1f4;
  color:#495e74;
  font-size:9px;
}

.wb-table tr:last-child td{
  border-bottom:0;
}

.wb-table td b{
  color:#334a61;
}

.wb-table td small{
  display:block;
  margin-top:2px;
  color:#8f9cab;
  font-size:7px;
}

.wb-state{
  display:inline-flex;
  min-width:76px;
  justify-content:center;
  padding:5px 8px;
  border-radius:5px;
  font-size:7px;
  font-weight:800;
}

.wb-state.up{
  background:#e0f1ec;
  color:#267767;
}

.wb-state.down{
  background:#f7e1e4;
  color:#aa505a;
}

.wb-state.neutral{
  background:#e9eef3;
  color:#748396;
}

.wb-empty{
  padding:22px!important;
  text-align:center;
  color:#8492a2;
}


@media(max-width:1100px){

  .wb-controls{
    grid-template-columns:1fr 1fr;
  }

  .wb-summary{
    grid-template-columns:repeat(3,1fr);
  }
}


@media(max-width:760px){

  .wb-head,
  .wb-chart-head{
    flex-direction:column;
  }

  .wb-controls{
    grid-template-columns:1fr;
  }

  .wb-custom-range{
    grid-template-columns:1fr;
  }

  .wb-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .wb-hover-summary{
    grid-template-columns:repeat(2,1fr);
  }

  .wb-hover-members{
    grid-template-columns:1fr;
  }
}

/* 52-Week Midpoint Breadth period markers */
.wb-period-point{
  fill:#ffffff;
  stroke:#315c78;
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
}

.wb-last-point{
  fill:#ffffff;
  stroke:#315c78;
  stroke-width:2.4;
  vector-effect:non-scaling-stroke;
}


/* ============================================================
   52-WEEK MIDPOINT BREADTH - INDIVIDUAL SHARE OVERLAY
   ============================================================ */

.wb-share-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:10px 14px;
  margin:0 14px 6px;

  border:1px solid rgba(148,163,184,.22);
  border-radius:8px;

  background:#f8fafc;
}


.wb-share-toolbar-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}


.wb-share-toolbar-copy span{
  font-size:11px;
  font-weight:750;
  color:#334155;
}


.wb-share-toolbar-copy small{
  font-size:10px;
  color:#94a3b8;
}


.wb-share-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}


.wb-share-toggle{
  min-width:92px;
  padding:6px 11px;

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

  background:#fff;
  color:#475569;

  font-size:10px;
  font-weight:750;

  cursor:pointer;
}


.wb-share-toggle:hover{
  border-color:#94a3b8;
}


.wb-share-toggle.active{
  border-color:#2a8f83;
  background:#edf8f5;
  color:#14756b;
}


.wb-share-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px 10px;

  max-width:720px;
}


.wb-share-legend.hidden{
  display:none;
}


.wb-share-legend span{
  display:inline-flex;
  align-items:center;
  gap:4px;

  font-size:9px;
  font-weight:650;

  color:#64748b;
}


.wb-share-legend i{
  width:8px;
  height:8px;

  border-radius:50%;
}


.wb-share-line{
  fill:none;

  stroke-width:1.35;
  stroke-opacity:.52;

  vector-effect:non-scaling-stroke;
}


.wb-breadth-line{
  position:relative;
}


.wb-hover-share-list{
  margin-top:9px;
  padding-top:8px;

  border-top:
    1px solid rgba(148,163,184,.20);
}


.wb-hover-share-list > span{
  display:block;

  margin-bottom:5px;

  font-size:9px;
  font-weight:750;

  letter-spacing:.04em;

  color:#94a3b8;
}


.wb-hover-share-list > div{
  display:flex;
  flex-wrap:wrap;

  gap:5px 9px;
}


.wb-hover-share-list b{
  font-size:10px;
  font-weight:700;
}


@media(max-width:900px){

  .wb-share-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }


  .wb-share-toolbar-actions{
    width:100%;

    align-items:flex-start;
    flex-direction:column;
  }


  .wb-share-legend{
    justify-content:flex-start;
  }
}


/* ============================================================
   INDIVIDUAL SHARE SELECTOR
   ============================================================ */

.wb-share-legend{
  flex:1;
  max-width:none;
}


.wb-share-choice-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px 14px;
}


.wb-share-choice{
  display:inline-flex;
  align-items:center;
  gap:5px;

  cursor:pointer;

  color:#64748b;

  font-size:10px;
  font-weight:650;

  white-space:nowrap;
}


.wb-share-choice input{
  width:13px;
  height:13px;
  margin:0;

  accent-color:#287d76;

  cursor:pointer;
}


.wb-share-choice i{
  width:7px;
  height:7px;

  border-radius:50%;

  flex:0 0 auto;
}


.wb-share-choice:has(input:checked){
  color:#334155;
  font-weight:750;
}


.wb-share-clear{
  padding:4px 8px;

  border:0;
  background:transparent;

  color:#64748b;

  font-size:9px;
  font-weight:700;

  cursor:pointer;
}


.wb-share-clear:hover{
  color:#334155;
  text-decoration:underline;
}


@media(max-width:900px){

  .wb-share-choice-list{
    justify-content:flex-start;
  }
}