/* Plan Details cards: a cool-gray band behind each card's header (2026-10-17, the user picked B in
   _audits/2026-10-17-card-headers-mockup.html: "separate parts visually"). The header's own background is stretched to the
   card's edges (border-image outset) and the card clips it to its rounded corners; a hairline in the band's own shade at
   its bottom. A folded card is all header: all band. Body, fields and buttons unchanged. Studio and Studio Dark. Not Plan options: a list of
   options, each row its own card already (and the band broke its rows). */
/* the colours: --s-band, --s-band-line in compass-studio.css (light and dark) */
@layer studio {
  html.studio #toolView :is(.pp-card, .mm.panel, .pd-part, .nw-item.prop-card, .rd-group, .th-in-spend, .th-block, .med-panel, .rv-box) { overflow:clip !important; }
  html.studio #toolView :is(.pp-card > .pp-h, .mm.panel > .mm-head, .pd-part > .section-title, .nw-item.prop-card > .prop-head, .rd-group > .rd-group-h, .th-in-spend > .section-title, .th-block > .th-h, .med-panel > .med-title, .rv-box > .rv-h) {
    border-image:linear-gradient(var(--s-band) calc(100% - 1px), var(--s-band-line) 0) fill 0 / 0 / 999px 999px 0 999px !important;
    padding-bottom:12px !important; margin-bottom:16px !important; }
  /* folded: the whole card is its header */
  html.studio #toolView .pp-card.pf-closed > .pp-h { border-image:linear-gradient(var(--s-band), var(--s-band)) fill 0 / 0 / 999px !important; padding-bottom:0 !important; margin-bottom:0 !important; }
  /* the header's title keeps its own spacing inside the band */
  html.studio #toolView .pp-card > .pp-h h3.pf-h3 { margin-bottom:0 !important; }
}
/* Roth Conversion page: "Model Roth conversions" gets the same band (2026-10-18, the user: "make the Roth conversion heading light
   grey like we did to the other cards"). Off, the card is all heading: all band, no line under it. */
@layer studio {
  html.studio #rothView .rc-card { overflow:clip !important; }
  html.studio #rothView .rc-card > .rc-head { background:var(--s-band) !important; border-bottom:1px solid var(--s-band-line) !important; }
  html.studio #rothView .rc-card > .rc-head:not(.is-on) { border-bottom:0 !important; }
}