/* One selected graphic project occupies the stage; its artwork and copy share
   that project's card. Native hidden state remains owned by the R174 controller. */
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] {
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%;
  min-width:0;
  height:auto;
  max-height:none;
  align-items:start;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card:not([hidden]) {
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
  gap:0!important;
  width:100%;
  min-width:0;
  min-height:0!important;
  height:auto;
  max-height:none;
  align-items:start!important;
  border:1px solid #e2d8ee;
  border-radius:14px;
  box-sizing:border-box;
  background:#faf8fc;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-media {
  display:block!important;
  grid-column:1;
  grid-row:1;
  width:100%;
  min-width:0;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:16px!important;
  box-sizing:border-box;
  background:#f4f0f8;
  align-self:start!important;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-media > :is(.folio-media,.r30-case-visual) {
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  background:transparent!important;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-media > :is(.folio-media,.r30-case-visual) > img {
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:min(58svh,520px)!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  margin-inline:auto!important;
  border-radius:8px!important;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-copy {
  display:block!important;
  grid-column:2;
  grid-row:1;
  min-width:0;
  width:100%;
  height:auto;
  max-height:none;
  padding:clamp(20px,2.4vw,34px)!important;
  box-sizing:border-box;
  align-self:start!important;
  overflow:visible;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-copy > h3 {
  margin:0 0 10px!important;
  font-size:clamp(22px,2vw,30px)!important;
  line-height:1.4!important;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-copy > .r86-summary {
  margin:0 0 14px!important;
  color:#62516f!important;
  font-size:14px!important;
  line-height:1.7!important;
}
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > :is(.r148-edge-dock,.r150-motion-tools) {
  grid-column:1 / -1;
}
/* Inactive cards cannot be revived by a layout rule, including legacy !important rules. */
html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card[hidden] {
  display:none!important;
}
@media(max-width:760px) {
  html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card:not([hidden]) {
    grid-template-columns:minmax(0,1fr)!important;
  }
  html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-media {
    padding:12px!important;
  }
  html[data-r110-home] #selected.r86-selected [data-r78-stage][data-r80-layout="graphic"] > .r86-card > .r86-copy {
    grid-column:1;
    grid-row:2;
    padding:18px!important;
  }
}