/* ==========================================================================================================
   drawers-studies — content of the study drawers P1, P6, P7, P8, P9, P10, P11 (brief/drawers-studies.md).
   The SHELL (.drawer, .drawer__panel, .drawer__close, .drawer__scroller, .drawer__body padding/gap) and the shared
   primitives (.drawer__head/__label/__title/__lead/__badges/__badge/__source…) live in css/components.css
   "DRAWER SHELL" — NOT re-styled here; per-drawer tweaks of a primitive are overridden under .drawers--studies.
   Mobile-first: base = < 768 (390 frame, column 358) · 768–1023 = the 390 frame flat (D-DS-4) · >= 1024 = 720 frame.
   s = var(--max-vw) / var(--vw-base);  Δ = (var(--max-vw) - 390px) * 0.015
   ========================================================================================================== */

/* ---- Head primitives: per-slice tweaks ---------------------------------------------------------------- */
/* Badge row HUGs its chips (Figma rows 278–597 wide), wraps (D-DS-2): row-gap 8; column gap D 12 · M P1 8, P6–P11 12 */
.drawers--studies .drawer__badges {
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
  row-gap: 8px;
  column-gap: 12px;
}
.drawers--studies #drawer-p1 .drawer__badges { column-gap: 8px; }
.drawers--studies .drawer__badge { padding: 2px 6px; }
/* Negated badge (D-DS-3): the study is NOT this — struck text; "Not " is visually hidden in the markup (BA-DS-3) */
.drawers--studies .drawer__badge--not s {
  text-decoration: line-through;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: none;
}

/* ---- Published in -------------------------------------------------------------------------------------- */
.drawers--studies .study__published {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 20px);
  background: var(--color-off-white);
}
.drawers--studies .study__published-label,
.drawers--studies .study__published-ref {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}
.drawers--studies .study__published-label { font-weight: var(--weight-medium); }
.drawers--studies .study__published-ref { font-weight: var(--weight-regular); }

/* ---- Methods / tells / limits ---------------------------------------------------------------------------- */
.drawers--studies .study__methods {
  display: flex;
  flex-direction: column;
  gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 24px);
}
.drawers--studies .study__methods-text,
.drawers--studies .study__tells,
.drawers--studies .study__limits {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawers--studies .study__heading {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-xl);
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: var(--color-ink);
}
.drawers--studies .study__text {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}

/* ---- Stat tiles (2x2, or one row of 2 on P10 / P11) -------------------------------------------------------- */
.drawers--studies .study__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 12px);
  margin: 0;
}
.drawers--studies .study__tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;                 /* FIX_SECTION: label + value are FILL-width in Figma (AUDIT FD-R rows) */
  gap: 4px;
  padding: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 20px);
  background: var(--color-off-white);
}
.drawers--studies .study__tiles--row .study__tile { gap: 8px; }   /* P10 / P11 mobile draw 8 */
.drawers--studies .study__tile-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink);
}
.drawers--studies .study__tile-value {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-display-tile);
  line-height: var(--lh-display-tile);
  letter-spacing: var(--ls-display-tile);
  color: var(--color-ink);
}

/* ---- P9 labelled bars (D-DS-6) ------------------------------------------------------------------------------ */
.drawers--studies .study__bars {
  display: flex;
  flex-direction: column;
  gap: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 24px);
}
.drawers--studies .study__bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawers--studies .study__bar-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-body-lg);
  color: var(--color-ink);
}
.drawers--studies .study__bar-track {
  display: block;
  width: 100%;
  height: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 20px);
  overflow: hidden;            /* Figma clips the 20-tall mobile fill inside the 16 track */
  background: var(--color-off-white);
}
.drawers--studies .study__bar-fill {
  display: block;
  height: 100%;
}
.drawers--studies .study__bar--peak .study__bar-fill { width: 52.23%; background: var(--color-ink-20); }  /* 187 / 358 */
.drawers--studies .study__bar--build .study__bar-fill { width: 100%; background: var(--color-accent); }
.drawers--studies .study__bars-caption {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-body-sm);
  color: var(--color-ink-80);
}

/* ---- Source link: "View on PubMed →" (Action/Button text variant, 16 on BOTH layers — D-DS-9) ----------------- */
.drawers--studies .drawer__source-link {
  gap: 5px;
  padding: 2px 0;
  font-size: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: from-font;
}
.drawers--studies .drawer__source-link:hover { text-decoration-thickness: 2px; }

/* ---- Pseudo-tablet 768–1023: the 390 mobile frame rendered flat (D-DS-4 / BA-DS-4) ---------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .drawers--studies {
    --text-h3: 28px;          --lh-h3: 1.2;   --ls-h3: -0.0107em;
    --text-body-lg: 18px;
    --text-body-xl: 22px;
    --text-body: 15px;
    --text-body-sm: 13px;
    --text-tag-label: 11px;
    --text-display-tile: 32px; --lh-display-tile: 1.06;
  }
  .drawers--studies .study__published { padding: 16px; }
  .drawers--studies .study__methods { gap: 16px; }
  .drawers--studies .study__tiles { gap: 8px; }
  .drawers--studies .study__tile { padding: 16px; }
  .drawers--studies .study__bars { gap: 16px; }
  .drawers--studies .study__bar-track { height: 16px; }
  .drawers--studies .drawer__source-link { font-size: 16px; }
}

/* ---- Desktop >= 1024: 720 frame, column 624·s --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .drawers--studies #drawer-p1 .drawer__badges { column-gap: 12px; }
  .drawers--studies .drawer__badge--not {
    font-size: var(--text-tag-label);
    line-height: var(--lh-tag-label);
    letter-spacing: var(--ls-tag-label);
  }
  .drawers--studies .study__published { padding: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px); }
  .drawers--studies .study__methods { gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px); }
  .drawers--studies .study__methods-text,
  .drawers--studies .study__tells,
  .drawers--studies .study__limits { gap: clamp(4px, calc(8px * (var(--max-vw) / var(--vw-base))), 8px); }
  .drawers--studies .study__tiles { gap: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px); }
  .drawers--studies .study__tile,
  .drawers--studies .study__tiles--row .study__tile {
    gap: clamp(2px, calc(4px * (var(--max-vw) / var(--vw-base))), 4px);
    padding: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
  }
  .drawers--studies .study__bars { gap: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px); }
  .drawers--studies .study__bar { gap: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px); }
  .drawers--studies .study__bar-track { height: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px); }
  .drawers--studies .study__bar--peak .study__bar-fill { width: 29.97%; }   /* 187 / 624 */
  .drawers--studies .drawer__source-link { font-size: var(--text-body); }
  .drawers--studies .drawer__source-link img {
    width: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
    height: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
  }
}