.ptw-chart{box-sizing:border-box;position:relative;min-width:0;max-width:100%;padding:clamp(12px,3vw,24px);margin:16px 0;border:1px solid var(--line,var(--border-color,#334155));border-radius:16px;background:var(--surface,var(--bg-card,#101827));color:var(--text,var(--text-main,#e2e8f0))}
.ptw-chart *{box-sizing:border-box;min-width:0}
.ptw-chart h3{font-size:1.1rem;margin:0 0 12px;overflow-wrap:anywhere}
.ptw-chart-controls{display:flex;flex-wrap:wrap;gap:12px}.ptw-chart-controls label{display:grid;gap:6px;flex:1 1 130px;font-size:.875rem}
.ptw-chart select{width:100%;min-height:44px;padding:8px;border:1px solid #64748b;border-radius:8px;color:inherit;background:var(--bg,var(--bg-card-subtle,#172033));font:inherit}
.ptw-chart :focus-visible{outline:3px solid #38bdf8;outline-offset:3px}
.ptw-chart-note,.ptw-chart [data-summary]{font-size:.85rem;line-height:1.5;overflow-wrap:anywhere}
.ptw-chart [data-plot]{position:relative;min-width:0}.ptw-chart svg{display:block;width:100%;height:clamp(160px,30vw,240px);fill:currentColor;color:#38bdf8;overflow:hidden}
.ptw-chart-graphic{display:grid;grid-template-columns:minmax(24px,48px) minmax(0,1fr);gap:4px}.ptw-chart-scale{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0 22px;font-size:.8rem;overflow-wrap:anywhere}.ptw-chart-ends{display:flex;justify-content:space-between;gap:16px;font-size:.8rem}.ptw-chart-ends span{max-width:48%;overflow-wrap:anywhere}
.ptw-chart summary{min-height:44px;padding:12px 0;cursor:pointer}.ptw-chart table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.85rem}.ptw-chart th,.ptw-chart td{padding:10px 4px;text-align:start;border-bottom:1px solid #64748b;overflow-wrap:anywhere}.ptw-chart th:first-child{width:50%}
/* Legacy plots: hidden must win over author display:flex, and columns must shrink. */
.chart-box{min-width:0;max-width:100%}.chart-box [hidden]{display:none!important}.chart-stage{min-width:0;overflow:hidden}.chart-bar-col{min-width:0}.chart-bars-wrap{gap:2px}.chart-view-switch{flex-wrap:wrap;max-width:100%}.chart-view-switch button{min-height:44px}.chart-tooltip{max-width:100%;white-space:normal;overflow-wrap:anywhere}.chart-x-axis{gap:12px}.chart-x-axis span{min-width:0;overflow-wrap:anywhere}
@media(max-width:639px){.chart-box{padding:12px}.chart-y-axis{min-width:44px;padding-right:6px}.chart-x-axis{margin-left:44px}.chart-metrics{gap:10px}.chart-metric-chip strong{font-size:16px}}

/* Interactive Bar & Point Selection */
.ptw-chart-bar, .ptw-chart-point {
  cursor: pointer;
  transition: fill 0.15s ease, stroke 0.15s ease, opacity 0.15s ease;
  outline: none;
}
.ptw-chart-bar:hover, .ptw-chart-point:hover, .ptw-chart-bar:focus-visible, .ptw-chart-point:focus-visible {
  fill: #38bdf8 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}
.ptw-chart-bar.ptw-active, .ptw-chart-point.ptw-active {
  fill: #67e8f9 !important;
  stroke: #ffffff !important;
  stroke-width: 2px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.9));
}

/* Interactive Callout Banner */
.ptw-chart-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 16px;
  background: var(--surface-card, rgba(14, 20, 27, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(56, 189, 248, 0.2);
  backdrop-filter: blur(12px);
  animation: ptwCalloutIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ptwCalloutIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ptw-callout-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ptw-callout-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ptw-callout-label {
  font-size: 0.88rem;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.ptw-callout-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #38bdf8;
  font-family: monospace;
}
.ptw-callout-pct {
  font-size: 0.82rem;
  color: #34d399;
}
.ptw-callout-date {
  font-size: 0.78rem;
  color: #64748b;
}
.ptw-callout-close {
  background: transparent;
  border: none;
  color: var(--muted, #94a3b8);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 6px;
  min-height: 36px;
  min-width: 36px;
  display: grid;
  place-items: center;
}
.ptw-callout-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
tbody tr[role="button"] { cursor: pointer; }
tbody tr[role="button"]:hover { background: rgba(56, 189, 248, 0.08); }