/* mdr51fu1112: PR164 (mdr51) follow-up, project page on phones only.
   Designer FAIL: at 390 the taller Edit button and the extra mdr51 card gaps pushed "+ Add talent / +PR"
   about 30px under the fixed Contact / More actions bar. The Edit button keeps its 44px height.
   1) scroll-area bottom padding is at least (sticky bar height + env(safe-area-inset-bottom) + 24px).
      --pgm5a-bar is the bar height the app already measures (idle bar only); 109px is the idle fallback.
   2) vertical gaps are tightened at <=600px (accordion header margin, notes padding, header pill gap,
      drawer body padding, drawer bottom gap) so the row sits where it does on live.
   3) 6px gap between the three accordion cards at <=600px. The 12px this adds is reclaimed
      from the 8px hero/root gaps (4px each; a more specific selector is required) and 4px of
      drawer body bottom padding, so + Add talent stays at y=705, fully on the first screen.
   4) at <=600px the #root padding-bottom band is white, matching live. PR164's pale-blue
      html/body wash was showing through that padding as a band live does not have. */
@media (max-width: 600px) {
  html[data-mdr51~="proj"]:root body:has(.mk800-selbar) #root {
    padding-bottom: max(calc(var(--pgm5a-bar, 0px) + 64px), calc(var(--pgm5a-bar, 109px) + env(safe-area-inset-bottom, 0px) + 24px)) !important;
  }
  html[data-mdr51~="proj"]:root body:has(.mk800-selbar.ab939-phone:not(.ab939-open)) #root {
    padding-bottom: max(calc(var(--pgm5a-bar, 0px) + 64px), calc(var(--pgm5a-bar, 109px) + env(safe-area-inset-bottom, 0px) + 24px)) !important;
  }
  /* Live has the same 173px padding-bottom above the bar, but html/body are white.
     PR164 paints html/body/#root #c5d4ec, which shows through that padding as a pale-blue
     band. Keep the padding (content must clear the bar); paint it white at <=600px only. */
  html[data-mdr51~="proj"]:root:has(.mk800-selbar),
  html[data-mdr51~="proj"]:root body:has(.mk800-selbar),
  html[data-mdr51~="proj"]:root body:has(.mk800-selbar) #root {
    background-color: #fff !important;
  }
  html[data-mdr51~="proj"] .dr1102-hd { margin: 0 !important; }
  html[data-mdr51~="proj"] [data-v763-pn="1"],
  html[data-mdr51~="proj"] .mk800-staff { padding: 8px 12px !important; }
  html[data-mdr51~="proj"] header .pv-chips, html[data-mdr51~="proj"] header .pv-row { row-gap: 3px !important; }
  html[data-mdr51~="proj"] header > .grid { padding-top: 6px !important; padding-bottom: 4px !important; row-gap: 4px !important; }
  html[data-mdr51~="proj"] [data-dr1102="drawer"] { margin-bottom: 0 !important; }
  /* 6px between Project details, Filters and Forms & documents (Filters and Forms
     are portaled into #dr1102-slot and #dfm4-slot inside the Project details drawer). */
  html[data-mdr51~="proj"] #dr1102-slot > .fdr1102,
  html[data-mdr51~="proj"] [data-fdr1102="drawer"] { margin-top: 6px !important; }
  html[data-mdr51~="proj"] #dfm4-slot > .dfm4,
  html[data-mdr51~="proj"] [data-dfm4="drawer"] { margin-top: 6px !important; }
  /* Reclaim those 12px so + Add talent stays at the accepted y=705. The 30px above
     the bar is the row itself, not spare room. html:root body .mk800-root>.mk800-hero
     {gap:8px!important} wins a weaker selector, so this matches that specificity
     (8→4 on hero and root) and trims 4px of drawer body bottom padding (10→6). */
  html[data-mdr51~="proj"]:root body .mk800-root > .mk800-hero,
  html[data-mdr51~="proj"]:root body .mk800-root { gap: 4px !important; }
  html[data-mdr51~="proj"] .dr1102-body { padding: 8px 16px 6px !important; }
}