/* ============================================================
   DETAIL DRAWER — shared by Pulse + Map.
   A vertically centered chart modal (Dan's preference — was a
   bottom sheet). Styles for components/DetailDrawer.js: sheet,
   headline, bin ribbon + recommendation, chart, stats.
   ============================================================ */
.dd-scrim{
  position:fixed;inset:0;z-index:180;display:flex;padding:20px;overflow:auto;
  background:rgba(3,6,12,.6);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.dd-scrim.open{opacity:1;pointer-events:auto}
.dd-sheet{
  margin:auto; /* safe centering — stays scrollable when taller than the viewport */
  width:min(1100px,100%);max-height:90vh;overflow:auto;
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(16,24,40,.97),rgba(8,12,22,.97));
  border:1px solid var(--stroke-2);box-shadow:var(--shadow);
  padding:20px 22px 22px;
  transform:translateY(16px) scale(.985);transition:transform .3s var(--ease);
}
.dd-scrim.open .dd-sheet{transform:none}
/* the grab-handle was a bottom-sheet affordance — the ✕ button closes now */
.dd-handle{display:none}
.dd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.dd-crumb{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);flex-wrap:wrap}
.dd-crumb .dd-dev{color:var(--text);font-weight:600}
.dd-crumb .dd-an{color:var(--teal);font-family:var(--font-display);font-weight:600}
.dd-reading{display:flex;align-items:baseline;gap:14px;margin-top:6px;flex-wrap:wrap}
.dd-value{font-family:var(--font-display);font-size:2.4rem;font-weight:700;line-height:1}
.dd-value .dd-unit{font-size:1rem;color:var(--muted);font-weight:500;margin-left:4px}
.dd-delta{font-size:.8rem;color:var(--dim)}
.dd-delta.up{color:var(--lime)} .dd-delta.down{color:var(--teal)}
.dd-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dd-windows{display:inline-flex;gap:4px;padding:3px;border-radius:999px;border:1px solid var(--stroke);background:var(--surface)}
.dd-win{
  font-family:var(--font-display);font-size:.76rem;font-weight:600;color:var(--muted);
  padding:5px 11px;border-radius:999px;border:0;background:none;cursor:pointer;transition:.2s;
}
.dd-win:hover{color:var(--text)}
.dd-win.active{color:#04121a;background:var(--grad)}
.dd-chart{width:100%;height:340px}
.dd-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dd-stat{flex:1;min-width:100px;padding:10px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--stroke);text-align:center}
.dd-stat b{display:block;font-family:var(--font-display);font-size:1.05rem;font-variant-numeric:tabular-nums}
.dd-stat span{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}

/* ---------- bin ribbon + recommendation ---------- */
.dd-ribbon{display:flex;gap:4px;margin:14px 0 0}
.dd-seg{
  position:relative;flex:1;height:12px;border-radius:6px;
  background:color-mix(in srgb, var(--seg-color) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--seg-color) 65%, transparent);
  transition:transform .2s var(--ease);
}
.dd-seg.active{
  background:var(--seg-color);
  box-shadow:0 0 14px -2px var(--seg-color);
  transform:scaleY(1.25);
}
.dd-seg-range{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  font-size:.62rem;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.dd-seg.active .dd-seg-range{color:var(--muted);font-weight:600}
.dd-marker{
  position:absolute;top:-7px;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid #fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.7));
}
.dd-advice{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:26px 0 4px;padding:10px 14px;border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bin-color) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--bin-color) 26%, transparent);
  font-size:.85rem;color:var(--muted);
}
.dd-advice-dot{width:9px;height:9px;border-radius:50%;flex:none;align-self:center;
  background:var(--bin-color);box-shadow:0 0 8px var(--bin-color)}
.dd-advice-text{color:var(--text);flex:1;min-width:200px}
.dd-cites{font-size:.72rem;color:var(--dim);width:100%}
.dd-cites a{color:var(--teal)}
.dd-cites a:hover{color:var(--lime)}

@media(max-width:760px){
  .dd-scrim{padding:10px}
  .dd-sheet{max-height:94vh;padding:14px 14px 16px}
  .dd-value{font-size:2rem}
  .dd-chart{height:260px}
  .dd-actions{width:100%;justify-content:space-between}
}