/* "Study context" badges (Trial Data Quality Flags, Theme 5).
 *
 * ONE neutral visual tier — no severity levels, no red/amber/green, no ranking. The
 * flags are different CATEGORIES of information (a design characteristic, a process
 * record, an operational outcome), not different magnitudes, and a severity scale on a
 * named sponsor's real trial would be an editorial verdict the framing can't support.
 *
 * Neutral stone fill, deliberately distinct from sage (topical tags) and terracotta
 * (disease tags) so the row reads as a different category at the SAME visual weight.
 * All values map to existing design tokens. Shared-design-system component (sibling of
 * filter.css / empty_state.css). */

.ctx-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
}

.ctx-label {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9a8a;
}

.ctx-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ctx-badge {
  display: inline-block;
  padding: 2px 10px;
  background: #EEE9DF;
  border: 0.5px solid #D6D0C4;
  border-radius: 999px;
  color: #3a3a3a;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
  cursor: default;
}

a.ctx-badge {
  cursor: pointer;
}

/* #80: "currently explaining this one" state, toggled by disclosure_panel.js
   via data-panel-open while its panel is shown (hover, focus, or click/tap on
   a no-destination badge). Resting state above is unchanged from before #80. */
.ctx-badge[data-panel-open="true"] {
  border-color: #3A6EA5;
}
span.ctx-badge {
  cursor: pointer;
}
span.ctx-badge:focus {
  outline: none; /* data-panel-open's border-color is the focus indicator */
}

/* ── #80: shared accessible-disclosure panel (disclosure_panel.js) ──────────
   One element, created once, repositioned and refilled per active trigger.
   Most triggers (badges, body markers) hold no interactive content, so
   mouseleave/blur dismiss with only a de-minimis delay. #76's Sex tooltip is
   the first trigger whose panel holds a real link (.lnk below) — see
   disclosure_panel.js for the hover/focus bridge that makes it reachable. */
.disc-panel {
  display: none;
  position: absolute;
  border: 0.5px solid #3A6EA5;
  border-radius: 8px;
  background: #F4F7FB;
  padding: 9px 11px;
  font-size: 11px;
  color: #3a3a3a;
  line-height: 1.55;
  max-width: 430px;
  z-index: 60;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.disc-panel .lnk {
  margin-top: 5px;
}
.disc-panel .lnk a {
  color: #3A6EA5;
  text-decoration: none;
}
.disc-panel .lnk a:hover {
  text-decoration: underline;
}

/* ── #80: body markers — same explanation mechanism as the badges above,
   placed inline at the specific heading/row a flag substantiates (see
   macros/quality_badge.html's flag_marker()). ── */
.flag-marker-wrap {
  margin-left: 3px;
}
.flag-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #3A6EA5;
  color: #3A6EA5;
  font-size: 8px;
  font-weight: 500;
  line-height: 11px;
  vertical-align: top;
  font-style: normal;
  cursor: pointer;
}
/* PM feedback (live browser review, 2026-08-09): the "i" glyph read too high
   within the circle. Nudging the glyph itself, not the circle, so the
   marker's position/size relative to its heading or row is unaffected. */
.flag-marker-glyph {
  position: relative;
  top: 0.3px;
}
.flag-marker:focus {
  outline: none; /* data-panel-open's fill is the focus indicator */
}
/* Tap target padded beyond the 11px visible circle (mock-up spec) without
   changing the visible size — an invisible expanded hit area. */
.flag-marker::before {
  content: '';
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
}
.flag-marker[data-panel-open="true"] {
  background: #3A6EA5;
  color: #fff;
}