body { background:#f4f4f4; color:#1a1a2e; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.sheet { background:#fff; max-width:1760px; margin:1rem auto; padding:1.25rem 1.5rem 1.75rem; box-shadow:0 1px 6px rgba(0,0,0,.12); }
.panel-title { font-style:italic; font-weight:700; text-align:center; font-size:1rem; margin-bottom:.05rem; }
.panel-sub { text-align:center; color:#333; font-size:.78rem; margin-bottom:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.section-sub { text-align:center; color:#555; font-size:.85rem; margin:-.15rem 0 .5rem; }
.scored-banner { background:#fff8e1; border:1px solid #ecd28a; border-radius:.5rem; padding:.5rem .8rem; max-width:1100px; margin:0 auto .6rem; }
.heatmap-panel { min-width:0; }
.treemap { width:100%; height:auto; display:block; background:#fff; border:1px solid #ddd; }
.treemap rect.pt { stroke:#fff; stroke-width:.4; cursor:pointer; }
.treemap rect.pt:hover { stroke:#000; stroke-width:1.2; }
.treemap text.soc { font-size:10px; font-weight:600; fill:#fff; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2.5px; pointer-events:none; }
.treemap text.ptl { font-size:8.5px; fill:#fff; paint-order:stroke; stroke:rgba(0,0,0,.45); stroke-width:2px; pointer-events:none; }
/* One shared legend per row of three panels */
.legend-row { margin:.55rem auto 0; max-width:440px; }
.legend { height:12px; border:1px solid #999; }
.legend-ticks { display:flex; justify-content:space-between; font-size:.7rem; color:#333; }
.legend-note { text-align:center; font-size:.7rem; color:#666; margin-top:.15rem; }
#tooltip { position:fixed; z-index:99; pointer-events:none; background:rgba(15,15,25,.94); color:#fff; padding:.5rem .65rem; border-radius:.4rem; font-size:.78rem; max-width:320px; display:none; line-height:1.45; }
.algo-head { border-left:6px solid #212529; padding-left:.6rem; margin-top:1.4rem; }
code { color:#b02a37; }
.heatmap-toolbar { position:sticky; top:0; z-index:20; background:#fff; border:1px solid #ddd; border-radius:.5rem; padding:.45rem .9rem; margin:1rem 0 .5rem; box-shadow:0 1px 4px rgba(0,0,0,.08); }
/* Symptom search: shorter (less tall) and wider */
.heatmap-toolbar .input-group { width:100%; }
.heatmap-toolbar #symptomSearch { height:2rem; min-height:2rem; padding:.25rem .6rem; font-size:.88rem; }
.heatmap-toolbar .input-group .btn { padding:.25rem .7rem; font-size:.88rem; line-height:1.2; }
/* Symptom-search highlight: the matched tile keeps its own fill + thin white
   border (colour and size stay readable). It is marked in a layer on top by a
   thin amber outline with a dark casing drawn OUTSIDE the tile, pulsing in
   opacity only (never in width, so the tile never appears to grow/shrink).
   Everything else is only gently faded, keeping its colour readable too. */
.treemap rect.pt.is-match { opacity:1; }
.treemap rect.pt.dim { opacity:.5; transition:opacity .25s ease; }
.treemap .hl-case { fill:none; stroke:rgba(17,17,17,.85); stroke-width:4px; pointer-events:none; }
.treemap .hl-line { fill:none; stroke:#ffc107; stroke-width:2px; pointer-events:none; animation:hl-pulse 1.2s ease-in-out infinite alternate; }
@keyframes hl-pulse { from { opacity:.55; } to { opacity:1; } }
.treemap .hl-dot { fill:#ffc107; stroke:#111; stroke-width:1.5px; pointer-events:none; }
.treemap text.hl-label { font-size:9px; font-weight:700; fill:#111; paint-order:stroke; stroke:rgba(255,255,255,.92); stroke-width:3px; pointer-events:none; }
/* Selected tile (single click): dark casing + white dashed line just inside
   the tile, distinct from the amber search frame outside it. */
.treemap .sel-case { fill:none; stroke:rgba(17,17,17,.9); stroke-width:3.5px; pointer-events:none; }
.treemap .sel-line { fill:none; stroke:#fff; stroke-width:1.6px; stroke-dasharray:5 3; pointer-events:none; }
/* Pinned tile details, inside the sticky toolbar so they stay visible while
   scrolling through the panels. */
.tile-details { margin-top:.45rem; background:#f8f9fa; border:1px solid #dee2e6; border-radius:.4rem; padding:.4rem .6rem; font-size:.85rem; line-height:1.5; }
.tile-details .btn { padding:.1rem .5rem; font-size:.8rem; }
/* Outcomes treemap (per vaccine x cumulative month) */
.outcome-treemap-wrap { max-width:1100px; margin:0 auto; }
.outcome-treemap { width:100%; height:auto; display:block; background:#fff; border:1px solid #ddd; }
.outcome-treemap rect.oc { stroke:#fff; stroke-width:1; cursor:pointer; }
.outcome-treemap rect.oc:hover { stroke:#000; stroke-width:1.6; }
.outcome-treemap text.oc-name { font-size:17px; font-weight:700; pointer-events:none; }
.outcome-treemap text.oc-val { font-size:13px; pointer-events:none; }
/* Outcomes heatmap (month x five VAERS outcomes) */
.outcome-table th, .outcome-table td { vertical-align:middle; }
.outcome-cell { text-align:center; min-width:86px; line-height:1.25; }
.outcome-cell strong { display:block; font-size:.92rem; }
.outcome-cell span { display:block; font-size:.72rem; opacity:.85; }
.outcome-cell.outcome-empty { color:#999; background:#f8f9fa; }
.outcome-legend { display:flex; align-items:center; gap:.5rem; justify-content:center; margin:.4rem auto .8rem; font-size:.75rem; color:#333; flex-wrap:wrap; }
.outcome-legend-bar { width:220px; height:12px; border:1px solid #999; background:linear-gradient(to right,#ffffff 0%,#fecc5c 50%,#e31a1c 100%); }
/* Clickable symptom names in the Top signals table */
#topTable a.pt-link { font-weight:600; text-decoration:none; cursor:pointer; }
#topTable a.pt-link:hover { text-decoration:underline; }
/* Collapsible masking-effect calculation, under the selected-symptom text */
.masking-explainer { margin-top:.45rem; background:#fff; border:1px solid #dee2e6; border-radius:.4rem; padding:.35rem .6rem; }
.masking-explainer summary { cursor:pointer; font-weight:600; }
.masking-explainer .masking-body { margin-top:.4rem; font-weight:400; }
.treemap-wrap { position:relative; }
.zoom-up-btn { position:absolute; top:8px; right:8px; z-index:5; display:inline-flex; align-items:center; gap:.3rem;
  background:rgba(17,24,39,.88); color:#fff; border:1.5px solid rgba(255,255,255,.75); border-radius:999px;
  padding:.32rem .65rem; font-size:.78rem; font-weight:700; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.45); }
.zoom-up-btn .zoom-up-icon { font-size:1rem; font-weight:900; }
.zoom-up-btn:hover:not(:disabled) { background:#000; }
.zoom-up-btn:disabled { opacity:.38; cursor:default; box-shadow:none; }
.zoom-up-btn.is-zoomed { opacity:1; background:#0d6efd; border-color:#fff; animation:pt-pulse-btn 1.1s ease-in-out infinite alternate; }
@keyframes pt-pulse-btn { from { box-shadow:0 2px 8px rgba(0,0,0,.45); } to { box-shadow:0 2px 14px rgba(13,110,253,.85); } }
/* Live filtered-row count above SearchBuilder DataTables */
.dt-filter-count {
  margin: .35rem 0 .55rem; padding: .45rem .75rem;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .4rem;
  font-size: .9rem; color: #334155;
}
.dt-filter-count.is-filtered {
  background: #fff8e6; border-color: #f0d78c; color: #5c4a12; font-weight: 600;
}