/* ============================================================
   SHARED · CoverageGrid styles (root class .cvg)
   Ported from int_coverage_grid_prototype.html; scoped under .cvg so
   the generic prototype class names don't collide with host pages.
   Reader-facing text #111111. Fixed layout — content fits the panel.
   ============================================================ */
.cvg {
    --cvg-ink: #111111;
    --cvg-gpos: #2b6cb0;
    --cvg-gneg: #b8791a;
    --cvg-blr: #2e7d4f;
    --cvg-panel: #faf9f6;
    --cvg-line: #e6e6e6;
    --cvg-track: #ececec;
    --cvg-accent: #2b8a9e;
    color: var(--cvg-ink);
}

.cvg-gradient {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: #777;
    padding: 0 4px 8px;
}

.cvg-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.cvg-tab {
    flex: 1 1 0;
    min-width: 84px;
    border: 1.5px solid #d6d6d6;
    background: #fff;
    border-radius: 10px;
    padding: 10px 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s;
    color: var(--cvg-ink);
}
.cvg-tab:hover { border-color: #9a9a9a; }
.cvg-tab.is-active { border-color: var(--cvg-accent); background: #eaf6f8; }
.cvg-tab b { display: block; font-size: 15px; }
.cvg-tab span { font-size: 11px; color: #777; }

.cvg-panel {
    border: 1px solid var(--cvg-line);
    border-radius: 12px;
    background: var(--cvg-panel);
    padding: 18px;
}

.cvg-drugs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cvg-drug {
    font-size: 13px; font-weight: 600; background: #fff;
    border: 1px solid #ddd; border-radius: 999px; padding: 5px 12px; color: var(--cvg-ink);
}
.cvg-drug em { font-style: normal; color: #888; font-weight: 500; font-size: 11px; margin-left: 4px; }

.cvg-meter { margin-bottom: 12px; }
.cvg-meter-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.cvg-meter-top b { font-weight: 600; }
.cvg-lvl { color: #666; font-size: 12px; }
.cvg-bar { height: 12px; border-radius: 6px; background: var(--cvg-track); overflow: hidden; }
.cvg-bar > span { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 0.4s ease; }
.cvg-bar--gpos > span { background: var(--cvg-gpos); }
.cvg-bar--gneg > span { background: var(--cvg-gneg); }
.cvg-bar--blr > span { background: var(--cvg-blr); }
@media (prefers-reduced-motion: reduce) {
    .cvg-bar > span { transition: none; }
}

.cvg-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cvg-badge { font-size: 12px; font-weight: 600; border-radius: 8px; padding: 5px 11px; background: #fff; border: 1px solid #ddd; color: var(--cvg-ink); }
.cvg-use { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--cvg-ink); }
.cvg-use b { font-weight: 700; }
.cvg-gaps { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #ddd; font-size: 13px; color: #333; }
.cvg-gaps b { color: var(--cvg-ink); }